React 引入ant-design开发指南

使用create-react-app搭建react开发环

//创建react脚手架
create-react-app react_antd-demo
//进入react_antd-demo
cd react_antd-demo
//运行react_antd-demo
npm start

//引入ant-design
npm install antd

搭建antd的基本开发环境-src/components/App.js

//引包
import React,{Component} from 'react';
import {Button, DatePicker } from 'antd';

//定义组件
class App extends Component{
    constructor(props){
        super(props);
    }

    render(){
        return (
            <div>
                <Button type="primary">Primary</Button>
                <Button>Default</Button>
                <Button type="dashed">Dashed</Button>
                <Button type="danger">Danger</Button>               
            </div>
        )
    }
}
//默认暴露组件
export default App;

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

//渲染组件
ReactDOM.render(<App />, document.getElementById('root'));

下载babel-plugin-import(用于按需加载组件代码和样式的 babel 插件)

npm install babel-plugin-import

修改配置: config/webpack.config.dev.js

npm run eject   //暴露封装

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}