Ruby China example based on React.js + Redux + Bootstrap

Recently in the study of the front-end of the major popular framework, the main study of Vue.js and react.js, the previous time with Vue.js + Uikit to achieve the clone version of v2ex, and recently with React.js + redux + bootstrap to achieve Rubych The clone version of ina, two projects all support responsive layouts. I have to say that this is an effective way to learn new Knowledge. These two projects are more appropriate to learn vue.js and react.js friends reference.

Vue.js + V2ex Project

Code Address: https://github.com/liuzhenangel/v2ex_frontend

Demo:http://v2ex.liuzhen.me

Some introductory and learning materials on this project can be accessed Https://github.com/liuzhenangel/v2ex_frontend view.

This article mainly introduces the relevant knowledge of react.js.

React.js + Rubychina Project

Code Address: Https://github.com/liuzhenangel/react-ruby-china

Demo:http://ruby-china.liuzhen.me

Project Introduction

The React-ruby-china project is a react-router community cloning project using react, react-dom, react-redux, redux, es6, redux-thunk, Rubychina.

This is a front-end separation project, the front-end is mainly react, redux, es6, CSS Framework used BOOTSTRAP. The backend leverages the Ruby-china open Api. Supports Responsive layouts. Some of the features are still being perfected.

Development environment Construction

It can be explained in detail in the official documents listed below, and create-react-app This command-line scaffolding tool is described Here. npm install create-react-app -g create-react-app my-app then execute and then npm start Run. for create-react-app more information, click Https://github.com/facebo Okincubator/create-react-app VIEW.

Core Technical Framework

• React
• React-dom
• React-router
• Redux
• Redux-thunk
• React-md-editor
• Isomorphic-fetch
• React-paginate
• React-redux
• Marked
• Es6-promise
• Classnames

Learning Resources

In the course of learning React, react.js documents do not vue.js good, the examples in the document are different syntax. Do not do not necessarily right, also inconvenient query, stepped on a lot of pits to do a share.

React Chinese document (this document is very good query, but a lot of content is too simple to say clearly, and the content is not complete): https://hulufei.gitbooks.io/react-tutorial/content/index.html

React official English document: https://facebook.github.io/react/docs/getting-started.html

React Chinese document (this document is poor): http://reactjs.cn/react/docs/getting-started-zh-CN.html

React Chinese documents provided by the Geek academy: http://wiki.jikexueyuan.com/project/react/

Another REAC Chinese document (this is more comprehensive, but not easy to search): http://www.phperz.com/article/15/0712/140537.html

React Router Chinese document: https://react-guide.github.io/react-router-cn/

Rubychina Api:https://ruby-china.org/api

Reacchina Community (which has a lot of resources): http://react-china.org/

ES6 document: Http://es6.ruanyifeng.com/#docs/intro

Redux introduction: http://www.alloyteam.com/2015/09/react-redux/

Ruby China example based on React.js + Redux + Bootstrap