2015-06-04 17:56:09 +08:00
|
|
|
|
# 快速上手
|
|
|
|
|
|
|
2015-08-24 15:57:00 +08:00
|
|
|
|
- category: 1
|
2015-06-04 17:56:09 +08:00
|
|
|
|
- order: 1
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
2015-08-22 19:13:06 +08:00
|
|
|
|
Ant Design React 致力于提供给程序员愉悦的开发体验。
|
2015-07-03 18:06:47 +08:00
|
|
|
|
|
|
|
|
|
|
## 第一个例子
|
|
|
|
|
|
|
2015-08-22 19:13:06 +08:00
|
|
|
|
我们封装了一套基于 React 实现的 UI 组件，可以用 React 的方式直接使用。
|
2015-07-03 18:06:47 +08:00
|
|
|
|
|
2015-07-06 15:03:11 +08:00
|
|
|
|
下面有一个使用了 [日期选择](http://ant.design/components/datepicker) 组件的简单例子。
|
2015-07-03 18:06:47 +08:00
|
|
|
|
|
2015-10-22 10:30:13 +08:00
|
|
|
|
<iframe width="100%" height="380" src="//jsfiddle.net/afc163/3cwzj0ea/embedded/result,html" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
2015-07-03 18:06:47 +08:00
|
|
|
|
|
|
|
|
|
|
源码如下：
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<!-- 引入样式 -->
|
2015-10-22 10:30:13 +08:00
|
|
|
|
<link rel="stylesheet" href="http://09x.ant.design/dist/antd.css">
|
2015-07-03 18:06:47 +08:00
|
|
|
|
<!-- 引入 react 和 antd.js -->
|
2015-07-15 18:17:05 +08:00
|
|
|
|
<script src="https://a.alipayobjects.com/??jquery/jquery/1.11.1/jquery.js,react/0.13.3/react.min.js,react/0.13.3/JSXTransformer.js"></script>
|
2015-10-22 10:30:13 +08:00
|
|
|
|
<script src="http://09x.ant.design/dist/antd.js"></script>
|
2015-07-03 18:06:47 +08:00
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
<!-- 直接调用全局变量 -->
|
|
|
|
|
|
<script type="text/jsx">
|
|
|
|
|
|
React.render(<antd.Datepicker />, document.body);
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</html>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2015-10-22 10:30:13 +08:00
|
|
|
|
你可以在 [这里](/components/button/) 选用更多组件。
|
2015-07-03 18:06:47 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 标准项目
|
|
|
|
|
|
|
|
|
|
|
|
实际项目开发中，你会需要 CommonJS 、JSX 构建、打包部署等一系列工程化的需求。
|
2015-08-22 19:13:06 +08:00
|
|
|
|
提供了一套 `npm` + `webpack` 的开发工具链来辅助开发，下面我们用一个简单的实例来说明。
|
2015-07-03 18:06:47 +08:00
|
|
|
|
|
|
|
|
|
|
### 1. 安装命令行工具
|
|
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
|
$ npm install antd-bin -g
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2015-07-15 18:17:05 +08:00
|
|
|
|
[更多使用说明](https://github.com/ant-design/antd-bin#使用说明)。
|
2015-07-03 18:06:47 +08:00
|
|
|
|
|
|
|
|
|
|
### 2. 创建一个项目
|
|
|
|
|
|
|
|
|
|
|
|
使用命令行进行初始化。
|
|
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
|
$ mkdir antd-demo && cd antd-demo
|
|
|
|
|
|
$ antd init
|
|
|
|
|
|
$ npm install
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 3. 使用组件
|
|
|
|
|
|
|
2015-08-22 19:13:06 +08:00
|
|
|
|
编辑 `index.js`，使用 Ant Design React 的组件：
|
2015-07-03 18:06:47 +08:00
|
|
|
|
|
2015-10-26 17:12:40 +08:00
|
|
|
|
修改 `package.json` 的 entry 为 `"index": "./index.js"`。
|
|
|
|
|
|
在目录下建立和编辑 `index.js`，使用 Ant Design React 的组件。
|
|
|
|
|
|
|
2015-07-03 18:06:47 +08:00
|
|
|
|
```jsx
|
2015-08-20 18:19:51 +08:00
|
|
|
|
import React from 'react';
|
2015-08-20 20:58:42 +08:00
|
|
|
|
import { Datepicker, message } from 'antd';
|
2015-07-17 13:55:39 +08:00
|
|
|
|
|
|
|
|
|
|
var App = React.createClass({
|
|
|
|
|
|
getInitialState() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
date: ''
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
handleChange(value) {
|
2015-08-26 16:38:55 +08:00
|
|
|
|
message.info('您选择的日期是: ' + value.toString());
|
2015-07-17 13:55:39 +08:00
|
|
|
|
this.setState({
|
|
|
|
|
|
date: value
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
2015-07-03 18:06:47 +08:00
|
|
|
|
render() {
|
2015-08-26 16:38:55 +08:00
|
|
|
|
return <div style={{width: 400, margin: '100px auto'}}>
|
2015-07-17 13:55:39 +08:00
|
|
|
|
<Datepicker onSelect={this.handleChange} />
|
2015-08-26 16:38:55 +08:00
|
|
|
|
<div style={{marginTop: 20}}>当前日期：{this.state.date.toString()}</div>
|
2015-07-17 13:55:39 +08:00
|
|
|
|
</div>;
|
2015-07-03 18:06:47 +08:00
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
2015-07-17 13:55:39 +08:00
|
|
|
|
React.render(<App />, document.body);
|
2015-07-03 18:06:47 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
2015-07-07 16:37:45 +08:00
|
|
|
|
> `var Datepicker = require('antd/lib/datepicker')` 单独引入需要的组件文件可以有效减少最终构建文件的大小。
|
2015-07-03 18:12:38 +08:00
|
|
|
|
|
2015-07-06 20:04:26 +08:00
|
|
|
|
> `lib` 即构建后的 `components` 目录。
|
|
|
|
|
|
|
2015-10-26 17:12:40 +08:00
|
|
|
|
然后建一个页面 index.html 用于开发，编辑如下：
|
2015-07-03 18:06:47 +08:00
|
|
|
|
|
|
|
|
|
|
编辑 `index.html` 如下：
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<!-- 引入样式 -->
|
2015-07-09 14:22:38 +08:00
|
|
|
|
<link rel="stylesheet" href="/index.css">
|
2015-07-17 13:55:39 +08:00
|
|
|
|
<script src="https://a.alipayobjects.com/??jquery/jquery/1.11.1/jquery.js,react/0.13.3/react.min.js"></script>
|
2015-07-03 18:06:47 +08:00
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
<!-- 引入入口文件 -->
|
|
|
|
|
|
<script src="/index.js"></script>
|
|
|
|
|
|
</html>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 4. 开发调试
|
|
|
|
|
|
|
|
|
|
|
|
一键启动调试，访问 http://127.0.0.1:8000 查看效果。
|
|
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
|
$ npm run dev
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 5. 构建和部署
|
|
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
|
$ npm run build
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
入口文件会构建到 `dist` 目录中，你可以自由部署到不同环境中进行引用。
|
|
|
|
|
|
|
2015-08-22 19:13:06 +08:00
|
|
|
|
> 上述例子用于帮助你理解 Ant Design React 的使用流程，并非真实的开发过程，你可以根据自己的项目开发流程进行接入。
|
2015-07-08 12:55:23 +08:00
|
|
|
|
|
2015-07-03 18:06:47 +08:00
|
|
|
|
## 兼容性
|
|
|
|
|
|
|
2015-08-22 19:13:06 +08:00
|
|
|
|
Ant Design React 支持所有的现代浏览器和 IE8+。
|
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">
|
|
|
|
|
|
<!-- 引入样式 -->
|
2015-10-26 17:12:40 +08:00
|
|
|
|
<link rel="stylesheet" href="/index.css">
|
2015-07-20 16:07:02 +08:00
|
|
|
|
<!-- Polyfills -->
|
2015-08-03 18:43:23 +08:00
|
|
|
|
<script src="https://a.alipayobjects.com/??es5-shim/4.1.10/es5-shim.min.js,es5-shim/4.1.10/es5-sham.min.js,html5shiv/3.7.2/src/html5shiv.js"></script>
|
2015-07-15 18:17:05 +08:00
|
|
|
|
<!-- 引入 jquery 和 react -->
|
|
|
|
|
|
<script src="https://a.alipayobjects.com/??jquery/jquery/1.11.1/jquery.js,react/0.13.3/react.min.js"></script>
|
2015-07-03 18:06:47 +08:00
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2015-07-06 14:35:08 +08:00
|
|
|
|
<div class="code-line-highlight"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
|
.code-line-highlight {
|
2015-07-20 16:20:01 +08:00
|
|
|
|
box-shadow: 0 -197px 0 rgba(255, 207, 0, 0.16);
|
2015-07-06 14:35:08 +08:00
|
|
|
|
height: 42px;
|
|
|
|
|
|
margin-bottom: -42px;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
2015-07-03 18:06:47 +08:00
|
|
|
|
## 小甜点
|
|
|
|
|
|
|
2015-07-09 14:00:13 +08:00
|
|
|
|
- 你可以享用 `npm` 生态圈里的所有模块。
|
|
|
|
|
|
- 我们使用了 `babel`，试试用 [ES6](http://babeljs.io/blog/2015/06/07/react-on-es6-plus/) 的写法来提升编码的愉悦感。
|
