一. create-react-app
npx create-react-app react-demo —typescript 默认情况下,生成的项目支持所有现代浏览器。对Internet Explorer 9、10和11的支持需要polyfill。 通过npm run eject , 暴露webpack配置
二、安装其他库
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