最近在學(xué)習(xí)前端的各大流行框架, 主要學(xué)習(xí)了 Vue.js 和 React.js, 前段時(shí)間用 Vue.js + uikit 實(shí)現(xiàn)了 V2EX 的克隆版本, 最近又用 React.js + redux + bootstrap 實(shí)現(xiàn)了 RubyChina 的克隆版本, 兩個(gè)項(xiàng)目都支持響應(yīng)式布局. 不得不說這是學(xué)習(xí)新知識(shí)的一個(gè)有效途徑. 這兩個(gè)項(xiàng)目都比較合適學(xué)習(xí) Vue.js 和 React.js 的朋友參考.
?Vue.js + V2EX 項(xiàng)目
代碼地址: https://github.com/liuzhenangel/v2ex_frontend
Demo: http://v2ex.liuzhen.me
關(guān)于這個(gè)項(xiàng)目的一些介紹和學(xué)習(xí)資料可以訪問 https://github.com/liuzhenangel/v2ex_frontend 查看.
這篇文章主要介紹 React.js 的相關(guān)知識(shí).
React.js + RubyChina?項(xiàng)目
代碼地址: https://github.com/liuzhenangel/react-ruby-china
Demo: http://ruby-china.liuzhen.me
項(xiàng)目介紹
react-ruby-china 項(xiàng)目是一個(gè)利用 react, react-dom, react-redux, react-router, redux, es6, redux-thunk 實(shí)現(xiàn)的 RubyChina 社區(qū)克隆項(xiàng)目.這是一個(gè)前后端分離項(xiàng)目, 前端主要是 react, redux, es6, css 框架使用了 bootstrap. 后端利用 ruby-china 開放的 api. 支持響應(yīng)式布局. 部分功能仍在持續(xù)完善中.
開發(fā)環(huán)境搭建
可以根據(jù)下方列出的官方文檔里面有詳細(xì)說明, 這里介紹一下 `create-react-app` 這個(gè)命令行腳手架工具. `npm install create-react-app -g` 之后執(zhí)行 `create-react-app my-app`, 然后 `npm start` 就能運(yùn)行了.關(guān)于 `create-react-app` 詳情可以點(diǎn)擊 https://github.com/facebookincubator/create-react-app 查看.
核心技術(shù)框架
* react
* react-dom
* react-router
* redux
* redux-thunk
* react-md-editor
* isomorphic-fetch
* react-paginate
* react-redux
* marked
* es6-promise
* classnames
學(xué)習(xí)參考資料
在學(xué)習(xí) React 過程中, React.js 文檔做的沒有 Vue.js 的好, 文檔中的例子各種不同語法. 對(duì)著照做不一定對(duì), 也不方便查詢, 踩過很多坑后給大家做個(gè)分享.
React 中文文檔(這個(gè)文檔很好查詢, 但是很多內(nèi)容寫的太簡(jiǎn)單了沒講清楚, 而且內(nèi)容不全): https://hulufei.gitbooks.io/react-tutorial/content/index.html
React 官方英文文檔: https://facebook.github.io/react/docs/getting-started.html
React 中文文檔(這個(gè)文檔比較差): http://reactjs.cn/react/docs/getting-started-zh-CN.html
極客學(xué)院提供的 React 中文文檔: http://wiki.jikexueyuan.com/project/react/
另一個(gè) Reac 中文文檔(這個(gè)比較全面, 但是不便于搜索): 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 社區(qū)(這里面有很多資源): http://react-china.org/
ES6 文檔: http://es6.ruanyifeng.com/#docs/intro
Redux 介紹: http://www.alloyteam.com/2015/09/react-redux/
