$ npm i create-react-app <项目名>
$ yarn i create react-app <react-demo>
// react脚手架
$ npm i react-router // 路由核心模块
$ npm i react-router-dom // router的dom操作那一部分
$ npm i react-router-config // 实现编程式导航
// react路由
redux:
$ npm i redux react-redux // 这是一个类似于Vuex的状态管理工具,数据传递
# 或
$ yarn add redux react-redux
使用简单的redux存储,只能通过调度来进行同步更新store。我们可以使用redux-thunk实现异步更新,是基于redux副作用逻辑的中间件
$ npm i redux-thunk // 中间件
$ npm install redux-logger //使我们可以子啊控制台看到数据的变化
扩展包:
npm install --save-dev redux-devtools
craco:
$ npm install --save craco
// !这是一个用于配置webpack的API
$ npm i craco-less
使用要点:
首先,按照craco安装说明安装craco包,创建一个craco.config.js文件,并修改你的package.json中的脚本。
// craco.config.js 配置如下
acoLessPlugin = require("craco-less");
module.exports = {
plugins: [{ plugin: CracoLessPlugin }],
};
qs、axios:
$ npm i qs
// 一个字符串解析和查询字符串的包
$ npm i axios // 这里面封装的xhr,ajax网络请求
crypto-js
$ npm i crypto-js
// 这是一个用来加密的包,也是基于node.js
$ const hash = CryptoJs.MD5(password).toString()
react-loadable
$ yarn add react-loadable
$ npm i react-loadable
// 这是一个高阶组件,实现路由懒加载
react-persist
$ npm i redux-persist
// 实现数据持久化
socket.io-client
$ npm i socket.io-client
// 一个用来实现浏览器和服务器的即时通讯的库
xlsx
$ npm i xlsx
实现excle文件的导入导出功能
prop-types
$ npm i prop-types
静态类型检测器
echarts
$ npm i echarts
// 数据可视化
wangeditor
富文本
moment
日期处理类库,用于解析、检验、操作以及显示日期等
lodash
为了提高开发者效率、提高js原生方法性能的JS库
代码质量管理工具
还是Eslint