react基础工程搭建

react项目工程搭建
本文介绍react基础工程文件目录结构，以及说明各个文件目录的作用，并重点介绍router，redux的应用。

1. 首先来看下react基础工程的目录结构
   在这里插入图片描述
   

2. 文件目录的说明
   2.1 apis目录，用于方存放接口文件
   2.2 componens 用于存放自定义组件
   2.3 pages用于存放页面
   2.4 redux用于存放reducers，actions
   2.5 client.js 应用的入口
   2.6 configs 存放route.js

3. router 的介绍
   3.1 首先来看下router的配置，这是通过jsx写的路由配置，基础框架页为base.app,然后，其它页面根据路由渲染到基础框架页面中。
   
   3.2 路由通过以下方式注册到应用中
   
   3.3 路由的切换
   

4. redux的定义
   4.1 redux的reducers可以对比vuex的mutation。在这个对state进行修改
   
   4.2 redux的actions。redux的调度中心dispatch根据action选择执行对应的reducer。当然dispatch(action) 然后运行reducer是最简单的使用方式。有更进阶的用法，可以详细看下createAjaxAction。
   
   4.3 createAjaxAction的定义，这里使用了函数的柯里化，首先定义一个函数接受了3个参数，并返回一个函数，然后这个函数继续返回一个函数其中入参为dispatch这个就是store的调度中心。执行自定义逻辑通过dispatch调用reducer。这部分可以类似vuex的action，执行完自定义逻辑后调用commit。
   
   4.4 看下具体这个login的用法，仔细理解下红色框部分。这部分就是第二个函数要接受的三个参数。返回一个函数给store的调度中心。store的调度中心执行的时候判断是一个函数，则往函数注入dispatch。

4.5 看下redux是如何注入的应用中的，从图中可以看到通过provider中注入。可以去了解下provider的具体作用。这个可以理解为vue的初始化过程中将store作为配置项注入到vue实例中。

4.6 上面介绍了redux如何注册到应用中，接下来看下怎么使用，还是以登录页面为例子
首先通过connect函数，将调度中心dispatch和需要用到的state挂载到props中。然后上面提到过login的用法，可以回头看下。

5. 最后来看下webpack的配置，入口js的配置

本文是通过启发式的介绍，并没有写的很详细，需要看到不懂的地方反复理解。仔细理解后对react的项目还会陌生吗？