react 脚手架-项目搭建 (webpack)

1. create-react-app hello-react 创建 react 文件夹

2. 删除多余目录文件,并规划目录结构

3. 新建/public/index.html /src/App.jsx /src/index.js 作为入口文件

4. (vite 不需要)安装 @craco/craco 用于配置别名,还需要修改 package.json,安装之后 jsx 的后缀名可用不用写,并且还需要配置对应的配置文件

`yarn add @craco/craco`

5. 修改 package.json 增加 "homepage": "." 用于部署时可用放到任意文件夹

6. 安装路由并配置路由

- react-router-dom@5.3.0 / 或者是 react-router-dom 6 的版本
- react-router-config 让 react
- 使用 renderRoutes(routes) 进行路由的自动渲染

`yarn add react-router-dom`

7. 安装 axios 并封装

`yarn add axios`

8. 安装 normalize.css 用于重置 css 在 index.js 中引入

9. 安装 styled-components 用于构建样式

`yarn add styled-components`

10. (最新版 redux 有修改，使用@reduxjs/toolkit 进行配置)安装 redux 及 react-redux 进行状态管理,redux-thunk 用于异步 redux

`yarn add redux react-redux redux-thunk`

使用@reduxjs/toolkit 进行配置

`yarn add redux @reduxjs/toolkit`

```javascript
import thunk from 'redux-thunk'
import { allReducers } from './reducer'
import { configureStore, applyMiddleware } from '@reduxjs/toolkit'
import { composeWithDevTools } from 'redux-devtools-extension'

const middleware = [thunk]

const store = configureStore({
  reducer: allReducers,
  middleware,
  devTools:
    process.env.NODE_ENV === 'development'
      ? composeWithDevTools(applyMiddleware(thunk))
      : applyMiddleware(thunk)
})

export default store
```

11. 安装 Immutable 操作 redux 中的数据(reducer)，优化性能

​ `yarn add immutable`

12. 安装 pubsub 用于兄弟组件之间的通信

`yarn add pubsub`

13. 安装 redux-immutable 用于合并 reducer

`yarn add redux-immutable`

14. 安装 redux-devtools-extension 用于浏览器种调试

​`yarn add redux-devtools-extension `

15. 安装 http-proxy-middleware 用于配置跨越，之后在 src 文件夹下创建文件setupProxy

```js
const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function (app) {
  app.use(
    // 遇见/api1 的前缀，就会触发该代理配置
    createProxyMiddleware('/api', {
      target: 'https://dev-appapi.eyesnews.cn', // 请求转发给谁
      changeOrigin: true, // 控制服务器收到的请求头中Host字段的值
      pathRewrite: { '^/api': '' } // 重新请求路径
    })
  )
}
```