使用React全家桶高仿「Eyepetizer」开眼
发布在前端技术栈2017年6月5日view:861HTML5CSS前端开发BrettBatReact前端工程redux前端工程师ES6
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

image.png

简介

Eyepetizer是个人比较喜欢的美而小的短视频日报应用
原站使用jquery实现, 正好api没有限制, 于是用react高仿了一下. 应用不复杂但是为了展示完整的开发流程, 所以把主流的技术栈都用上了, 适合新手入门

技术栈

  • React-router
  • Redux
  • Redux-saga
  • CSS in JS (styled-components)
  • Immutable.js
  • Flow.js
  • PWA
  • Responsive

预览

pc端

demo地址

手机预览

image.png

截图

主页

主页

视频

视频

使用

README

总结

笔者在生产环境下使用vue比较多, 在以vue先入为主的思想上谈谈对react的看法, 若有错误之处请多多指教

  1. 单向数据流很棒, 不同于vue + vuex, 在react + reduxactions也是props, 组件也可以只是接收props输出dom的函数, 配合dumb/smart组件的概念, 以及类似saga中拆分effects的做法, 使得react中测试非常清晰. 当然严格遵循这种思想会带来props chain的尴尬, 出现这种问题更好的解决方法是重新选择connect的层级或者思考组件切分粒度

  2. 关于CSS in JS, 也就是尤雨溪前几天live所讲到的Colocation, 个人比较喜欢, 这使得组件的输出更为稳定, 不会出现样式污染, 使组件更组件 , 目前觉得react中各个库的实现方案都没有vuescope style优雅

  3. 框架的选择, 也是被大家说烂了的问题, 在项目没有达到一定量级且没有native需求之前我更推荐vue, 使用vue能让我更好的专注业务而不是挑选眼花缭乱的库, 并思考什么才是最佳实践. 但我觉得每个前端都应该深入了解react社区, 不可否认它们更让我学习更多更前卫的思想, 而不仅限于'精通api的使用'

最后贴上本项目的github地址
如果对你有所帮助的话, 可以帮忙点个star

image.png

评论
发表评论
暂无评论
WRITTEN BY
AppleCatKay
已转前端的前iOS程序员
TA的新浪微博
PUBLISHED IN
前端技术栈

讲解一些前端技术栈的文章, 包括但不限于vue/weex/react/react-native

我的收藏