文档章节

React技术栈实现XX点评电商App-Demo

邪气小生
 邪气小生
发布于 2017/09/09 22:52
字数 654
阅读 41
收藏 0

项目地址:https://github.com/Nealyang/React-Fullstack-Dianping-Demo

技术栈:react、react-router4.x 、 react-redux 、 webpack3.x、 redux-saga 、 css-module 、 ES6 、babel...

在慕课网看到相关视频,但是我等屌丝码农真心买不起这个价位的视频。有幸看到源代码,但是看到代码的我。。。也不是很苟同上面代码中react技术栈这一套使用方式。遂自己写了一个demo。

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

Node.js技术交流群:209530601

React技术栈:398240621

项目截图

  • 首页

首页

首页

  • 详情页

detail

detail

  • 城市选择

city

项目运行展示(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辅助

  •  上拉加载更多

  •  ......

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

(^_^)/~~

© 著作权归作者所有

共有 人打赏支持
邪气小生
粉丝 14
博文 52
码字总数 67752
作品 0
朝阳
程序员
私信 提问
2018年慕课网视频教程(vue、docker、python、Go语言、java......)

如需下述哪一个课程,加QQ: 3475362830,非免费,几大洋,非诚勿扰! Java并发编程与高并发解决方案 ZooKeeper分布式专题与Dubbo微服务入门 Java大数据实战 Stom构建实时流处理 HBase+Spring...

杰梵
2018/10/08
0
0
第二届中国前端开发者大会-高效前端开发实践和创新

若您需要购买其他种类的参会票请登陆报名网址:http://www.huodongxing.com/go/fdcon2017 第二届中国前端开发者大会(FDCon2017)是在上海举办的针对前端技术(HTML5,CSS,JS)的互联网开发...

TopGeek
2017/03/10
21
1
【福利】3980元的web前端视频教程限量领取!!!

  2017年,互联网行业风起云涌,IT工程师如果仅凭传统开发思维,无法突破固有知识体系,终将会被社会所淘汰。会跨平台混合应用开发、微信小程序、Web应用、pc以及手机炫酷网页的HTML5全栈开...

Android群英传
2017/10/23
0
0
电商CTO必读:首个人工智能虚假点评系统的攻防分析

水军的虚假点评是各大知名电商平台最为头疼的问题之一,因为虚假点评不但会误导消费者,拉低用户体验,而且会给商家带来巨大损失,同时也给电商平台自身的品牌和发展带来难以估量的危害。 针...

Cashcow
2017/09/06
0
0
吴彦文/dianpinPlus

从零开始使用React全家桶开发电商系统 技术栈: react + react-router4.1 + redux + koa2 + koa-router + less + ES6/7 + webpack + fetch + bundle-loader 项目说明: 基于 react react-ro......

吴彦文
2017/09/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

阿里强制要求的21条Java开发规范,可以避免很多坑

1. 【强制】避免通过一个类的对象引用访问此类的静态变量或静态方法,无谓增加编译器解析成本,直接用类名来访问即可。 2. 【强制】所有的覆写方法,必须加@Override注解。 说明:getObject...

天王盖地虎626
7分钟前
0
0
oracle dg 备库未设置convert参数导致ORA-01111,ORA-01110

查看trace 文件: MRP0: Background Managed Standby Recovery process started (amls) started logmerger process Sun Jan 20 07:55:53 2019 Managed Standby Recovery starting Real Time ......

hnairdb
27分钟前
0
0
乱入Linux界的我是如何学习的

欢迎来到建哥学Linux,咳!咳!咳!开个玩笑哈,我是一个IT男,IT界的入门选手,正在学习Linux。 在之前,一直想进军IT界,学习IT技术,但是苦于没有人指导,也不知道学什么,最开始我自己在...

linux-tao
今天
1
0
乱入Linux界的我是如何学习的

欢迎来到建哥学Linux,咳!咳!咳!开个玩笑哈,我是一个IT男,IT界的入门选手,正在学习Linux。 在之前,一直想进军IT界,学习IT技术,但是苦于没有人指导,也不知道学什么,最开始我自己在...

linuxprobe16
今天
9
0
OSChina 周日乱弹 —— 没时间 没头发 但有钱

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @开源中国总经办主任 :分享齐一的单曲《这个年纪》 《这个年纪》- 齐一 手机党少年们想听歌,请使劲儿戳(这里) @肿肿卷 :我真的可以睡一天...

小小编辑
今天
125
6

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部