使用React全家桶高仿「Eyepetizer」开眼

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 + redux中actions也是props, 组件也可以只是接收props输出dom的函数, 配合dumb/smart组件的概念, 以及类似saga中拆分effects的做法, 使得react中测试非常清晰.
   当然严格遵循这种思想会带来props chain的尴尬, 出现这种问题更好的解决方法是重新选择connect的层级或者思考组件切分粒度

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

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

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

image.png