react全家桶搭建全家桶模板

React架构的全家桶基础模板搭建

前面说了那么多，都是为实战做铺垫虽然是从强类型语言转成弱类型语言的一个菜鸡，但转成弱类型语言的时候，我内心的真实感受是“艾玛，真香” 所以在我学typescript还只是半吊子的时候还是不为了使用ts而使用ts了

架构组成： react react-redux react-router-dom reat-dom antd axios

# 一、 react-redux

React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据 React-Redux 将所有组件分成两个大类 UI组件容器组件

UI 组件

只负责UI的呈现，不带任何业务逻辑
没有状态（即不使用this.state 这个变量）
所有数据都由（this.props）提供
不适用任何 Redux 的API

容器组件

负责管理数据和业务逻辑，不负责UI 的呈现
带有内部状态
使用 Redux的 API

connect 连接组件用于从 UI 组件生成容器组件实例及解释如下

 /**
 * @params1 将state映射到 UI 组件的参数（props）
 * @params2 后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action
 */
 export default connect((state) => state.user, { login, getUserInfo })(
   TodoList
 );

1
2
3
4
5
6
7

组件

connect方法生成容器组件以后，需要让容器组件拿到state对象，才能生成 UI 组件的参数

在Provider在根组件外面包了一层，这样一来，App的所有子组件就默认都可以拿到state了。
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
 import todoApp from './reducers'
 import App from './components/App'

 let store = createStore(todoApp);

 render(
   <Provider store={store}>
     <App />
   </Provider>,
   document.getElementById('root')
 )

1
2
3
4
5
6
7
8
9
10
11
12
13
14

每个子组件又继承了Component 而Component的源码如下

class Provider extends Component {
  getChildContext() {
    return {
      store: this.props.store
    };
  }
  render() {
    return this.props.children;
  }
}

Provider.childContextTypes = {
  store: React.PropTypes.object
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 二、设置webpack配置文件的覆盖文件

使用 create-react-app 生成项目，不会有webpack 的配置项，要导出 webpack ,必须使用 react-scruot ehect 但这是一个单向操作， eject 后无法恢复如果只是修改部分配置，eject 是没有必要的操作步骤如下

使用 react-app-rewired,customize-cra 包替换 react-script
```
npm i react-app-rewired -D
npm i customize-cra -D
```
1
2

然后在package.json中将script的配置项替换成如下

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

1
2
3
4
5
6

在项目根目录创建 config-overrides.js

  # ./config-overrides.js

  const { override, addWebpackAlias } = require('customize-cra')
  const path = require('path')
  const resolve = dir => path.join(__dirname, '.', dir)

  module.exports = override(
    addWebpackAlias({
      ['@']: resolve('src')
    })
  )

1
2
3
4
5
6
7
8
9
10
11

参考地址

# 二、react-router-dom

参考链接：

阮老师 react-redux教程

一个基于React+Antd的后台管理模板

# 十、prop-types 类型检查（效果同 TypeScript）

编辑

上次更新: 2021/10/29, 18:04:14

← react学习到搭建一个全家桶的基础模板