Getting Started

Ant Design React is dedicated to providing a good development experience for programmers. Make sure that you have installed Node.js(> 8.0.0) correctly.

If you try in local environment, please refer to Install and Initialization section of "Use in create-react-app".

Before delving into Ant Design React, a good knowledge base of React and JavaScript ES2015 is needed.

First Example#

Here is a simple codesandbox example to show the usage of Ant Design React.

1. Create one codesandbox#

Visit http://u.ant.design/codesandbox-repro to create a codesandbox. Don't forget to press the save button.

2. Using antd component#

Replace the content of index.js with the following code. As you can see, there is no difference between antd's components and typical React components.

If you already set up by Install and Initialization section of "Use in create-react-app", Please replace the content of /src/index.js

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'));

3. Explore more components#

You can look up components in the side menu of the Components page like the Alert component. Plenty of examples are provided in the component pages and API documentation.

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 Alert component into the codesandbox:

- import { DatePicker, message } from 'antd';
+ import { DatePicker, message, Alert } from 'antd';

Add the following jsx into the render function.

  <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>

Now you can see the result in the preview section.

codesandbox screenshot

OK! Now you know how to use antd components in a clear way. You are welcome to explore more components in the codesandbox. We also strongly recommend using codesandbox to provide a reproducible demo when reporting a bug.

4. Next Step#

In the real world you will need a development workflow consisting of compile/build/deploy/lint/debug. You can find and read articles on the subject or try other scaffolds provided below:

Import on Demand#

antd supports tree shaking of ES modules, so using import { Button } from 'antd'; would drop js code you didn't use.

If you see logs like in the screenshot below, you might still be using webpack@1.x or have a wrong webpack config which can't support tree shaking.

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.

console warning

Replace momentjs to Day.js#

You can use antd-dayjs-webpack-plugin plugin to replace momentjs to Day.js to reduce bundle size dramatically. You need to update your webpack config file like this:

// webpack-config.js
import AntdDayjsWebpackPlugin from 'antd-dayjs-webpack-plugin';

module.exports = {
  // ...
  plugins: [new AntdDayjsWebpackPlugin()],
};

Customized Workflow#

If you want to customize your workflow, we recommend using webpack to build and debug code. You can try out plenty of boilerplates available in the React ecosystem.

There are some scaffolds which have already integrated antd, so you can try and start with one of these and even contribute.

Ant Design of ReactReal project with umi