React脚手架环境搭建详情

在文件夹目录中打开终端下载

cnpm install create-react-app -g         全局安装

create-react-app myapp         创建项目    

cd myapp                               进入项目

npm start                                              启动项目 

npm run eject                                      暴露

Create React App脚手架官网：https://create-react-app.dev/

注：全局安装失败可尝试管理员身份打开终端进行安装

暴露失败在项目的根目录下执行以下命令：

git init

git add --all

git commit -m 'first'

npm run eject

整合目录

在src中删除index.js和App.js以外的其他文件

创建基本文件夹：例如---assets

在assets创建css并修改全局样式路径

在scripts文件夹中start.js文件中可改端口

改src文件夹中index.js为main.js需要在config文件夹中paths.js文件第58行修改路径后

改打包paths.js文件第55行修改为dist

改配置@在config文件夹中webpack.config.js文件中第291行的alias中添加一条  '@':path.resolve(__dirname,'../src')

修改之后重启项目 npm start

用sass后缀报错

cnmp install node-sass -D        安装node-sass     

antd

cnpm install antd -S

在App.js文件中引入antd样式  import 'antd/dist/antd.css'

antd文档：https://ant-design.gitee.io/index-cn

路由

cnpm install react-router-dom -S    

cnpm install @loadable/component -S    代码分割 

使用代码分割引入import loadable from "@loadable/component"

路由文档：https://reactrouter.com/web/guides/quick-start 

mobx

cnpm install mobx -S    

cnpm install mobx-react -S    

mobxGitHup仓库：https://www.npmjs.com/package/mobx

mobx-reactGitHup仓库：https://www.npmjs.com/package/mobx-react

Redux状态管理工具（可预测的状态容器）

cnpm install  redux -S

cnpm install  react-redux -S     

cnpm install  redux-thunk -S     

redux中文文档：http://cn.redux.js.org/  

redux官方文档：https://react-redux.js.org/ 

Moment

cnpm install moment -S

中文文档：http://momentjs.cn/

md5加密

cnpm install md5 -S

md5仓库：https://www.npmjs.com/package/md5

socket.io长连接

服务端

cnpm install express -S    

cnpm install  socket.io  -S

客户端

cnpm install socket.io-client -S

socket.io官网: https://socket.io/