ant-design/docs/getting-started.md

# 快速上手

- category: 1
- order: 1

---

Ant Design React 致力于提供给程序员愉悦的开发体验。

实际项目开发中，你会需要 CommonJS 、JSX 构建、打包部署等一系列工程化的需求。
我们提供了一套 `npm` + `webpack` 的开发工具链来辅助开发，下面我们用一个简单的实例来说明。

### 1. 安装命令行工具

```bash
$ npm install antd-bin -g
```

[更多使用说明](https://github.com/ant-design/antd-bin#使用说明)。

### 2. 创建一个项目

使用命令行进行初始化。

```bash
$ mkdir antd-demo && cd antd-demo
$ antd init
$ npm install
```

### 3. 使用组件

编辑 `index.js`，使用 Ant Design React 的组件：

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Datepicker, message } from 'antd';

var App = React.createClass({
  getInitialState() {
    return {
      date: ''
    };
  },
  handleChange(value) {
    message.info('您选择的日期是: ' + value.toString());
    this.setState({
      date: value
    });
  },
  render() {
    return <div style={{width: 400, margin: '100px auto'}}>
      <Datepicker onSelect={this.handleChange} />
      <div style={{marginTop: 20}}>当前日期：{this.state.date.toString()}</div>
    </div>;
  }
});

ReactDOM.render(<App />, document.body);
```

> `var Datepicker = require('antd/lib/datepicker')` 单独引入需要的组件文件可以有效减少最终构建文件的大小。

> `lib` 即构建后的 `components` 目录。

然后建一个页面用于开发。

```bash
$ touch index.html
```

编辑 `index.html` 如下：

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/index.css">
  </head>
  <body>
  </body>
  <!-- 引入公用文件 -->
  <script src="/common.js"></script>
  <!-- 引入入口文件 -->
  <script src="/index.js"></script>
</html>
```

### 4. 开发调试

一键启动调试，访问 http://127.0.0.1:8000 查看效果。

```bash
$ npm run dev
```

### 5. 构建和部署

```bash
$ npm run build
```

入口文件会构建到 `dist` 目录中，你可以自由部署到不同环境中进行引用。

> 上述例子用于帮助你理解 Ant Design React 的使用流程，并非真实的开发过程，你可以根据自己的项目开发流程进行接入。

## 兼容性

Ant Design React 支持所有的现代浏览器和 IE8+。

对于 IE8，需要提供 [es5-shim](http://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills) 等 Polyfills 的支持。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/index.css">
    <!-- Polyfills -->
    <script src="https://as.alipayobjects.com/component/??console-polyfill/0.2.2/index.js,es5-shim/4.1.14/es5-shim.js,es5-shim/4.1.14/es5-sham.js,html5shiv/3.7.2/html5shiv.js"></script>
  </head>
  <body>
  </body>
  <!-- 引入公用文件 -->
  <script src="/common.js"></script>
  <!-- 引入入口文件 -->
  <script src="/index.js"></script>
</html>
```

<div class="code-line-highlight"></div>

<style>
.code-line-highlight {
  box-shadow: 0 -239px 0 rgba(255, 207, 0, 0.16);
  height: 42px;
  margin-bottom: -42px;
}
</style>

## 小甜点

- 你可以享用 `npm` 生态圈里的所有模块。
- 我们使用了 `babel`，试试用 [ES6](http://babeljs.io/blog/2015/06/07/react-on-es6-plus/) 的写法来提升编码的愉悦感。
-												sidebar for docs

											
										
										
											2015-06-04 17:56:09 +08:00
+								# 快速上手
-												update documentation

											
										
										
											2015-08-24 15:57:00 +08:00
+								- category: 1
-												sidebar for docs

											
										
										
											2015-06-04 17:56:09 +08:00
+								- order: 1
 								---
-												Change site struction

											
										
										
											2015-08-22 19:13:06 +08:00
+								Ant Design React 致力于提供给程序员愉悦的开发体验。
-												update documentation

											
										
										
											2015-07-03 18:06:47 +08:00
 								实际项目开发中，你会需要 CommonJS 、JSX 构建、打包部署等一系列工程化的需求。
-												update docs/getting-started.md

											
										
										
											2015-10-22 11:01:36 +08:00
+								我们提供了一套 `npm` + `webpack` 的开发工具链来辅助开发，下面我们用一个简单的实例来说明。
-												update documentation

											
										
										
											2015-07-03 18:06:47 +08:00
 								### 1. 安装命令行工具
 								```bash
 								$ npm install antd-bin -g
 								```
-												update document

											
										
										
											2015-07-15 18:17:05 +08:00
+								[更多使用说明](https://github.com/ant-design/antd-bin#使用说明)。
-												update documentation

											
										
										
											2015-07-03 18:06:47 +08:00
 								### 2. 创建一个项目
 								使用命令行进行初始化。
 								```bash
 								$ mkdir antd-demo && cd antd-demo
 								$ antd init
 								$ npm install
 								```
 								### 3. 使用组件
-												Change site struction

											
										
										
											2015-08-22 19:13:06 +08:00
+								编辑 `index.js`，使用 Ant Design React 的组件：
-												update documentation

											
										
										
											2015-07-03 18:06:47 +08:00
 								```jsx
-												update get-started.md, Close #169

											
										
										
											2015-08-20 18:19:51 +08:00
+								import React from 'react';
-												chore: remove deprecated APIs

											
										
										
											2015-10-21 17:59:57 +08:00
+								import ReactDOM from 'react-dom';
-												update docs/getting-started.md

											
										
										
											2015-08-20 20:58:42 +08:00
+								import { Datepicker, message } from 'antd';
-												update getting started document

											
										
										
											2015-07-17 13:55:39 +08:00
 								var App = React.createClass({
 								  getInitialState() {
 								    return {
 								      date: ''
 								    };
 								  },
 								  handleChange(value) {
-												update started demo

											
										
										
											2015-08-26 16:38:55 +08:00
+								    message.info('您选择的日期是: ' + value.toString());
-												update getting started document

											
										
										
											2015-07-17 13:55:39 +08:00
+								    this.setState({
 								      date: value
 								    });
 								  },
-												update documentation

											
										
										
											2015-07-03 18:06:47 +08:00
+								  render() {
-												update started demo

											
										
										
											2015-08-26 16:38:55 +08:00
+								    return <div style={{width: 400, margin: '100px auto'}}>
-												update getting started document

											
										
										
											2015-07-17 13:55:39 +08:00
+								      <Datepicker onSelect={this.handleChange} />
-												update started demo

											
										
										
											2015-08-26 16:38:55 +08:00
+								      <div style={{marginTop: 20}}>当前日期：{this.state.date.toString()}</div>
-												update getting started document

											
										
										
											2015-07-17 13:55:39 +08:00
+								    </div>;
-												update documentation

											
										
										
											2015-07-03 18:06:47 +08:00
+								  }
 								});
-												chore: remove deprecated APIs

											
										
										
											2015-10-21 17:59:57 +08:00
+								ReactDOM.render(<App />, document.body);
-												update documentation

											
										
										
											2015-07-03 18:06:47 +08:00
+								```
-												typo fix

											
										
										
											2015-07-07 16:37:45 +08:00
+								> `var Datepicker = require('antd/lib/datepicker')` 单独引入需要的组件文件可以有效减少最终构建文件的大小。
-												update doc

											
										
										
											2015-07-03 18:12:38 +08:00
-												require antd

											
										
										
											2015-07-06 20:04:26 +08:00
+								> `lib` 即构建后的 `components` 目录。
-												update documentation

											
										
										
											2015-07-03 18:06:47 +08:00
+								然后建一个页面用于开发。
 								```bash
 								$ touch index.html
 								```
 								编辑 `index.html` 如下：
 								```html
 								<!DOCTYPE html>
 								<html>
 								  <head>
 								    <meta charset="utf-8">
 								    <!-- 引入样式 -->
-												Update getting-started.md
											
										
										
											2015-07-09 14:22:38 +08:00
+								    <link rel="stylesheet" href="/index.css">
-												update documentation

											
										
										
											2015-07-03 18:06:47 +08:00
+								  </head>
 								  <body>
 								  </body>
-												remove react external
											
										
										
											2015-10-19 16:09:18 +08:00
+								  <!-- 引入公用文件 -->
 								  <script src="/common.js"></script>
-												update documentation

											
										
										
											2015-07-03 18:06:47 +08:00
+								  <!-- 引入入口文件 -->
 								  <script src="/index.js"></script>
 								</html>
 								```
 								### 4. 开发调试
 								一键启动调试，访问 http://127.0.0.1:8000 查看效果。
 								```bash
 								$ npm run dev
 								```
 								### 5. 构建和部署
 								```bash
 								$ npm run build
 								```
 								入口文件会构建到 `dist` 目录中，你可以自由部署到不同环境中进行引用。
-												Change site struction

											
										
										
											2015-08-22 19:13:06 +08:00
+								> 上述例子用于帮助你理解 Ant Design React 的使用流程，并非真实的开发过程，你可以根据自己的项目开发流程进行接入。
-												update doc

											
										
										
											2015-07-08 12:55:23 +08:00
-												update documentation

											
										
										
											2015-07-03 18:06:47 +08:00
+								## 兼容性
-												Change site struction

											
										
										
											2015-08-22 19:13:06 +08:00
+								Ant Design React 支持所有的现代浏览器和 IE8+。
-												update documentation

											
										
										
											2015-07-03 18:06:47 +08:00
 								对于 IE8，需要提供 [es5-shim](http://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills) 等 Polyfills 的支持。
 								```html
 								<!DOCTYPE html>
 								<html>
 								  <head>
 								    <meta charset="utf-8">
 								    <!-- 引入样式 -->
-												update docs/getting-started.md

											
										
										
											2015-10-22 11:01:36 +08:00
+								    <link rel="stylesheet" href="/index.css">
-												update get-started

											
										
										
											2015-07-20 16:07:02 +08:00
+								    <!-- Polyfills -->
-												update docs/getting-started.md

											
										
										
											2015-10-22 11:01:36 +08:00
+								    <script src="https://as.alipayobjects.com/component/??console-polyfill/0.2.2/index.js,es5-shim/4.1.14/es5-shim.js,es5-shim/4.1.14/es5-sham.js,html5shiv/3.7.2/html5shiv.js"></script>
-												update documentation

											
										
										
											2015-07-03 18:06:47 +08:00
+								  </head>
 								  <body>
 								  </body>
-												update docs/getting-started.md

											
										
										
											2015-10-22 11:01:36 +08:00
+								  <!-- 引入公用文件 -->
 								  <script src="/common.js"></script>
 								  <!-- 引入入口文件 -->
 								  <script src="/index.js"></script>
-												update documentation

											
										
										
											2015-07-03 18:06:47 +08:00
+								</html>
 								```
-												code style

											
										
										
											2015-07-06 14:35:08 +08:00
+								<div class="code-line-highlight"></div>
 								<style>
 								.code-line-highlight {
-												update docs/getting-started.md

											
										
										
											2015-10-22 11:01:36 +08:00
+								  box-shadow: 0 -239px 0 rgba(255, 207, 0, 0.16);
-												code style

											
										
										
											2015-07-06 14:35:08 +08:00
+								  height: 42px;
 								  margin-bottom: -42px;
 								}
 								</style>
-												update documentation

											
										
										
											2015-07-03 18:06:47 +08:00
+								## 小甜点
-												Update getting-started.md
											
										
										
											2015-07-09 14:00:13 +08:00
+								- 你可以享用 `npm` 生态圈里的所有模块。
 								- 我们使用了 `babel`，试试用 [ES6](http://babeljs.io/blog/2015/06/07/react-on-es6-plus/) 的写法来提升编码的愉悦感。