过早客
  • 首页
  • 节点
  • 成员
  • 广告投放
  • 登录
  • 注册

基于 React.js + redux + bootstrap 的 RubyChina 示例

IT技术 • rina • 发表于 6 年前 • 最后回复来自 rina • 6 年前

最近在学习前端的各大流行框架, 主要学习了 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

关于这个项目的一些介绍和学习资料可以访问 这里 查看 .

v2ex.png

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

React.js + RubyChina 项目

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

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

v2ex.png

项目介绍

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 详情可以点击 这里 查看.

核心技术框架
  • 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/

加入收藏 新浪微博 分享到微信 ❤赞 1628 次点击 3 人赞 3 人收藏

打开微信“扫一扫”,打开网页后点击屏幕右上角分享按钮

共收到11条回复
Aegwynn 6 年前 #1 赞 0

就凭这学习的态度,值得点赞!

wm_guanggoo 6 年前 #2 赞 0

这不就是光谷社区么

Mr_Jing 6 年前 #3 赞 0

纯仿前端吗?

rina 楼主 6 年前 #4 赞 0

@Mr_Jing 主要是为了学习 react, redux, fetch 这些技术, 平台内容是用的RubyChina开放的api取的数据. 呈现的东西虽然和ruby-china一样, 不过在这个实现的过程中还是会学到很多东西.

danshendog 6 年前 #5 赞 0

@rina ruby-china克隆的不错

zhouzhe8013 6 年前 #6 赞 0

不错 社区啥时候能开放api就好了

Mr_Jing 6 年前 #7 赞 0

@rina 棒棒棒

rina 楼主 6 年前 #8 赞 0

@Aegwynn
@danshendog
@Mr_Jing
谢谢. :)

hyacinthao 6 年前 #9 赞 0

V2克隆站不要太多。楼主这个看起来还是很舒服。

lantianmeng 6 年前 #10 赞 0

域名是免费的么?

rina 楼主 6 年前 #11 赞 0

@lantianmeng 域名是买的, 这个是开的子域名, 子域名是免费的.

请绑定手机号后,再发言,点击此处
Guozaoke.com—源自武汉的高端交流分享社区
相关主题
接外包项目
黄仁勋与OpenAI首席科学家Ilya Sutskever的炉边谈话
Python 终于没有存在的意义了,撒花
GitHub发布Copliot X,用GPT-4实现聊天式编程
GTC2023英伟达CEO黄仁勋主题演讲:AI、加速计算及其他领域的突破性进展
分享几个ChatGPT国内镜像站
谷歌的AI工具Bard开放申请了
有啥牛的前端网站,想快速搭建一个网站
AI的设计原理是什么?
自己开发的棋牌类游戏app,用户下载后,反馈收到反诈中心电话,说有推销啥的

过早客微信公众号:guozaoke • 过早客新浪微博:@过早客 Hello World,Let's Doodle! 鄂ICP备2021016276号-2 • 鄂公网安备42018502001446号