【React】React全栈脚手架搭建

最终效果图：

最终效果图

react全栈脚手架的搭建：react / redux / react-router-dom / less / axios / storybook

react-router-dom，可以实现 todoList和苹果篮子的路由切换。

为什么不使用react-router呢？react-router-dom可以理解为react-router的升级版，所以要实现路由功能只需二者选其一即可。在这里选用功能更丰富的react-router-dom

1.1 先安装create-react-app命令行工具：npm install -g create-react-app

1.2 初始化项目：create-react-app reactApp

1.3 less配置

1.3.1 安装 less和less-loader：npm install less less-loader --save-dev

1.3.2 暴露配置文件：npm run eject

1.3.3 修改配置文件 todolist-applebasket/config/webpack.config.dev.js 和 webpack.config.prod.js

修改后变成：（红色部分为修改后多出的内容）

1.4 搭建源代码src的结构

src是源代码存放区，在这个区下面根据自己项目的需求切割对应的功能。一般react项目我是这样的结构

assets：静态资源，如图片、视频等

components:组件

containers:容器级组件，如果项目较小，可以不新建此文件夹

pages：页面级组件

redux：redux相关操作

- actions

- reducers

- services ：存放服务端api（异步请求api）

router：路由

styles：公共样式/通用样式

utils：工具库，可以存放自己封装的通用工具库也可以存放外部引进的工具库

然后，删除src目录下多余的文件只留下index.js和registerServiceWorker.js

最终src结构如下

1.5 引入组件测试工具 storybook：getstorybook

storybook是一个非常有用的组件单元测试工具，编写react项目必不可少，当然你也可以选择不用

命令行运行完成后你会发现你的项目目录下多了一个stories文件夹，具体怎么用接下来会慢慢细讲

1.6. 安装路由react-router-dom：npm install react-router-dom react-loadable--save

react-loadable：用于实现组件的懒加载，与router配合使用

1.7 安装redux：npm install redux redux-thunk react-redux--save

1.8 安装axios：npm install axios --save

基本的脚手架已经搭建完毕

接下来就可以开始写代码了

详见下章