V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
rinaliuzhen
V2EX  ›  分享创造

基于 React.js 的 RubyChina 示例 及 Vue.js 的 V2EX 示例

  •  3
     
  •   rinaliuzhen · 2016-10-11 18:12:06 +08:00 · 3152 次点击
    这是一个创建于 2947 天前的主题,其中的信息可能已经有所发展或是发生改变。

    抱歉之前那篇弄错了节点, 想换又不能修改, 请包涵.

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

    17 条回复    2016-10-13 16:10:05 +08:00
    IamJ
        1
    IamJ  
       2016-10-11 18:45:22 +08:00 via iPhone
    收藏,准备搞一下 react
    SuperMild
        2
    SuperMild  
       2016-10-11 19:25:07 +08:00 via iPad
    楼主对这两种技术有什么看法,更喜欢哪个?
    rinaliuzhen
        3
    rinaliuzhen  
    OP
       2016-10-11 19:43:56 +08:00
    @SuperMild 我自己更喜欢用 Vue.js 开发, 至于具体的对比可以看一下这篇文章: https://www.zhihu.com/question/39943474?from=timeline&isappinstalled=0 写的特别好.
    Clarencep
        4
    Clarencep  
       2016-10-12 09:13:10 +08:00
    Mark~

    不过首屏打开速度好慢的说
    corona
        5
    corona  
       2016-10-12 09:14:33 +08:00
    最近入坑 React
    rinaliuzhen
        6
    rinaliuzhen  
    OP
       2016-10-12 10:09:45 +08:00
    @Clarencep 单页应用首次打开会慢一点, 加载完点其他链接就会很快.
    rinaliuzhen
        7
    rinaliuzhen  
    OP
       2016-10-12 10:10:10 +08:00
    @corona
    Clarencep
        8
    Clarencep  
       2016-10-12 12:28:25 +08:00
    @rinaliuzhen 可以考虑加个服务端渲染, vuejs 和 react 好像都支持服务端渲染的吧
    rinaliuzhen
        9
    rinaliuzhen  
    OP
       2016-10-12 12:47:00 +08:00
    @Clarencep 好建议
    TomIsion
        10
    TomIsion  
       2016-10-12 17:54:10 +08:00
    TomIsion
        11
    TomIsion  
       2016-10-12 17:55:31 +08:00
    @rinaliuzhen

    无视上面的消息 最近学习 React.js 全家桶
    也想撸个高仿的 V 站出来 样式什么的怎么弄的?
    不想浪费时间在这些东西上~
    rinaliuzhen
        12
    rinaliuzhen  
    OP
       2016-10-12 23:25:57 +08:00
    @TomIsion 你可以用 bootstrap 啊, 新知识总是要花时间的, 不花时间又怎么能做好呢.
    TomIsion
        13
    TomIsion  
       2016-10-13 08:29:59 +08:00
    TomIsion
        14
    TomIsion  
       2016-10-13 08:30:40 +08:00
    @rinaliuzhen 楼主撸个基于 Vue.js 的 V 站大概花了多久哈?
    rinaliuzhen
        15
    rinaliuzhen  
    OP
       2016-10-13 12:06:21 +08:00   ❤️ 1
    @TomIsion 1 个星期.
    terryops
        16
    terryops  
       2016-10-13 12:15:07 +08:00
    Wow, damn cool!
    This is much faster!
    TomIsion
        17
    TomIsion  
       2016-10-13 16:10:05 +08:00
    @rinaliuzhen 了解~ 铜币献上~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2735 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 00:20 · PVG 08:20 · LAX 16:20 · JFK 19:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.