基于webpack + react + react-router + redux + less + flex.css + ES6 的React版cnode社区

#1

react-cnode

基于webpack + react + react-router + redux + less + flex.css + ES6 的React版cnode社区

demo

demo

下载

  git clone https://github.com/1340641314/react-cnode.git
  cd react-cnode
  npm install (安装依赖模块)
  npm install webpack -g (没有安装webpack的需要安装)

运行

  npm run dev (开发版本访问:http://localhost:3000/)
  npm run dist (发布生产版本)

功能

  1.登录退出
  2.列表分页,查看帖子
  3.发帖,回复帖子
  4.我的消息
  5.个人中心
  6.查看别人的资料

总结

  1.UI是自己设计的,虽然我并不会PS这些工具。
  2.使用了flex.css模块布局,最大的感觉就是在写css不需要考虑在css中如何写布局,大大的提高了我的效率。
  3.在移动端中,列表数据达到上百条之后,性能仍然是不容乐乎,有待于进一步的优化。
  4.ES6中的箭头函数和变量解构赋值,最大的感受在开发效率上。提高很多。
  5.使用高阶组件封装获取数据的流程,让页面组件专注于页面渲染,避免了每个页面都需要写一次获取数据的流程,提高开发效率
  6.redux听起来很美好,在实际操作的过程中,大大的复杂了创建一个页面的难度,最后只能将其封装起来,简化这个过程(其实我对redux不怎么理解)
  7.为了还原页面状态,比如后退时的滚动条位置,还是花费了不少功夫
  8.开发移动到应用,还是使用字体图标爽。
  9.借助webpack可以生成离线缓存清单,px转rem,ES6编译成ES5,模块化开发,代码压缩混淆......
  10.前端自动化,工程化,给前端的发展起到了很大的推动作用

状态树

小广告

  深圳html5开发者社群:170761660
  NodeJS前端分享群:133240225

截图

16 Likes
分享一个 react + redux 完整的项目,同时写一下个人感悟
基于webpack + react + react-router + redux + less +antd + ES6 的cnode社区
前端新手的第一个React+ReactRouter项目(CNode社区)
#2

:+1: 可以看着你的栗子学习了

#3

会折腾啊。。。我看到那么多API我都不想做了。。。

#4

花了大概两周的时间,业余有时间就折腾一下

#5

互相学习吧

#6

我看到你在我帖子下面的留言了。我的那一版只是实现了预览。你的这一版更值得学习~~~

#7

他的可以登录可以回复 :+1: 好多值得学习的啊

#8

有些地方还是值得优化的

#9

感觉回复那里没写好,传递了三层

#10

我感觉我当时有点笨,将所有的路由请求都在本地处理。应该可以尝试直接请求到CNode的API的。

#11

做一下代理就好了

#12

非api路由,都返回index.html

#13

我开始是爬页面,后来是API,不过还是经过了本地的服务器

#14

下一步的学习方向还没有想好,是选择vue,还是RN或者nodejs后台开发

#15

可以试一下Vue.js。

#16

嗯.有时间再写

#17

感觉数据流有点混乱,然后redux没有发挥出来它的强大。

#18

所有的数据操作都放到setState这个Action里面去了,主要是为了针对每一个url地址进行数据存储。其实我对redux目前也不是特别理解

#19

这是别人给我的截图。
程序会给先判断当前url在redux中是否有数据,如果没有的话,则会copy默认的,有的话,直接取上次的数据先渲染页面,然后再去服务器拉取数据,更新状态。

#20

已经更新,增加在线访问demo