ReactJS 基于 React.js + Redux + Bootstrap 的 Ruby China 示例

rina · 发布于 2016年10月11日 · 最后由 hlxwell 回复于 2016年10月24日 · 5632 次阅读
17863
本帖已被设为精华帖!

最近在学习前端的各大流行框架, 主要学习了 Vue.js 和 React.js, 前段时间用 Vue.js + uikit 实现了 V2EX 的克隆版本, 最近又用 React.js + redux + bootstrap 实现了 RubyChina 的克隆版本, 两个项目都支持响应式布局. 不得不说这是学习新知识的一个有效途径. 这两个项目都比较合适学习 Vue.js 和 React.js 的朋友参考.

Vue.js + V2EX 项目

代码地址: https://github.com/liuzhenangel/v2ex_frontend

Demo: http://v2ex.liuzhen.me

关于这个项目的一些介绍和学习资料可以访问 这里 查看 .

这篇文章主要介绍 React.js 的相关知识.

React.js + RubyChina 项目

代码地址: https://github.com/liuzhenangel/react-ruby-china

Demo: http://ruby-china.liuzhen.me

项目介绍

react-ruby-china 项目是一个利用 react, react-dom, react-redux, react-router, redux, es6, redux-thunk 实现的 RubyChina 社区克隆项目.

这是一个前后端分离项目, 前端主要是 react, redux, es6, css 框架使用了 bootstrap. 后端利用 ruby-china 开放的 api. 支持响应式布局. 部分功能仍在持续完善中.

开发环境搭建

可以根据下方列出的官方文档里面有详细说明, 这里介绍一下 create-react-app 这个命令行脚手架工具. npm install create-react-app -g 之后执行 create-react-app my-app, 然后 npm start 就能运行了. 关于 create-react-app 详情可以点击 这里 查看.

核心技术框架
  • react
  • react-dom
  • react-router
  • redux
  • redux-thunk
  • react-md-editor
  • isomorphic-fetch
  • react-paginate
  • react-redux
  • marked
  • es6-promise
  • classnames

学习参考资料

在学习 React 过程中, React.js 文档做的没有 Vue.js 的好, 文档中的例子各种不同语法. 对着照做不一定对, 也不方便查询, 踩过很多坑后给大家做个分享.

React 中文文档(这个文档很好查询, 但是很多内容写的太简单了没讲清楚, 而且内容不全): https://hulufei.gitbooks.io/react-tutorial/content/index.html

React 官方英文文档: https://facebook.github.io/react/docs/getting-started.html

React 中文文档(这个文档比较差): http://reactjs.cn/react/docs/getting-started-zh-CN.html

极客学院提供的 React 中文文档: http://wiki.jikexueyuan.com/project/react/

另一个 Reac 中文文档(这个比较全面, 但是不便于搜索): http://www.phperz.com/article/15/0712/140537.html

React Router 中文文档: https://react-guide.github.io/react-router-cn/

RubyChina API: https://ruby-china.org/api

ReacChina 社区(这里面有很多资源): http://react-china.org/

ES6 文档: http://es6.ruanyifeng.com/#docs/intro

Redux 介绍: http://www.alloyteam.com/2015/09/react-redux/

共收到 21 条回复
De6df3 huacnlee 将本帖设为了精华贴 10月11日 22:50
De6df3

渲染真快!

15999

厉害。可以配合node做个中间层完成服务端渲染,seo也解决了

13229

vue和react,楼主更喜欢哪一个,哈哈

17863

#6楼 @citysheep 我自己比较喜欢用vue, 关于两者之间的比较 https://www.zhihu.com/question/39943474?from=timeline&isappinstalled=0 这里介绍的很好.

13229

#7楼 @rina👍 个人觉得两个的适用场景是有点不一样,vue更加小而美可以快速上手,react相对学习成本高+需要配置一堆全家桶(当然vue也慢慢有了自己的全家桶、virtual dom),但架构非常清晰。

17580

v5霸气,👍 ,相当于vue, react, angularjs, 你都通杀了啊

24730

这些后台数据都是怎么拿到的,求指点,不过博主真心厉害!👍

15027

楼主挺厉害的

24730

#11楼 @rina 用的是vue2.0吗?

17863

#13楼 @aldrich 是vue1.0, 2.0是写完后发布的.

3790

@rina ,感觉更多地是把 Ruby China 的网站切分到了不同的 Component 而已,实际上远没这么简单吧。

17863

#15楼 @qinfanpeng Component 只是UI组件, Action 是管理了所有的 action 操作, Reducer 里是状态的更新结果.

这个项目结合了 redux + react-redux + redux-thunk + isomorphic-fetch, 并没有看起来那么简单, react 核心功能都有用到.

24405

求楼主项目时间,我最近也想弄一个类似的学习.

17863

#17楼 @pinewong 项目时间?, 学这个花了多久吗?

24405

#19楼 @rina 恩恩,从开始学习文档,到完成这个Demo.

6764

有同学跟我一样, 更喜欢非前后端分离的 Rails + React 么

239

跟我一样,爱折腾的童鞋 ~~~~

23楼 已删除
4375 saiga 跟风安利,用 Mithril.js 实现的 Homeland Demo 中提及了此贴 2月20日 19:04
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册