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


一直學 REACT + METEOR 但路由部分有點問題,參考一下:基於 React.js + Redux + Bootstrap 的 Ruby China 示例

http://react-china.org/t/react-js-redux-bootstrap-ruby-china/8752

示例的演示地址:http://ruby-china.liuzhen.me/   很好!!!

React.js + RubyChina 項目

代碼地址: https://github.com/liuzhenangel/react-ruby-china9

示例的演示地址 Demo: http://ruby-china.liuzhen.me18

項目介紹

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 詳情可以點擊 這里1 查看.

核心技術框架
  • 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.html3

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

React 中文文檔(這個文檔比較差): http://reactjs.cn/react/docs/getting-started-zh-CN.html1

極客學院提供的 React 中文文檔: http://wiki.jikexueyuan.com/project/react/3

另一個 Reac 中文文檔(這個比較全面, 但是不便於搜索): http://www.phperz.com/article/15/0712/140537.html2

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

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

ReacChina 社區(這里面有很多資源): http://react-china.org/2

ES6 文檔: http://es6.ruanyifeng.com/#docs/intro1

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM