react 项目完整搭建

一. create-react-app

npx create-react-app react-demo —typescript
  默认情况下，生成的项目支持所有现代浏览器。对Internet Explorer 9、10和11的支持需要polyfill。
通过npm run eject   ， 暴露webpack配置
学习网站：https://create-react-app.dev/docs/getting-started

二、安装其他库

1、路由

react-router：提供了一些router的核心api，包括Router, Route, Switch等，但是它没有提供dom操作进行跳转的api。
react-router-dom：提供了HashRouter、BrowserRouter, Route, Link等api ,我们可以通过dom的事件控制路由

2、HTTP

axios：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
proxy：参照create-react-app官网推荐库——http-proxy-middleware

3、UI

Ant-design：服务于企业级产品的设计体系
sass: npm install node-sass --save(因为新版本已经集成了 sass 的处理了，因此，就不需要额外的配置有关 sass 的内容了。但是，如果需要在项目中使用 sass 的话，还是需要安装依赖包的。)

4、状态管理

redux：数据处理中心
react-redux：连接组件和数据中心，也就是把React和Redux联系起来
redux-thunk、redux-saga：用来做异步操作

三、目录结构

├── README.md
├── config // 脚手架自带的，webpack等相关配置
│ ├── env.js
│ ├── jest
│ ├── modules.js
│ ├── paths.js
│ ├── pnpTs.js
│ ├── webpack.config.js
│ └── webpackDevServer.config.js
├── package-lock.json
├── package.json
├── public // 静态目录文件
│ ├── favicon.ico
│ ├── index.html // 默认是单页面应用
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── scripts // 脚手架自带的,启动命令需要执行的文件
│ ├── build.js
│ ├── start.js
│ └── test.js
├── src // 项目源目录
│ ├── App.test.tsx
│ ├── assets
│ │ ├── iconfont
│ │ └── style
│ │ ├── Home.scss
│ │ └── index.scss
│ ├── components // 组件
│ │ ├── Home.tsx
│ │ ├── Page1.tsx
│ │ └── Page2.tsx
│ ├── containers // 容器组件
│ │ └── Home.tsx
│ ├── http // http服务
│ │ ├── api.ts
│ │ ├── index.ts
│ │ ├── path.ts
│ │ └── resfulUrl.ts
│ ├── index.tsx // 入口
│ ├── logo.svg
│ ├── react-app-env.d.ts
│ ├── routes // 路由
│ │ └── index.tsx
│ ├── serviceWorker.ts
│ ├── store // 状态管理
│ │ ├── action-type.ts
│ │ ├── action.ts
│ │ ├── index.ts
│ │ └── reducer.ts
│ └── types // 类型定义
│ └── index.ts
├── tree.md
└── tsconfig.json