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

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

關於這個項目的一些介紹和學習資料能夠訪問 [這裏](https://github.com/liuzhenangel/v2ex_frontend) 查看 .

這篇文章主要介紹 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` 詳情能夠點擊 [這裏](https://github.com/facebookincubator/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/>