react构建淘票票webapp,及react与vue的简单比较。
前言
前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步!
项目技术栈
前端技术栈:react + react-router + redux + ant-design-mobile
后台技术栈:nodejs + express
项目地址:https://github.com/canfoo/react-taopiaopiao
同样地,先晒一张效果图,想要看更多效果图请点击这里
项目架构
本项目采用react栈构建前端页面,采用express搭建后台服务,主要目录如下:
. ├── bin # 启动脚本 ├── build # webpack相关配置 ├── config # 项目配置文件 ├── server # 后台服务 │ ├── bin # 程序启动和渲染 │ ├── database # 存放页面所需要的json数据 │ ├── public # 前端静态资源存放位置 │ ├── routes # 路由于请求接口管理 │ ├── views # 前端模板存放位置 │ ├── app.js # 后台服务入口 ├── src # 程序源文件 │ ├── main.js # 程序启动和渲染 │ ├── components # 全局组件 │ ├── containers # 路由页面容器组件 │ ├── layouts # 主页结构 │ ├── static # 静态文件 │ ├── styles # 样式文件 │ ├── store # Redux管理 │ └── routes # 前端路由管理 └
主要特色功能概览
1. react路由组件是通过异步进行加载的,从而优化页面加载时间,详情请参考最好用的脚手架。
2. 通过组件设计思想实现电影院详情中图片滑动变速、选中动画等功能,源码位置在/react-taopiaopiao/src/routes/CinemaDetail/components/Film.js
3. 采用redux管理每次加载数据自动判断是否需要显示loading,源码位置在/react-taopiaopiao/src/store/request.js
4. 使用阿里巴巴ant-design-mobile的ui库来实现城市分类选择等样式,详情请参考Mobile UI
...
react与vue的简单比较
既然都用了react和vue都构建了淘票票这个项目,那么就得来简单扯扯着两者简单的比较,其他童鞋如果不同的观点请留言指出。
相同点:
1. 两者都是轻量级,只专注状态到页面或者组件的映射。
2. vue2.0和react都可以使用虚拟DOM快速渲染、服务端渲染。
3. 响应式系统,当数据改变了,就会自动更新界面。
4. 都拥有优秀的社区来提供各式各样的解决方案。
不同点:
1. 代码风格:vue单文件组件是以模板+javascript+css呈现的,react推荐做法是 JSX + inline style,前者更容易被web开发人员所接受。
2. 响应式数据:vue提供反应式的数据,当数据改动时,界面就会自动更新,而react里面需要调用setState方法。
3. 学习成本:vue提供许多简单易用的api,相对来说,新手更容易快速掌握。
4. 优化方案:对于复杂应用,react的虚拟DOM需要通过shouldComponentUpdate来判断是否需要渲染页面,而vue数据是依赖追踪,默认就是优化状态的。
5. 生态社区:react相对于vue的生态社区要庞大多,内容也是比较丰富的。
...
这里只是做简单的对比,如果对于一个新人,对于这两者的学习,建议先撸vue,原因在上面对比已经体现出来了,?。
最后,希望我的贡献可以帮助到你。
其他
vue2.0实现的淘票票仓库地址:https://github.com/canfoo/vue2.0-taopiaopiao
react-native实现的淘票票仓库地址:https://github.com/canfoo/react-native-taopiaopiao
转载于:https://www.cnblogs.com/canfoo/p/6394761.html
react构建淘票票webapp,及react与vue的简单比较。相关推荐
- vue2.0构建淘票票webapp
项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...
- 使用Spring Boot,JHipster和React构建照片库PWA
"我喜欢编写身份验证和授权代码." 〜从来没有Java开发人员. 厌倦了一次又一次地建立相同的登录屏幕? 尝试使用Okta API进行托管身份验证,授权和多因素身份验证. 从本质上 ...
- 支付宝老将樊路远加盟阿里影业 淘票票将成下一个支付宝?
2017年8月2日晚上,阿里巴巴发布的一则消息让文娱圈炸了!阿里巴巴文化娱乐集团董事长兼CEO俞永福宣布,阿里巴巴合伙人樊路远将加入阿里大文娱大班委,出任阿里影业集团公司CEO. 对还在纠缠中的猫眼和 ...
- 使用Compose实现淘票票选择电影座位的效果
关注公众号学习更多知识 这是一篇去年就写好的博客 起因 新年要来了,看电影是我们新年中必不可少的娱乐项目,那么看电影的时候你是否有想过选座位的空间是如何实现的呢,座位优秀的程序员,我就想到了,今天就带 ...
- 08-Flask之淘票票(前后端分离)
一.区域选择模块 数据库建模 from App.ext import db# 字母模型类 class Letter(db.Model):id = db.Column(db.Integer, prima ...
- react构建小程序框架及remax的工作原理
1.为什么要用 React 来构建小程序? react生态体系完善. 自Facebook在2013年5月开源React,经历了7年多的发展,react的社区生态体系非常庞大,若是使用react来构建小 ...
- react hooks_使用Spring Boot,JHipster和React构建照片库PWA
react hooks "我喜欢编写身份验证和授权代码." 〜从来没有Java开发人员. 厌倦了一次又一次地建立相同的登录屏幕? 尝试使用Okta API进行托管身份验证,授权和多 ...
- 猫眼、淘票票环伺 豆瓣影评危机被指公信力下降
猫眼.淘票票"环伺",豆瓣评分被指公信力下降 豆瓣影评"危机" 李甜,吴可仲 作为"影视风向标",豆瓣在评分与评论上的"公信力&q ...
- todoist 无法登陆_通过构建Todoist克隆将您的React技能提升到一个新的水平
todoist 无法登陆 In this intermediate React course from Karl Hadwen, you will learn how to create the po ...
最新文章
- Web App、Hybrid App与Native App的设计差异
- 【IM】关于集成学习Bagging和Boosting的理解
- 【mongoDB】测试使用gridfs,配置一个分片服务器集群
- react 用html插件,VSCode拓展插件推荐(HTML、Node、Vue、React开发均适用)-Go语言中文社区...
- (计算机组成原理)第二章数据的表示和运算-第二节1:定点数的表示(原码、反码、补码和移码)
- APP中某个页面巨卡
- Linux之DHCP+tftp+syslinux+PXE+Cobbler
- centos7桌面脚本双击运行
- python词云图生成脚本
- 5G前传从无源到半有源平滑演进解决方案
- Android 更换 APP logo 无效问题处理
- 2022-2028全球与中国制粒机市场现状及未来发展趋势
- IO流-常用的IO流总结
- 如何清除掉“无法删除”的顽固文件
- 深入理解什么是LSM-Tree
- 207最新android书籍,《最强Android书 架构大剖析》PDF(高清版)
- html滚动字幕如何控制位置,怎么制作滚动字幕 在视频任意位置加动态广告字幕 控制字幕动画的时间...
- ROS通信机制--键盘控制乌龟运动线速度角速度XYZ值的解释
- 编写优质嵌入式C代码
- 24节气的算法 c语言,制作二十四节气表的一个思路(C语言版)(原创)