一. 使用create-react-app搭建项目目录
首先确保安装了nodejs,再安装脚手架工具create-react-app.
使用npm运行指令create-react-app project:
运行完成后项目目录如下:
二. 项目中Redux的使用
1.入口文件创建store
也可以注册中间件方便redux调测,下面为固定写法:
2.创建自己的组件结构
3.创建action
4.创建reducers
5.使用Redux:就是两方面(派发数据更改和使用数据更改)
派发数据更改即当store中的某个数据需要更新时,我们需要dispaych(action)将最新数据更新到顶层数据store中。
使用数据更改即使用store中的数据。
如此,Redux真的很简单。
三.说一说如何使用mockJson配置假数据
1.使用Servr.js替换project\node_modules\webpack-dev-server\lib中的Servr.js 2.新建与node_modules文件夹同级的config文件夹,在config中放置配置文件api.js:
3.新建与node_modules文件夹同级的mockJson文件夹,里面放置对应的假数据json文件
四.打包
最后npm 运行 npm run build对css,js,html文件进行打包,执行完成后,会自动生成一个build文件夹,里面放置的是打包后的css,html文件。
备注:本文只是具体讲解使用create-react-app构建react+redux项目以及redux的使用,而以上所贴的截图代码并不完整,只是展示关键信息,请谅解。