基於 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

關於這個專案的一些介紹和學習資料可以訪問 這裡 檢視 .

這篇文章主要介紹 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/