搭建一个React-redux-router + antd项目（二）安装 redux、router、axios和antd

上一篇写了如何初始化一个项目

搭建一个React-redux-router + antd项目（一）初始化项目

接下来对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 里的启动配置。这里是[email protected] 版本的配置方法，你还需要安装 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 (
        

          Button
        
      );
    }
  }

  export default App;

这是页面中就会出现一个按钮

下一篇写路由的使用：

搭建一个React-redux-router + antd项目（三）使用路由
搭建一个React-redux-router + antd项目（四）redux初始
搭建一个React-redux-router + antd项目（五）用action更新store
搭建一个React-redux-router + antd项目（六）用 redux-persist 实现数据持久化