React技术栈实现XXX点评App demo

发布时间:2019-06-06 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了React技术栈实现XXX点评App demo脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

项目地址:https://github.com/Nealyang/R...
栈:react、react-router4.x 、 react-redux 、 webpack3.x、 redux-saga 、 css-module 、 ES6 、babel...


同学习react、node的同学欢迎加入:

Node.js技术交流群:209530601

React技术栈:398240621


项目截图

加载:

React技术栈实现XXX点评App demo

首页:

React技术栈实现XXX点评App demo

React技术栈实现XXX点评App demo

详情页

React技术栈实现XXX点评App demo

React技术栈实现XXX点评App demo

城市选择:

React技术栈实现XXX点评App demo

项目运行展示(GIF)

流量党慎入

app运行展示

state树变化

项目内容不多,就涉及到三个页面,主要是为了学习新的知识。项目中用的redux-saga也是前天才学习的。项目的架构也是最近在各种探讨研究。还求大神多指点~

项目技术总结

项目简单说明

  • 开发react-redux这一套,我个人的理解是 Redux体现的是代码分层、职责分离的编程思想,逻辑与视图严格区分。 而某网上的这一套代码,逻辑都写到了view组件层,组件需要关心如何获取数据,如何处理数据,这样的组件层是不容易复用的,Redux的使用也是残缺的。甚至这种情况,你不用Redux,直接定义一个全局的state变量,所有组件都来直接操作它好了。

  • 项目还有许多需要完善的地方,redux-saga的使用方式、项目结构、包括webpack3.x配合react的代码优化以及react的Universal渲染甚至后端Node的代码编写。欢迎各路大神前来指教~

项目实现

  • react热更新

  • css-module使用

  • react-redux异步处理

  • react-router 浏览器传参、获取

  • redux-saga辅助

  • 上拉加载更多

  • 全局监控Loading

  • ......

  • Universal渲染 可参考我另一个项目webpack1.x

安装步骤


# clone this demo 
gIT clone ...

# install dePEndencies
npm i (or yarn)

# serve with hot reload at localhost:8000
npm start

more

后续会继续改进技术,如果有时间会写一个全栈的demo,着重后端Node和mongo的使用。前端依旧使用react技术栈完成。

(^_^)/~~

脚本宝典总结

以上是脚本宝典为你收集整理的React技术栈实现XXX点评App demo全部内容,希望文章能够帮你解决React技术栈实现XXX点评App demo所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。