ant-design

7.5 KiB

Raw Blame History

order	title
1	Getting Started

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

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

First Example

There is the simplest example to show 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 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 usual React components.

import React from "react";
import ReactDOM from "react-dom";
import { DatePicker, message } from "antd";
import "antd/dist/antd.css";
import "./index.css";

class App extends React.Component {
  state = {
    date: null,
  };

  handleChange = date => {
    message.info(`Selected Date: ${date ? date.format("YYYY-MM-DD") : "None"}`);
    this.setState({ date });
  };

  render() {
    const { date } = this.state;
    return (
      <div style={{ width: 400, margin: "100px auto" }}>
        <DatePicker onChange={this.handleChange} />
        <div style={{ marginTop: 20 }}>
          Selected Date: {date ? date.format("YYYY-MM-DD") : "None"}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

3. Explore in more components

You can look up compnents in side menu, find one like Alert. Plenty of examples are provided in component page, API documentation too.

Click the corner icon at first example, there are source codes to use out of box. Now you are try import Alert in previous codesandbox:

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

Add jsx part in 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: ${date ? date.format('YYYY-MM-DD') : 'None'}`} type="success" />
  </div>

Then you can see the result at preview section.

codesandbox screenshot

OK! Now you know how to use antd components in a clear way, welcome to explore more usages in this codesandbox. We also strongly recommend to use codesandbox to provide a reproducible demo while reporting a bug.

4. Next Step

In real world you gonna need a whole package of compile/build/deploy/lint/debug development workflow which you can read ariticles afterwards or try other scaffolds provided below:

Compatibility

Ant Design React supports all the modern browsers and IE9+.

IE / Edge	Firefox	Chrome	Safari	Opera	Electron
IE9, IE10, IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

We offset very limit support for IE9/10, some styles and animation would be mininal under them, also we are using Flex layout in few components.

Note, different with Ant Design, Ant Design Pro support to IE11+.

Polyfills are needed for IE browsers, we recommend babel-preset-env for it. You can set targets config if you are using umi.

Ant Design 3.0 support both React 15 and 16 now though, we strongly suggest React 16 for better performance and few bugs.

IE8 note

We don't support IE8 after antd@2.0.

Customized Work Flow

If you want to customize your work flow, we recommend using webpack to build and debug code.

Also, you can use any scaffold available in the React ecosystem. If you encounter problems, you can use our webpack config and modify it.

If you are trying parcel, here is a demo repository.

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

Import on Demand

If you see logs like below screenshot, you might be importing all components by writing import { Button } from 'antd';. This will affect your app's network performance.

You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.

However, we can import individual components on demand:

import Button from 'antd/lib/button';
import 'antd/lib/button/style'; // or antd/lib/button/style/css for css format file

antd/es/button to import es version module for tree shaking.

We strongly recommend using babel-plugin-import, which can convert the following code to the 'antd/lib/xxx' way:

import { Button } from 'antd';

And this plugin can load styles too, read usage for more details.

FYI, babel-plugin-import's style option will importing some global reset styles, don't use it if you don't need those styles. You can import styles manually via import 'antd/dist/antd.css' and override the global reset styles.

7.5 KiB Raw Blame History