React+ Redux + React-route + Axios 实战,很适合进阶

栏目: JavaScript · 发布时间: 5年前

内容简介:前段时间学习完了React的基础,自己网上找了一些实战项目,做了几个感觉项目不是很全面,就想做一个完整的项目来提升自己的React水平.以前学习Vue的时候,就看过bailicangdu大神的该项目是饿了么, 目前开发了登录、注册、购物车、商品展示、用户信息等,算一个比较完整的项目,这个项目比较复杂,这也是我选这个项目的原因.react4 + react-redux + react-router + es6 + axios + sass + webpack

前言

前段时间学习完了React的基础,自己网上找了一些实战项目,做了几个感觉项目不是很全面,就想做一个完整的项目来提升自己的React水平.以前学习Vue的时候,就看过bailicangdu大神的 vue2-elm 项目,所以自己打算用react重写它,后端数据还是用vue2-elm,实在没有精力撸后端(感谢bailicangdu大神).

该项目是饿了么, 目前开发了登录、注册、购物车、商品展示、用户信息等,算一个比较完整的项目,这个项目比较复杂,这也是我选这个项目的原因.

技术栈

react4 + react-redux + react-router + es6 + axios + sass + webpack

项目效果

React+ Redux + React-route + Axios 实战,很适合进阶

React+ Redux + React-route + Axios 实战,很适合进阶

React+ Redux + React-route + Axios 实战,很适合进阶

React+ Redux + React-route + Axios 实战,很适合进阶

React+ Redux + React-route + Axios 实战,很适合进阶

React+ Redux + React-route + Axios 实战,很适合进阶

React+ Redux + React-route + Axios 实战,很适合进阶

React+ Redux + React-route + Axios 实战,很适合进阶

说明

觉得对你有帮助,请到 githubStar 支持一下,感谢

bailicangdu大神的项目地址 点这里

演示

demo

请用Chrome调试的手机模式查看

项目结构

├── build   
│   ├── favicon.ico  
│   └── manifest.json 
├── config            ------------------webpack配置
│   ├── env.js       
│   ├── jest          
│   │   ├── cssTransform.js
│   │   └── fileTransform.js
│   ├── paths.js
│   ├── webpack.config.dev.js
│   ├── webpack.config.prod.js
│   └── webpackDevServer.config.js
├── package-lock.json
├── package.json    --------------------项目package.json
├── public          --------------------出口
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── scripts        ---------------------运行的脚本
│   ├── build.js
│   ├── start.js
│   └── test.js
├── src           ----------------------源码目录
│   ├── api       ----------------------API目录
│   │   ├── api.js
│   │   └── server.js
│   ├── assets   -----------------------资源目录
│   │   └── iconfont -------------------iconfont目录
│   ├── components   -------------------公共组件
│   │   ├── alert_tip  -----------------提示组件
│   │   ├── footer   -------------------导航栏组件
│   │   ├── header  --------------------header组件
│   │   ├── loader  --------------------加载组件
│   │   └── shop_list ------------------商店列表组件
│   ├── config    ----------------------项目一些配置
│   │   ├── envconfig.js  --------------配置信息
│   │   └── rem.js  --------------------自适应
│   ├── index.js    --------------------入口
│   ├── pages       --------------------页面目录
│   │   ├── food    --------------------食物页面
│   │   ├── info   ---------------------个人信息页面
│   │   ├── login  ---------------------登录页面
│   │   ├── msite  ---------------------商店页面
│   │   ├── profile --------------------主页页面
│   │   ├── set_user -------------------用户信息设置页面
│   │   ├── shop   ---------------------商店详情页面
│   │   └── technology  ----------------技术栈页面
│   ├── router   -----------------------路由
│   │   └── index.js
│   ├── serviceWorker.js  --------------热加载
│   ├── store   ------------------------react-redux状态管理目录
│   │   ├── store.js
│   │   └── user
│   ├── style   ------------------------通用样式目录
│   │   ├── base.scss
│   │   ├── mixin.scss
│   │   └── swiper.min.css
│   └── utils  ------------------------公用方法
│       ├── asyncComponent.jsx  -------异步加载组件
│       └── commons.js  ---------------公用方法
├── README.md      ----------------------README
└── tree.md  --------------------------项目结构

项目地址

项目源码 点这里

欢迎提Issue, 觉得不错的话欢迎Star


以上所述就是小编给大家介绍的《React+ Redux + React-route + Axios 实战,很适合进阶》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

永无止境

永无止境

[美] 道格拉斯•艾德华兹 / 刘纯毅 / 中信出版社 / 2012-12-15 / 59.00元

★ 值得中国初创公司反复思考的企业传记 ★ 互联网行业必读书 ★ Google高管揭开Google的神秘面纱 ★ 探寻“G力量”重塑人类知识景观的心路历程 ★ Google走过的路,Google未来的路 ★ 编辑推荐: 它是目前被公认为全球最大的搜索引擎!它是互联网上五大最受欢迎的网站之一! 它在操作界面中提供多达30余种语言选择,在全球范围内拥有无数用户......一起来看看 《永无止境》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

URL 编码/解码
URL 编码/解码

URL 编码/解码