文档章节

基于 React.js + Redux + Bootstrap 的 Ruby China 示例

rina_liuzhen
 rina_liuzhen
发布于 2016/10/21 20:43
字数 609
阅读 1069
收藏 42

最近在学习前端的各大流行框架, 主要学习了 Vue.js 和 React.js, 前段时间用 Vue.js + uikit 实现了 V2EX 的克隆版本, 最近又用 React.js + redux + bootstrap 实现了 RubyChina 的克隆版本, 两个项目都支持响应式布局. 不得不说这是学习新知识的一个有效途径. 这两个项目都比较合适学习 Vue.js 和 React.js 的朋友参考.

Vue.js + V2EX 项目

代码地址: <https://github.com/liuzhenangel/v2ex_frontend>

Demo: <http://v2ex.liuzhen.me>

关于这个项目的一些介绍和学习资料可以访问 [这里](https://github.com/liuzhenangel/v2ex_frontend) 查看 .

这篇文章主要介绍 React.js 的相关知识.

React.js + RubyChina 项目

代码地址: <https://github.com/liuzhenangel/react-ruby-china>

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

项目介绍

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` 详情可以点击 [这里](https://github.com/facebookincubator/create-react-app) 查看.

核心技术框架

* 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.html>

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

React 中文文档(这个文档比较差): <http://reactjs.cn/react/docs/getting-started-zh-CN.html>

极客学院提供的 React 中文文档: <http://wiki.jikexueyuan.com/project/react/>

另一个 Reac 中文文档(这个比较全面, 但是不便于搜索): <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 社区(这里面有很多资源): <http://react-china.org/>

ES6 文档: <http://es6.ruanyifeng.com/#docs/intro>

Redux 介绍: <http://www.alloyteam.com/2015/09/react-redux/>

© 著作权归作者所有

rina_liuzhen
粉丝 6
博文 2
码字总数 1581
作品 0
深圳
私信 提问
加载中

评论(2)

p
packlee
写的很好,微信小程序是基于React Native开发的,体验接近原生APP,发展前景值得重视
我分享个项目:今日头条APP_微信小程序
源代码下载(百度网盘):http://pan.baidu.com/s/1miCr6Ak
功能包括:新闻列表,新闻文章页面,新闻搜索与发现等功能
这个不错,UI设计标准,代码比较规范,很好的学习范例
os小野兽
os小野兽
干货啊
2016年度——React.js 最佳实践

最近React(web/native)依旧如火如荼,相信大家都跃跃欲shi,我们团队也开始在React领域有所尝shi. 2016年应该是 React 逐渐走向成熟的一年,让我们一起来看看国外的开发者们都总结了哪些"最佳实...

力谱宿云
2016/03/24
5.6K
3
React.js 2016 最佳实践 徬梓阅读 1584收藏 71

译者按:近几个月React相关话题依旧火热,相信越来越多的开发者在尝试这样一项技术,我们团队也在PC和移动端不断总结经验。2016来了,这应该是 React走向成熟的一年,不管你是新手,还是已经...

我家有宝
2016/01/27
86
0
展示一下自己的 Rails 小作品

使用ruby也有几年了,但一点都不敢说自己掌握这门语言。 ruby的编程方法和技巧实在很多,相信这里都是和我一样发自内心喜欢这门语言的朋友,就不叨叨ruby具体有多好了,哈哈。 Rails呢,现在...

Chorder
2018/02/07
0
0
[三元学React]Redux工作流及工程化编码指南

一、什么是Redux? Redux 是 JavaScript 状态容器, 提供可预测化的状态管理。它专门为React.js这门框架设计,但并不是只能用于react,可以用于任何界面库。 那为什么React.js需要这个状态容器...

神三元
06/18
0
0
any-loader JS数据加载器中间件

简介 any-loader 旨在为 node.js 和其他的 javascript 提供一个可定制程度较高的数据加载器中间件类库。本身并不实现任何数据加载器的实现逻辑,只界定了数据 流走向的标准接口 ,调用顺序(...

曾建凯
2018/11/13
113
0

没有更多内容

加载失败,请刷新页面

加载更多

字节序转换详解

在跨平台和网络编程中我们经常会提到网络字节序和主机字节序,如果没有正确对两者进行转换,从而导致两方产生了不同的解释,就会出现意想不到的bug。 目录 0x01 概念 0x02 分类 0x03 两种字节...

无心的梦呓
37分钟前
4
0
干货 | AI人脸识别之人脸搜索

本文档将利用京东云AI SDK来实践人脸识别中的人脸搜索功能,主要涉及到分组创建/删除、分组列表获取、人脸创建/删除、人脸搜索,本次实操的最终效果是:创建一个人脸库,拿一张图片在人脸库中...

京东云技术新知
42分钟前
4
0
【swiper】 滑块组件说明

本文转载于:专业的前端网站➣【swiper】 滑块组件说明 swiper 滑块视图容器,其原型如下: 1 <swiper 2 indicator-dots="[Boolean]" 3 indicator-color="[Color]" 4 indicator-act......

前端老手
52分钟前
4
0
堆排序算法

《Java算法总纲目录》 1、定义 由下图(网上找的),堆排序类似这种,把最大的数字放到最下面的最右面位置,然后把第二大的数字放到最下层的最右面倒数第二个位置,依此类推,如下: 2、代码...

木九天
55分钟前
5
0
框架和库的区别

框架和库的区别 框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。 node 中的 express; 库(插件):提供某一个小功能,对项目的侵入性较小...

庭前云落
59分钟前
5
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部