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

Stella981 等级 160 0 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

项目截图

  • 首页

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

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

  • 详情页

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

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

  • 城市选择

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

项目运行展示(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技术栈完成。

(^_^)/~~

收藏
评论区

相关推荐

Create React App
Create React App Create React App Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 createreactapp(ht
中高级前端-面试秘籍(二)
引言大家知道,React 现在已经在前端开发中占据了主导的地位。优异的性能,强大的生态,让其无法阻挡。博主面的 5 家公司,全部是 React 技术栈。据我所知,大厂也大部分以 React 作为主技术栈。React 也成为了面试中并不可少的一环。 本来是计划只有上下两篇,可是写着写着越写越多,受限于篇幅,也为了有更好的阅读体验,只好拆分出中篇,希望各位童鞋别
Nerv
![](https://oscimg.oschina.net/oscnet/1adc9f3b5b42317562590c398e4f3cce7d7.jpg) Nerv 是一款由京东凹凸实验室打造的高性能类 React 前端框架。目前已广泛运用在京东商城(JD.COM)核心业务及TOPLIFE全站。Nerv 基于React标准,使用 Virtual Dom
RN开发快速切换底部导航时react
目前react-native平台最好用的轮播图组件:[react-native-swiper](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fleecade%2Freact-native-swiper%2F) 最近在项目迭代开发测试中发现一个问题,就是在快速切换
React Native Android原生模块使用(获取Android手机通讯录的数据)
使用React Native开发App时会遇到需要用到一些Android原生模块,比如:访问相册、通讯录、日历等等。下面主要是以获取Android手机通讯录的数据为例,讲解React Native Android原生模块的使用。 ![](https://static.oschina.net/uploads/space/2017/0619/184109_Qb
React Native第三方组件和示例链接
以下是React Native的链接,有需要第三方组件或者示例的小伙伴可以收藏一下 01、React Native之Tab-View:https://js.coach/react-native/react-native-tab-view 02、React Native之正在加载Loading条:https://js.coach/react-native/
React Navigation5.0系列二:TabNavigation的使用
本篇是React Navigation 5.0系列的第二篇文章,了解一下APP开发中常见的底部导航菜单的使用,即本文的主角:TabNavigation。本篇文章在[React Navigation5.0系列一:StackNavigator的使用](https://www.oschina.net/action/GoToLink?url=http%3A%
React 安装教程
我是windows系统  提前安装好了node 1.安装好node 不多介绍,百度 2.安装react 根据react 官网提示,在命令提示符输入 npm install -g create-react-app ![](https://oscimg.oschina.net/oscnet/4bf5c4917aa9e45e056654f406955c
React 设计思想
https://github.com/react-guide/react-basic React 设计思想 ========== > 译者序:本文是 React 核心开发者、有 React API 终结者之称的 Sebastian Markbåge 撰写,阐述了他设计 React 的初衷。阅读此文,你能站在更高的高度思考 React 的过去、现在和未来。
React.createClass 、React.createElement、Component
react里面有几个需要区别开的函数 React.createClass 、React.createElement、Component 首选看一下在浏览器的下面写法: <div id="app"> </div> <script src="../js/react.js"></script> <scr
React学习笔记一 ,初始环境搭建
全局安装create-react-app :cnpm install -g create-react-app 创建一个自己的项目my-app: create-react-app my-app 进入项目my-app: cd my-app 运行项目:cnpm start 目录结构如下图: ![](https://static.oschina.net/u
React开发技术
React开发相关栈 ---------- ### [](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Freact.hnz.kim%2F%3Ffile%3D005-React%25E9%25A1%25B9%25E7%259B%25AE%2F01-React%25E5%25BC%2580%2
React技术栈实现XX点评电商App
> 项目地址:[https://github.com/Nealyang/React-Fullstack-Dianping-Demo](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2FNealyang%2FReact-Fullstack-Dianping-Demo)
React的Sass配置
React提供的脚手架[creact-react-app](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Ffacebook.github.io%2Fcreate-react-app%2Fdocs%2Fadding-a-sass-stylesheet)创建的工程文件不像vue那种暴露出web
React的使用方法(脚手架的方法)
**使用react加脚手架创建一个项目:** * npm install create-react-app -g * create-react-app myapp * cd myapp * yarn start **npx : 帮助我们更方便的找到本地安装的命令** * .\\node\_mo