上一篇写了如何初始化一个项目
接下来对my-app 进行扩展
安装redux、react-redux、thunk
yarn add redux -S // 或 npm i redux -S 后面的命令同理
yarn add react-redux -S
yarn add redux-thunk -S
安装router、axios、antd
yarn add react-router-dom -S
yarn add axios -S
yarn add antd -S
antd安装好以后，建议对 create-react-app 的默认配置进行自定义，目的是为了实现antd组件的按需加载。引入 react-app-rewired 并修改 package.json 里的启动配置。这里是react-app-rewired@2.x 版本的配置方法，你还需要安装 customize-cra。如遇到其他版本请移步antd官方文档
yarn add react-app-rewired customize-cra
修改package.json配置文件
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
}
接下来安装 babel-plugin-import
这是是一个用于按需加载组件代码和样式的 babel 插件（原理）
yarn add babel-plugin-import
在项目根目录创建一个 config-overrides.js文件
+ const { override, fixBabelImports } = require('customize-cra');
+ module.exports = override(
+ fixBabelImports('import', {
+ libraryName: 'antd',
+ libraryDirectory: 'es',
+ style: 'css',
+ }),
+ );
修改 src/App.css，在文件顶部引入 antd/dist/antd.css。
@import '~antd/dist/antd.css';
...
然后在 src/App.js 里按下面的格式引入模块。
/* src/App.js */
import React, { Component } from 'react';
+ import { Button } from 'antd';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
}
}
export default App;
这是页面中就会出现一个按钮
下一篇写路由的使用：
搭建一个React-redux-router + antd项目（三）使用路由
搭建一个React-redux-router + antd项目（四）redux初始
搭建一个React-redux-router + antd项目（五）用action更新store
搭建一个React-redux-router + antd项目（六）用 redux-persist 实现数据持久化
