ant-design

7.9 KiB

Raw Blame History

order	title
1	Getting Started

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

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

First Example

The following CodePen demo is the simplest usage case, and it's also a good habit to fork this demo to provide a re-producible demo while reporting a bug. Please don't use this demo as a scaffold in production.

antd CodePen

Standard Development Flow

During development, you may need to compile and debug JSX and ES2015 code, and even proxy some of the request to mocked data or some external services. And all of these to be done with a quick feedback provided through hot reloading of changes.

Such features, together with packaging the production version are covered in this work flow.

1. Installation

antd-init is a demo only scaffold tool. If you want to create real world projects, dva-cli is our recommendation.

$ npm install antd-init -g

Read the documentation of antd-init and the documentation of ant-tool to explore more features.

Also, you can use scaffold/demo which is provided by community:

antd-admin

reactSPA

react-redux-antd by Justin-lu

react-redux-antd by okoala

react-antd-admin

react-antd-redux-router-starter

react-redux-antd-starter

more scaffolds at Scaffold Market

2. Create a New Project

A new project can be created using CLI tools.

$ mkdir antd-demo && cd antd-demo
$ antd-init

antd-init will run npm install after a project is created. If it fails, you can run npm install by yourself.

3. Use antd's Components

By default, besides the scaffolding needed to start the development, a fully working Todo application is created. You may study this example later. For now, just follow this guide in order to get some experience working with the result of antd-init.

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

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: '',
    };
  }
  handleChange(date) {
    message.info('Selected Date: ' + date.toString());
    this.setState({ date });
  }
  render() {
    return (
      <div style={{ width: 400, margin: '100px auto' }}>
        <DatePicker onChange={value => this.handleChange(value)} />
        <div style={{ marginTop: 20 }}>Date: {this.state.date.toString()}</div>
      </div>
    );
  }
}

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

All the components in antd are listed in the sidebar.

4. Development & Debugging

Run your project and visit http://127.0.0.1:8000

$ npm start

5. Building & Deployment

$ npm run build

Entry files will be built and generated in dist directory, then we can deploy it to different environments.

This guide is designed to help you to understand how to use antd, so it may not be similar to what you do in the real world. But you can use those tools in your project, depending on your context and needs.

Compatibility

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

You need to provide es5-shim and es6-shim and other polyfills for IE browsers.

If you are using babel, we strongly recommend to use babel-polyfill and babel-plugin-transform-runtime instead of those two shims.

Please avoid using both the babel and shim way at the same time

If you run into problem about startsWith , you should import es6-shim or babel-polyfill as workaround.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- import stylesheet -->
    <link rel="stylesheet" href="/index.css">
    <!-- Polyfills -->
    <!--[if lt IE 10]>
    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
    <![endif]-->
    <script src="https://as.alipayobjects.com/g/component/??es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js"></script>
  </head>
  <body>
  </body>
  <!-- import common dependencies -->
  <script src="/common.js"></script>
  <!-- import entry file -->
  <script src="/index.js"></script>
</html>

IE8 note

We don't support IE8 after antd@2.0.

You may encounter problems like #28 and #858, since babel@6.x doesn't support IE8. You can refer to this webpack config.

More about how to use React in IE8: https://github.com/xcatliu/react-ie8

Customized Work Flow

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

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

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 import all components by writing import { Button } from 'antd';, this will affect your app's network perfermance.

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

We strongly recommend to use 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.

Customization

Tips

You can use any npm modules.
We recommend to write code in ES2015 as babel has been integrated in our work flow.

7.9 KiB Raw Blame History