react 项目完整搭建

扶醉桌前 提交于 2019-12-04 05:35:57

一. 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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!