基于 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
基于 React.js + Redux + Bootstrap 的 Ruby China 示例 (转)的更多相关文章
- RSuite 一个基于 React.js 的 Web 组件库
RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...
- 基于React.js网页版弹窗|react pc端自定义对话框组件RLayer
基于React.js实现PC桌面端自定义弹窗组件RLayer. 前几天有分享一个Vue网页版弹框组件,今天分享一个最新开发的React PC桌面端自定义对话框组件. RLayer 一款基于react. ...
- 基于react+react-router+redux+socket.io+koa开发一个聊天室
最近练手开发了一个项目,是一个聊天室应用.项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和 ...
- 28个漂亮的React.js后台管理模板
React管理模板 为您的React Web应用程序开发一个管理区域可能非常耗时.它与设计所有前端页面一样重要. 这是2020年设计出色的顶级React.js后台管理模板的列表. 这些模板确实有价值, ...
- webpack+React.js
Webpack是目前基于React和Redux开发的应用的主要打包工具.我想使用Angular 2或其他框架开发的应用也有很多在使用Webpack. 当我第一次看到Webpack的配置文件时,它看起来 ...
- 基于Node.js + jade + Mongoose 模仿gokk.tv
原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 关于gokk 大学的娱乐活动基本就是在寝室看电影了→_→,一般都会选择去goxiazai.cc上看,里面的资源多,质量高 ...
- React-Native(三):React Native是基于React设计的
React Native是基于React js设计的. 参考:<React 入门实例教程> React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript ...
- 《React 与 Redux 开发实例精解》出版了!
<React 与 Redux 开发实例精解>出版了! <React 与 Redux 开发实例精解>出版了! 关于 React 与 Redux React 与 Redux, 一个 ...
- 实例讲解基于 React+Redux 的前端开发流程
原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...
随机推荐
- mac下打开FTP服务
MAC下打开FTP服务 周银辉 mac下一般用smb服务来进行远程文件访问,但要用FTP的话,高版本的mac os默认关掉了,可以用如下命令打开: sudo -s launchctl load -w ...
- ASP.NET Boilerplate
I want it to be a start point for all we .NET developers, so, it will be good to develop it together ...
- 老生长谈:css实现右侧固定宽度,左侧宽度自适应
反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...
- 安卓开发:一种快速提取安卓app的UI图标资源的方法
在做安卓设计时,找美工设计界面的漂亮图标是必不可少的,但是对于一个初创团队来说,请一个UI的成本其实也挺高的,此时对于一个偏技术的产品经理来说,从其他成熟的产品的apk中提取图标就是一个很便捷的方法, ...
- WCF学习笔记一
Windows Communication Foundation(WCF)是由微软开发的一系列支持数据通信的应用程序框架,可以翻译为Windows 通讯开发平台. 整合了原有的windows通讯的 . ...
- 我是服务的执政官-服务发现和注册工具consul简介
服务发现和注册 我们有了两个服务.服务A的IP地址是192.168.0.1,端口9001,服务B的IP地址192.168.0.2,端口9002.我们的客户端需要调用服务A和服务B,我们只需要在配置文件 ...
- 支持断线重连、永久watcher、递归操作并且能跨平台(.NET Core)的ZooKeeper异步客户端
在公司内部的微服务架构中有使用到了"ZooKeeper",虽然官方有提供了.NET的SDK,但易用性非常的差,且搜遍github.nuget,没有发现一个可以跨平台且易用的组件,所 ...
- 【IIS】iis6.1下添加两个ftp站点,
1,添加本地账户或密码||组 :[控制面板-->管理工具-->计算机管理器-->系统工具-->本地用户和组] 2,IIS站点目录先(添加FTP站点)[注意:多个站点多个端口] ...
- 使用js实现显示系统当前时间并实现倒计时功能并触发模态框(遮罩)功能
常常在我们的网页中需要倒计时来触发一些函数,例如遮罩等,在本项目中,通过使用jquery,bootstrap,实现了显示系统当前时间,并且实现了倒计时的功能,倒计时实现后将会弹出模态框(遮罩层).模态 ...
- HTML form 表单
1.id.name的关系 通常我们在写HTML代码时,会给控件指定一个id属性,这个属性只供JS和CSS使用,在表单提交时,它不起任何作用; 在HTML代码中我们会指定不同的value为各个不同的控件 ...