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

rina · October 11, 2016 · Last by xiaoyan2015 replied at July 22, 2019 · 15243 hits
Topic has been selected as the excellent topic by the admin.

最近在学习前端的各大流行框架,主要学习了 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/

huacnlee mark as excellent topic. 11 Oct 22:50

渲染真快!

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

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

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

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

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

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

楼主挺厉害的

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

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

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

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

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

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

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

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

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

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

23 Floor has deleted
saiga in 跟风安利,用 Mithril.js 实现的 Homeland Demo mention this topic. 20 Feb 19:04

渲染这么快怎么做到的

You need to Sign in before reply, if you don't have an account, please Sign up first.