mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
update getting-started
This commit is contained in:
parent
ae7476a3f9
commit
f34854d667
@ -34,44 +34,49 @@ $ npm install antd-init -g
|
|||||||
|
|
||||||
```bash
|
```bash
|
||||||
$ mkdir antd-demo && cd antd-demo
|
$ mkdir antd-demo && cd antd-demo
|
||||||
$ antd-init
|
$ antd-init --type plain-react
|
||||||
$ npm install
|
|
||||||
```
|
```
|
||||||
|
|
||||||
若安装缓慢报错,可尝试用 `cnpm` 或别的镜像源自行安装:`rm -rf node_modules && cnpm install`.
|
antd-init 会自动安装 npm 依赖,若有问题则可自行安装。
|
||||||
|
|
||||||
|
若安装缓慢报错,可尝试用 `cnpm` 或别的镜像源自行安装:`rm -rf node_modules && cnpm install`。
|
||||||
|
|
||||||
### 3. 使用组件
|
### 3. 使用组件
|
||||||
|
|
||||||
编辑 `src/component/App.jsx`,用 React 的方式直接使用 Ant Design React 的组件。
|
脚手架会生成一个 Todo 应用实例(一个很有参考价值的 React 上手示例),先不管它,我们用来测试组件。
|
||||||
|
|
||||||
|
直接用下面的代码替换 `src/entries/index.js` 的内容,用 React 的方式直接使用 antd 组件。
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
import { DatePicker, message } from 'antd';
|
import { DatePicker, message } from 'antd';
|
||||||
|
|
||||||
const App = React.createClass({
|
class App extends React.Component {
|
||||||
getInitialState() {
|
constructor(props) {
|
||||||
return {
|
super(props);
|
||||||
date: ''
|
this.state = {
|
||||||
|
date: '',
|
||||||
};
|
};
|
||||||
},
|
|
||||||
handleChange(value) {
|
|
||||||
message.info('您选择的日期是: ' + value.toString());
|
|
||||||
this.setState({
|
|
||||||
date: value
|
|
||||||
});
|
|
||||||
},
|
|
||||||
render() {
|
|
||||||
return <div style={{width: 400, margin: '100px auto'}}>
|
|
||||||
<DatePicker onChange={this.handleChange} />
|
|
||||||
<div style={{marginTop: 20}}>当前日期:{this.state.date.toString()}</div>
|
|
||||||
</div>;
|
|
||||||
}
|
}
|
||||||
});
|
handleChange(date) {
|
||||||
|
message.info('您选择的日期是: ' + date.toString());
|
||||||
|
this.setState({ date });
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div style={{ width: 400, margin: '100px auto' }}>
|
||||||
|
<DatePicker onChange={value => this.handleChange(value)} />
|
||||||
|
<div style={{ marginTop: 20 }}>当前日期:{this.state.date.toString()}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default App;
|
ReactDOM.render(<App />, document.getElementById('root'));
|
||||||
```
|
```
|
||||||
|
|
||||||
你可以在 [这里](/components/button) 选用更多组件。
|
> 你可以在左侧菜单选用更多组件。
|
||||||
|
|
||||||
### 4. 开发调试
|
### 4. 开发调试
|
||||||
|
|
||||||
@ -95,7 +100,7 @@ $ npm run build
|
|||||||
|
|
||||||
Ant Design React 支持所有的现代浏览器和 IE8+。
|
Ant Design React 支持所有的现代浏览器和 IE8+。
|
||||||
|
|
||||||
对于 IE8,需要提供 [es5-shim](http://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills) 等 Polyfills 的支持。
|
对于 IE8 需要配合使用 [react@0.14.x](https://facebook.github.io/react/blog/2016/01/12/discontinuing-ie8-support.html) 版本,并提供 [es5-shim](http://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills) 等 Polyfills 的支持。
|
||||||
|
|
||||||
<div class="code-line-highlight"></div>
|
<div class="code-line-highlight"></div>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user