React全家桶写一个CNode社区，奉上心得与源码

webpack2+react+react-router+react-redux+ES6+antd-mobile版本的Cnode

苦于我就任的公司的技术栈仍是ES5+jQ+handelbars，
而我一直对React全家桶很是感兴趣，因此想本身来个强行实战，
见到react中国社区有几个CNode社区的react版本，
因而本身也计划了用CNode提供的API，从零开始作一个开源项目。
这个项目是我刚开始是写在github上的，用了一周左右从零学react，
而后清明节放假，哪也没去，作了这个非全功能版的CNode社区。

从开始熟悉react到完成这个做品，一共用了不到2周时间，
前提是我有必定的技术沉淀，因此新手也不要以为2周很快。
也许对一些大牛来讲，这已经比较慢了。

先上个做品地址，来扫码：

以为还不错的话， 点这里给我一颗Star~
静态服务器是node搭的，PM2开启守护，不用再担忧挂掉了。

2017.5.4完成react-router版本4的升级，以及使用browserHistrory的线上部署。

• 本地开发调试请在config里切回hash路由，否则刷新会有问题，线上部署browserHistory须要服务器配合，我也把配合逻辑的node代码上传，文件名server.js。
• 微信分享问题由jssdk解决，不在本例范围内。
• 微信内须要用域名，我没弄域名，因此线上仍是改回使用hash路由以便观看。

2017.4.27给本身立两个flag，不按期会更新：

• 改造hashHistory为browserHistory，包括服务端都本身来配置(宗旨是解决微信分享会截断#哈希地址的问题)。
• 把react-router升级到4版本。

2017.4.6更新思惟导图。

首页加载仍是有一些能够优化的地儿耐心等一下子吧~！

使用的技术栈：

webpack：更新到2版本，网上目前大多数webpack-react教程都是1版本的配置写法。
react：谁用谁知道。
react-router：激进的我一边查阅4版本的英文文档一边作demo，发现改动太大，国内连issue几乎都没有，因此我鸟悄的退回到3版本使用(后期会更新到4版本)。
react-redux：挑战所在，至关于在新的开发模式上再叠加新的东西。
ES6：之前本身学JAVA的时候就喜欢Class的写法，此次每写一个组件都爽咩哈哈。
antd-mobile：UI样式，阿里提供的antd的移动端实现，完美契合react，好用，好看。

几点心得：

• 对经常使用jQuery/Zepto这类类库开发的开发者来讲，react开发体验要好太多，webpack的强大功能使开发专一于代码，不用再考虑babel转好了ES6还要肯定目录、sass还要用考拉或者filewatcher来处理、代码复用到底写在哪里才好...等问题。

• 众多的贡献者，超高的社区活跃度，数不清的插件(此次项目中使用了许多，实在是太好用)，react+webpack+ES6的技术栈能够给开发者长期浸淫的信心。

• redux架构给个人体验还不错，多亏阮一峰老师的简明教程，这个教程是三部的，都须要认真看。这些教程让我能够快速掌握一些核心的使用方式以及提前要避免的坑，对应redux，个人项目结构是通过一番考究才定下来的。

• 虽然react-redux建议UI不要带有任何本身的state，但实际业务中，灵活的使用UI自己的state是很是有利于开发的，不要为了使用redux而使用redux。另外，开发人员不是特多的话，reducer写在一个js里也不错，出了逻辑问题直接定位到这。action的type命名遵循必定规律，会给后期开发带来想不到的福利，好比此次的异步action‘fetch’，开发后期发现异步带来的问题有不少，须要一个全局控制，这时reducer配合正则表达式+遵循了必定规律的命名，很简单就实现了想要的。

• 虽然能够很快就实现初级的项目，开发过程当中，彻底不考虑操做DOM的体验虽然好，但也带来了许多可能的没必要要的重复渲染，react配合redux很是须要注意性能，reducer处理很差，常常会重复渲染，理解react的运做方式很重要，零活运用shouldComponentUpdate来使你的页面性能达到最好，自己这就是一个挑战，再加上redux的参与...通过一番努力，我才使全部的页面都禁止了没必要要的渲染，这个优化我体如今了控制台里，你能够查看每页的渲染状况。

• 实现回到长列表的上次滚动位置，着实耗费了我很多时间(我常常在react技术群里看到好多人提这个问题)，想了许多种实现方式，最终经过ListView的initialListSize属性配合缓存，实现了几乎媲美原生的回退到上次列表位置的效果。还有antd的ListView重复触发又没有详细明确的解答的onEndReached事件问题，最终经过对异步的控制以及在render中作了一些很是规处理才解决。

• 长列表的滚动延续动画没法控制，致使模仿iOS回到顶部的功能老是有缺陷，我有不少想法，好比：屏蔽掉原生事件，Touch.js之类的组件模拟。也能够单独弄个回到顶部的按钮出来，那样点击一次就会让滚动停下，第二次就能够回到顶部了(可是那样长得就不像原生的了)。 网上有不少长列表优化的文章，这个也是做为H5发开着须要着重研究的一个点，须要更深刻的研究。也许在RN里能有更好的表现？因此，呃，研究RN势在必行。

• 重要的首屏加载问题，在Gzip的淫威下，1.6M的bundle压缩后只有300多k，而后，webpack+react-router还能实现按需加载，在硬件不断进步的今天，愈来愈不是问题了，这已是现实了，就像两年前咱们还在担忧有的老板想兼容IE6，现在淘宝都只支持IE9+了，个人梦想是，没有IE，哈哈哈哈。Gzip我是用webpack-dev-server开的，包括proxy也是用它开的，在开发角度来讲，比ngnix还方便。之前用ngnix处理开发中的跨域，还要另外去动手(懒得不要不要的)。

• 虽然英文水平能够勉强看英文文档，但没法像看中文文档那样自如浏览，必定程度上影响跟随国外优秀新版本技术的脚步，下一步也要强迫本身多贴近英文。

• 由于接触的越多，以为须要学习的越多，心里也是五味杂陈的，我还没女友呢。。。

做品实现的功能：

1、首页：上拉无限加载(目前没作下拉刷新)，文章分类显示，点击条目进入文章详情，实现回退/Tab切换后，回到记录的滚动位置。
2、文章详情页：显示文章详情和评论，登陆状况下能够收藏/取消收藏，提供回退功能。(评论点赞和回复功能暂时没有实现)
3、收藏页：显示已经收藏的文章，点击条目进入文章详情。
4、消息页：(目前没作跟消息有关的功能)。
5、个人：只提供了显示头像和退出功能。
6、登陆：实现了登陆功能，没有登陆的状况下，进入无权限的页面会跳转到登陆页面。
*、其余：首页长列表Iphone体验良好(回到顶部是缺陷)，没有考虑android的状况，好比按需进行body滚动等等。
*、后期规划：不按期完善剩余功能，也有可能转战RN，下一步打算作一个思惟导图，梳理一下架构思路(已完成)。
*、已知问题1：模仿iOS回到顶部功能没实现，也没作按钮式的回到顶部；
*、已知问题2：移动4G状况下，CNode的API好像被墙了，有时致使数据加载不出来。
*、已知问题3：频繁的联网/断网后，可能会出现Bug，毕竟不是线上产品，暂时不处理。复制代码

更多效果图片请到这里来看，掘金的图片排版我还没搞懂...

在此开放源码，提供给有兴趣一块儿研究的coder们，主要部分我都进行了注释。
快速实现本地dev模式运行个人源码，三步走起：

1、选择合适的空文件夹，打开你的git bash输入 git clone git@github.com:TerryBeanX2/Webpack-React-Router-Redux-ES6.git 克隆个人仓库；
  2、命令行 npm install ；
  3、命令行 npm run dev ，浏览器访问 localhost:8888 ，F12进入移动开发模式查看 ；
  *、若是出现问题，尝试cnpm淘宝镜像安装。复制代码

2017.4.6更新实际项目思惟导图

其实就是React+React-Router+React-Redux的架构流程图实例版

首先，咱们来讲为何要用Redux

下面上本项目思惟导图

但愿获得你的STAR

此次很用心的作了一个做品，但愿获得同仁们的确定，
我会尽可能继续更新，快来点Star吧~