资讯专栏INFORMATION COLUMN

React技术栈实现XXX点评App demo

wslongchen / 3209人阅读

摘要:项目的架构也是最近在各种探讨研究。还求大神多指点项目技术总结技术栈项目结构探究初体验关于项目中的配置说明项目简单说明开发这一套,我个人的理解是体现的是代码分层职责分离的编程思想逻辑与视图严格区分。前端依旧使用技术栈完成。

项目地址: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

项目截图

加载:

首页:

详情页:

城市选择:

项目运行展示(GIF)

流量党慎入

app运行展示

state树变化

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

项目技术总结

react技术栈项目结构探究

redux-saga初体验

关于项目中webpack的配置说明

项目简单说明

开发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技术栈完成。

(^_^)/~~

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88506.html

相关文章

  • React技术实现大众点评Demo-初次使用redux-saga

    摘要:在的中,可以使用或者等来监听某个,当某个触发后,可以使用等发起异步操作,操作完成后使用函数触发,同步更新,从而完成整个的更新。对于何时响应和如何响应,并没有控制权。的作用是用来取消一个还未返回的任务。 项目地址 项目截图 showImg(https://segmentfault.com/img/bVUJwx?w=718&h=1294); redux-saga介绍 众所周知,react仅...

    kel 评论0 收藏0
  • 25 岁,毕业写前端的这三年

    摘要:赶上时代的第一年我毕业后加入的第一家公司是科大讯飞。毕业的第一年里,我的工作以实现讯飞开放平台的部分前端需求为主。以此为契机,我推动了团队的前后端分离实践,后来也有幸被评为了那一年的部门最佳新人。记得讯飞的内部可以显示每天的打卡排名。时间回到 2016 年,彼时 996 还不算福报,比特币单价也还远远不到 1000 美元。那时的我怀着对大厂的敬畏和对前途的迷茫,拿着一纸毕业证告别了校园。这第...

    zlyBear 评论0 收藏0
  • 你的 css 也需要模块化

    摘要:局部样式通过,部分解决的模块化的问题。全局样式的特点,导致难以维护,所以需要一种局部样式的解决方案。也就是彻底的模块化,进来的模块,需要隐藏自己的内部作用域。 css 局部样式 sass、less 通过 @import ,部分解决的 css 模块化的问题。 由于 css 是全局的,在被引入的文件和当前文件出现重名的情况下,前者样式就会被后者覆盖。在引入一些公用组件,或者多人协作开发同一...

    Pikachu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<