react+redux构建淘票票首页
react+redux构建淘票票首页
描述
在之前的项目中都是单纯的用react,并没有结合redux。对于中小项目仅仅使用react是可以的;但当项目变得更加复杂,仅仅使用react是远远不够的,我们需要将UI渲染和数据处理区分开,因此我们需要引入redux来管理数据层。写该小demo的目的主要是为了在理论学习的基础上更好的进行实践,通过自己亲手写个小项目我们才能更好的理解redux是如何管理数据层的。数据是取自淘票票官方二月份的部分数据。
技术栈
react.js、react-router、redux、es6、webpack、less等。
github地址
https://github.com/zhuotianbao/tiaopiaopiao--react-redux
目录结构
- dist [打包后代码]
- src [源码]
-- css [样式]
-- data [数据]
-- img [图片]
-- js [js代码]
└ actions [创建action]
└ components [纯UI组件]
└ constants [定义type类型]
└ containers [获取store中的数据;将dispatch与actionCreator结合起来]
└ reducers [reducer纯函数]
└ store [创建store]
└ index.js [路由配置]
-- index.html [入口]
项目浏览
特色功能
该小DEMO除了应用redux技术之外,还有个特色功能:
- 用原生js封装一个轮播图组件。
- 引入异步加载组件。同步加载方式,每次都会把所有的依赖加载完再进行渲染,导致加载时间长。
- 各个组件的js分开打包。要是将所有的js都打包在一个文件夹,当项目太大时会导致文件太大,无法满足性能加载速度等要求。
备注
由于时间比较仓促,一些细节还没来得及完善,还要很多东西都还没来得及加入,如immutable.js进行性能优化,图片的懒加载,redux开发者工具的日志监控等等功能。后续会慢慢完善,敬请期待...
react+redux构建淘票票首页的更多相关文章
- react构建淘票票webapp,及react与vue的简单比较。
前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...
- vue2.0构建淘票票webapp
项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...
- Flask (六) 项目(淘票票)
FlaskDay06 Flask项目-淘票票 RESTful REST一种软件架构风格.设计风格.而不是标准,只是提供了一组设计原则和约束条件.它主要用户客户端和服务器交互类的软件. 在前后端分离 ...
- python爬虫——爬取淘票票正在热映电影
今天正好学习了一下python的爬虫,觉得收获蛮大的,所以写一篇博客帮助想学习爬虫的伙伴们. 这里我就以一个简单地爬取淘票票正在热映电影为例,介绍一下一个爬虫的完整流程. 首先,话不多说,上干货——源 ...
- jsonpath解析淘票票,所有购票的城市
解决一些反爬,校验. 复制所有请求头 import urllib.request # 请求url url = 'https://dianying.taobao.com/cityAction.json? ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- react+redux教程(五)异步、单一state树结构、componentWillReceiveProps
今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...
- react+redux教程(四)undo、devtools、router
上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...
- 【原】react+redux实战
摘要:因为最近搞懂了redux的异步操作,所以觉得可以用react+redux来做一个小小的项目了,以此来加深一下印象.切记,是小小的项目,所以项目肯定是比较简单的啦,哈哈. 项目效果图如图所示:(因 ...
随机推荐
- JAVA语法题
import java.util.*; public class Birthdays { public static void main(String[] args){ Map<Friends, ...
- Myeclipse创建新项目
1. 打开myeclipse, 配置mysql server preference里找到 show view-- DB Browser, 新建数据库驱动. 1. URL填写: jdbc:mysql:/ ...
- hibernate--一对多单向关联 (重点!!!)
多对一是在多的类上存在一的对象 一对多是在一的类上存在多的集合. 多的类 user.java: package com.bjsxt.hibernate; import javax.persistenc ...
- IBATIS事务处理 - - 博客频道 - CSDN.NET
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- IOS 清除UIWebview的缓存以及cookie
cookie清除 NSHTTPCookie *cookie; NSHTTPCookieStorage *storage = [NSHTTPCookieS ...
- css 弹出框
最近想弄一个类似登陆框的那种弹出框,其实网上已经有很多例子,而且也有相应的插件,例如:jquery-ui的,可直接使用,而我就简单的弄了个简易版的登陆框,真的很简易. 其实原理就是设置两个div,一个 ...
- STM32/GD32芯片信息(转)
源:STM32/GD32芯片信息 因为需要自动适配芯片进行系统配置,所以我们有必要通过读取一些系统寄存器来获取必要信息.我们的代码需要兼容STM32F1/GD32F1/STM32F0/STM32F4 ...
- CSS 弹性盒子布局
学习地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout
- Java琐碎
final final只能用来保证原始数据类型的实例变量的不可变性,而无法用于引用类型的变量.如果一个引用类型的实例变量含有修饰符final,该实例变量的值(某个对象的引用)就永远无法改变了--它将永 ...
- lua 函数
1.函数只有一个参数,且该参数为table 或 字符串时,调用函数可以省略() print"hello world" 同 print("hello world" ...