一直学 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

基于 React.js + Redux + Bootstrap 的 Ruby China 示例 (转)的更多相关文章

  1. RSuite 一个基于 React.js 的 Web 组件库

    RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...

  2. 基于React.js网页版弹窗|react pc端自定义对话框组件RLayer

    基于React.js实现PC桌面端自定义弹窗组件RLayer. 前几天有分享一个Vue网页版弹框组件,今天分享一个最新开发的React PC桌面端自定义对话框组件. RLayer 一款基于react. ...

  3. 基于react+react-router+redux+socket.io+koa开发一个聊天室

    最近练手开发了一个项目,是一个聊天室应用.项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和 ...

  4. 28个漂亮的React.js后台管理模板

    React管理模板 为您的React Web应用程序开发一个管理区域可能非常耗时.它与设计所有前端页面一样重要. 这是2020年设计出色的顶级React.js后台管理模板的列表. 这些模板确实有价值, ...

  5. webpack+React.js

    Webpack是目前基于React和Redux开发的应用的主要打包工具.我想使用Angular 2或其他框架开发的应用也有很多在使用Webpack. 当我第一次看到Webpack的配置文件时,它看起来 ...

  6. 基于Node.js + jade + Mongoose 模仿gokk.tv

    原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 关于gokk 大学的娱乐活动基本就是在寝室看电影了→_→,一般都会选择去goxiazai.cc上看,里面的资源多,质量高 ...

  7. React-Native(三):React Native是基于React设计的

    React Native是基于React js设计的. 参考:<React 入门实例教程> React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript ...

  8. 《React 与 Redux 开发实例精解》出版了!

    <React 与 Redux 开发实例精解>出版了! <React 与 Redux 开发实例精解>出版了! 关于 React 与 Redux React 与 Redux, 一个 ...

  9. 实例讲解基于 React+Redux 的前端开发流程

    原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...

随机推荐

  1. [转]Mac下配置基于SecurID的Cisco IPSec VPN全攻略(有图)

    来自: http://www.eefocus.com/Kevin/blog/11-09/230878_53c71.html RSA的SecurID长的是这个样子滴: Mac里面,可以设置VPN, 方法 ...

  2. Apache Shiro系列四,概述 —— Shiro的架构

    Shiro的设计目标就是让应用程序的安全管理更简单.更直观.     软件系统一般是基于用户故事来做设计.也就是我们会基于一个客户如何与这个软件系统交互来设计用户界面和服务接口.比如,你可能会说:“如 ...

  3. sql server 使用nolock提升性能

    博客园有许多关于nolock的文章,大部分都写得很好,例如:http://www.cnblogs.com/huangxincheng/p/4292320.html 这里仅结合个人项目,作为个人笔记记录 ...

  4. Android开发自学笔记(Android Studio)—4.界面编程与View组件简单介绍

    一.引言 Android应用开发最重要的一份内容就是界面的开发,无论你程序包含的内容多么优秀,如若没有一个良好的用户交互界面,最终也只是会被用户所遗弃.Android SDK提供了大量功能丰富的UI组 ...

  5. 51Nod--1015 水仙花数

    51Nod:  http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1015   1015 水仙花数 基准时间限制:1 秒 空间 ...

  6. viewport就是这回事

    前言 对于移动webapp开发人员来说,viewport是个很重要的东西,容易用但很多时候都是不明白的,于是我决心去弄清楚它. <meta name="viewport" c ...

  7. JavaScript零基础学习系列一

    JavaScript Js分成三大块: ECMAScript:语言本身,是标准,js是它的一个具体实现 BOM:浏览器对象模型 DOM:文档对象模型 ECMAScript有三种具体实现: JavaSc ...

  8. [转]win 10 开始菜单(Win 7风格)增强工具 StartIsBack++ v1.3.4 简体中文特别版

    Windows10开始菜单增强工具StartIsBack++现已更新至v1.3.4,最近主要修复在Win10周年更新版上恢复睡眠后任务栏通知中心按钮消失的问题.升级版对StartIsBack+全新构建 ...

  9. java高新技术-操作javaBean

    1. 对javaBean的简单内省操作 public class IntroSpectorTest { public static void main(String[] args) throws Ex ...

  10. asp.net form身份认证不定时认证失败的问题 排查

    1.网站出现form认证不定时认证失败.登陆过后 每隔一会儿就需要重新登陆.首先检查的是form身份认证票据设置的时间(正常) 然后检查加密后的身份认证信息写入的cookie的失效时间(正常) 2.这 ...