ant-design

5.5 KiB

Raw Blame History

order	title
2	Getting Started

Ant Design React is dedicated to providing a good development experience for programmers. Before starting, it is recommended to learn React and ES2015 first, and correctly install and configure Node.js v8 or above.

The official guide also assumes that you have intermediate knowledge about HTML, CSS, and JavaScript, and React. If you are just starting to learn front-end or React, it may not be the best idea to use the UI framework as your first step.

Finally, if you are working in a local development environment, please refer to Install and Initialization section of "Use in create-react-app".

Your First Example

Here is a simple online codesandbox demo of an Ant Design component to show the usage of Ant Design React.

Follow the steps below to play around with Ant Design yourself: <h3 id="user-content-1-create-a-codesandbox">1. Create a codesandbox</h3> Visit http://u.ant.design/codesandbox-repro to create a codesandbox -- don't forget to press the save button as well to create a new instance. <h3 id="user-content-2-use-and-modify-an-antd-component">2. Use and modify an antd component</h3> Replace the contents of <code>index.js</code> with the following code. As you can see, there is no difference between antd's components and typical React components. If you have already set things up by following the <a href="/docs/react/use-with-create-react-app#Install-and-Initialization">Install and Initialization</a> section of "Use in create-react-app", replace the content of <code>/src/index.js</code> as follows: <pre><code class="chroma language-jsx">import React, { useState } from 'react'; import { render } from 'react-dom'; import { DatePicker, message } from 'antd'; import 'antd/dist/antd.css'; import './index.css'; const App = () => { const [date, setDate] = useState(null); const handleChange = value => { message.info(`Selected Date: ${value ? value.format('YYYY-MM-DD') : 'None'}`); setDate(value); }; return ( <div style={{ width: 400, margin: '100px auto' }}> <DatePicker onChange={handleChange} /> <div style={{ marginTop: 16 }}> Selected Date: {date ? date.format('YYYY-MM-DD') : 'None'} </div> </div> ); }; render(<App />, document.getElementById('root')); </code></pre><h3 id="user-content-3-explore-more-components">3. Explore more components</h3> You can view the list of components in the side menu of the Components page, such as the <a href="/components/alert">Alert</a> component. Plenty of examples are also provided in the component pages and API documentation as well. Click the "Open in Editor" icon in the first example to open an editor with source code to use out-of-the-box. Now you can import the <code>Alert</code> component into the codesandbox: <pre><code class="chroma language-diff">- import { DatePicker, message } from 'antd'; + import { DatePicker, message, Alert } from 'antd'; </code></pre>Now add the following jsx inside the <code>render</code> function. <pre><code class="chroma language-diff"> <DatePicker onChange={value => this.handleChange(value)} /> <div style={{ marginTop: 20 }}> - Selected Date: {date ? date.format('YYYY-MM-DD') : 'None'} + <Alert message="Selected Date" description={date ? date.format('YYYY-MM-DD') : 'None'} /> </div> </code></pre>Select a date, and you can see the effect in the preview area on the right: <img width="420" src="https://gw.alipayobjects.com/zos/antfincdn/JrXptUm1Nz/6b50edc4-3a3c-4b2a-843e-f9f0af2c4667.png" alt="codesandbox screenshot" /> OK! Now that you know the basics of using antd components, you are welcome to explore more components in the codesandbox. When reporting a bug with ant design, we also strongly recommend using codesandbox to provide a reproducible demo as well. <h3 id="user-content-4-next-steps">4. Next Steps</h3> During actual real-world project development, you will most likely need a development workflow consisting of <code>compile/build/deploy/lint/debug/</code> deployment. You can read the following documents on the subject or use the following scaffolds and examples provided below: <ul> <li><a href="http://pro.ant.design/">Ant Design Pro</a></li> <li><a href="https://github.com/zuiidea/antd-admin">antd-admin</a></li> <li><a href="https://github.com/d2-projects/d2-admin">d2-admin</a></li> <li>More scaffolds at <a href="http://scaffold.ant.design/">Scaffold Market</a></li> </ul> <h2 id="user-content-import-on-demand">Import on Demand</h2> <code>antd</code> supports tree shaking of ES modules, so using <code>import { Button } from 'antd';</code> would drop js code you didn't use. If you see logs like in the screenshot below, you might still be using <code>webpack@1.x</code> or have a wrong webpack config which can't support tree shaking. <pre><code class="chroma language-text">You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size. Please upgrade webpack or check the config. </code></pre><blockquote> <a href="https://zos.alipayobjects.com/rmsportal/GHIRszVcmjccgZRakJDQ.png"><img src="https://zos.alipayobjects.com/rmsportal/GHIRszVcmjccgZRakJDQ.png" alt="console warning"></a> </blockquote> <h2 id="user-content-customize-your-workflow">Customize your Workflow</h2> If you want to customize your workflow, we recommend using <a href="http://webpack.github.io/">webpack</a> to build and debug code. You can try out plenty of <a href="https://github.com/enaqx/awesome-react#react-tools">boilerplates</a> available in the React ecosystem. There are also some <a href="http://scaffold.ant.design/">scaffolds</a> which have already been integrated into antd, so you can try and start with one of these and even contribute.

5.5 KiB Raw Blame History

Your First Example

5.5 KiB

Raw Blame History