工作比较忙，一直没有时间总结下最近学习的一些东西，为了方便前端开发，我使用React+Redux+Router+antDesign总结了一个通用的模板，这个技术栈在前端开发者中是非常常见的。
总的来说，我这个工程十分便捷，对于初学者来说，可能包含到以下的一些知识点：
一、React-Router的使用
Router是为了方便管理组件的路径，它使用比较简单，一般定义如下就行，需要注意的是，react-router的版本有1.0-3.0，各个版本对应的API大致相似，但也有不同，我使用的是2.X的，API文档如下：
二、Redux和React-Redux的使用
我最初学的时候，看了网上很多Redux教程，简直是乱七八糟。为什么？Redux的版本发展史真的比较长。加上后来出来的React-Redux，所以各种各样的教程都有。
我这里使用的是Redux 3.5和React-Redux 4.4。这个就不放API文档了，我觉得我的demo里面写的非常清晰了。
下面以最简单的&人话&来说明下Redux的核心工作原理。
使用Redux的原因很简单，为了统一管理state。比如我的demo里的app夜间模式，可能这个参数多个component中都需要用到，所以类似这种我们必须弄成全局的。
而众所周知，React是一个通过state来render界面的框架，这就遇到一个问题，比如我要设置夜间模式，我修改普通的全局参数，并不能在修改后触发重新render，所以我们需要引入一个全局state。而Redux就是这样一个可以管理全局state的框架。
它的组成分为：
（1）store：存储全局state的对象
（2）action: 计算新state的函数（如点击开启夜间模式，darkMode参数变为true），并交给reducer
（3）reducer：根据action拿来的新参数，生成新的全局state
你肯定会说，真他妈简单。简单那就对了。网上乱七八糟的东西太多，希望我这几句话就让你明白其中的道理。
那具体如何使用Redux？
看demo就知道了，这里需要注意几点：
（1）在某个component内使用connet函数获取全局state和action中的部分，各取所需
（2）使用redux-thunk，可以进行action的同步/异步操作，因为我demo中默认使用thunk，反正异步是经常会出现的，比如我们更新用户信息，可能请求服务器需要几秒后新的用户信息才会返回，所以这个action的dispatch需要几秒后异步去触发，而默认是不支持的。
（3）存储并在app启动时初始化，我的demo中的设置夜间模式，关闭网页重新打开依旧会维持，就是我在action触发的时候做了缓存，初始化store的时候，又先从缓存取再根据这些内容，初始化store的结果。
三、antDesign的使用
demo中演示了antDesign和antDesign-mobile的两种加载（需要修改.babel）。antDesign是一款自定义component库，类似的还有amazeui,materialUI等等。antDesign-mobile就不说了，懒得评价了，那高清模式的兼容性，就像读书的时候交课堂作业一样。蚂蚁金服作为大厂，我觉得这样唐突的去发布这么一个东西实在是不合适。
antDesign相对来说成熟一点，在使用上可能需要配置一些babel等东西，这些东西，配熟练了，也就懂了。
四、webpack-dev-server和webpack的配置
webpack配置，总的来说有几块：
（1）webpack-dev-server是我推荐的一个热更新的调试组件，可以根据配置好的webpack来直接hot reload，不需要额外配其他参数。
（2）css-loadder：cssloader主要为了支持一些自定义的css写法：比如postcss,less等，demo中使用postcss去书写css，相对来说这种树形结构的css是我比较喜欢的。
（3）babel：babel是为了支持不同版本的JS语言，转换成浏览器能运行的JS。因为前端JS的版本太过零零碎碎，有时候为了支持一个小的功能，就给babel加一个小插件，以至于babel有各种乱七八糟的插件。但这种碎片化，也是JS这们开源语言能够热门、发展起来的原因。
demo地址：
阅读(...) 评论()112被浏览12158分享邀请回答43 条评论分享收藏感谢收起23 条评论分享收藏感谢收起查看更多回答1908被浏览187711分享邀请回答9添加评论分享收藏感谢收起397被浏览20144分享邀请回答6218 条评论分享收藏感谢收起36 条评论分享收藏感谢收起查看更多回答}