当前位置: 首页 > 编程日记 > 正文

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

相关文章:

【机器学习】机器学习算法优缺点对比(汇总篇)

作者 | 杜博亚来源 | 阿泽的学习笔记「本文的目的,是务实、简洁地盘点一番当前机器学习算法」。文中内容结合了个人在查阅资料过程中收集到的前人总结,同时添加了部分自身总结,在这里,依据实际使用中的经验,将对此模型…

PLSQL developer 连接不上64位Oracle 解决办法

在64位Windows2003上安装Oracle后,用PLSQL developer去连接数据库出现报错: Could not load "……\bin\oci.dll" OCIDLL forced to…… LoadLibrary(……oci.dll) returned 0 原因: oci.dll是64位的&#xf…

Docker 使用教程

概括  Docker与传统虚拟机的区别 与传统虚拟机的区别  Docker的安装 的安装  Docker daemon , client , containerd  镜像与容器操作  容器运行配置  Docker网络配置 网络配置  Alpine Docker Image  制作自己的 Docker Image …

话说CSS滤镜

作者:http://www.swtv.com.cn/adjunct/nr/css/css.htmAlpha 透明层次:滤镜效果语法:STYLE"filter:filtername(parameter1,parameter2,parameter3...)"其中:filtername为滤镜的名称;parameter1,parameter2等为…

面向隐私AI的TensorFlow深度定制化实践

作者 | Rosetta团队出品 | AI科技大本营(ID:rgznai100)之前我们整体上介绍了基于深度学习框架开发隐私 AI 框架中的工程挑战和可行解决方案。在这一篇文章中,我们进一步结合 Rosetta 介绍如何定制化改造 TensorFlow 中前后端相关组件&#xf…

”拿来搞笑“的大学生活

”拿来搞笑“这词,是我舍友对我说过好几遍,我才觉得这词用来形容我大学的生活再恰当不过了,感谢他送给我这个词。 下面就列一下我大学期间”拿来搞笑“的事情: —:无偿捐血400毫升。当时认为是一件微不足道的事情&…

巧用CSS的Border属性

。作者:冯永曜 来源:黄山村夫 制作过网页的人都有为画线而烦恼的经历,本文介绍的小技巧也许对你有所帮助。我们先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标…

阿里资深算法专家:如何突围大厂算法面试?

2020 届秋招,算法岗灰飞烟灭。最聪明的应届生 / 程序员 ,都在极度竞争中,面临着前所未有的激烈 PK 。学生因“内卷”而迷茫;初级程序员遇职业发展瓶颈而困惑...面对重重压力,苦不堪言。to do list 上写满计划&#xff…

乡下人最嘲笑城里人的16件事,无语了!

一、出门「taxi」,乘电梯上七楼的健身房,然后在跑步机上挥汗如雨。 二、半夜上网,去歌厅、舞厅,困了不睡觉。之后失眠,再吃安眠药。 三、管儿子叫「小兔崽子」,管宠物狗叫儿子。 四、挑最有特色的饭店吃…

2017浅谈面试(一)

2017给自己一个目标,制定一份计划,新的开始,跟随创业团队风险无处不在,不过还是要选好Boss。 2016一个煎熬,悲剧,没发工资的日子,一等就等了5个月,零散的就拿到了一个半月工资&#…

乘风破浪的PTM:两年来预训练模型的技术进展

作者 | 张俊林来源 | 深度学习前沿笔记专栏Bert模型自18年10月推出,到目前为止快两年了。它卜一问世即引起轰动,之后,各种改进版本的预训练模型(Pre-Training Model, PTM)与应用如过江之鲫,层出不穷。Bert及…

DW中CSS属性详解

作者:未知 来源:5D多媒体 在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性,Dreamweaver把这些属性分为Type(类型)、Background(背景)、Block(块)、Box&a…

第十周项目5:贪心的富翁

上机内容:用循环语句完成累加 上机目的:学会循环语句的使用 /* * Copyright (c) 2012, 烟台大学计算机学院 * All rights reserved. * 作 者:孙锐 * 完成日期:2012 年 10 月 31 日 * 版 本 号&…

python requests返回的json对象用json.loads()时转为字典时编码变为了unicode

2019独角兽企业重金招聘Python工程师标准>>> 1.使用simplejson,loads的对象为str,否则还是会转码unicode import simplejson url "" payload {} headers {} r requests.post(url, datapayload, headersheaders)result simplej…

关于Dreamweaver乱码问题的解决方案

原作者&#xff1a;南宫彩虹出处&#xff1a;5D多媒体出现乱码&#xff0c;大致为两种情况&#xff1a; 一是没有标明主页制作所用的文字&#xff0c;这种情况下很简单就可以解决&#xff0c;在<HEAD>区加上<META http-equivContent-Type content"text/html; cha…

百度绝对控股,小度科技独立融资,投后估值200亿元

9月30日&#xff0c;百度宣布旗下智能生活事业群组业务&#xff08;以下简称“小度科技”&#xff09;完成了独立融资协议的签署&#xff0c;本轮融资由百度资本及CPE战略领投、IDG资本跟投&#xff0c;投后估值达约200亿元。作为百度的重要战略业务板块&#xff0c;百度公司对…

Android UI开发第二十五篇——分享一篇自定义的 Action Bar

Action Bar是android3.0以后才引入的&#xff0c;主要是替代3.0以前的menu和tittle bar。在3.0之前是不能使用Action Bar功能的。这里引入了自定义的Action Bar&#xff0c;自定义Action bar也不是完全实现了 Action bar功能&#xff0c;只是在外形上相似。自定义Action bar没有…

ADF12C 在线预览PDF文件 afinlineFrame

转载于:https://blog.51cto.com/feitai/1898433

批量消除虚线框

原作者&#xff1a;星之海洋出处&#xff1a;5D多媒体 各位想必都知道&#xff0c;οnfοcus”this.blur()”这条代码能消除链接时的虚线框&#xff0c;但你有没有想过&#xff0c;如果你的网页上有几个甚至上百个链接&#xff0c;而你又想要去掉上面那些讨厌的虚线框&#xf…

Python实战 | 送亲戚,送长辈,月饼可视化大屏来帮忙!

中秋节介绍中秋节&#xff0c;又称祭月节、月光诞、月夕、秋节、仲秋节、拜月节、月娘节、月亮节、团圆节等&#xff0c;是中国民间的传统节日。中秋节自古便有祭月、赏月、吃月饼、玩花灯、赏桂花、饮桂花酒等民俗&#xff0c;流传至今&#xff0c;经久不息。每年中秋节到&…

lamp一键安装包

lamp一键安装包 http://58.83.226.93/ http://www.centos.bz/lamp/ http://www.centos.bz/ lamp一键安装包 http://58.83.226.93/ http://www.centos.bz/lamp/ http://www.centos.bz/

快节奏的多人游戏同步 - 示例代码和在线演示

这是一个实现我《快节奏的多人游戏同步》系列文章中主要概念的客户端——服务器架构演示示例&#xff08;不包括实例插值&#xff0c;那块我还没弄完&#xff09;建议在阅读完这系列文章后再看这部分。代码是纯JavaScript写的&#xff0c;一页就装下了。少于400行代码&#xff…

探索IE浏览器窗口

探索IE浏览器窗口点燃灵感   星之海洋不知大家是否见过浏览器窗口&#xff08;哎呦&#xff0c;不要打我&#xff01;&#xff09;&#xff0c;其实&#xff0c;不要小瞧了这普普通通的windows&#xff0c;除了常用的window.open()与window.resizeTo()方法来开启窗口外&…

新转机!2020年想裸辞的程序员们注意了

近期&#xff0c;脉脉发布了《2020职场人裸辞现状调研报道》&#xff0c;报道显示2020最让职场人想裸辞的三大原因为&#xff1a;不开心、工资低、没有盼头。报告数据中还显示&#xff0c;工资不满预期是最让人想要裸辞的主要原因&#xff0c;但有超过6成职场人表示&#xff0c…

《ORACLE PL/SQL编程详细》,游标 ,函数,触发器。。

http://www.cnblogs.com/huyong/archive/2012/07/30/2614563.html

【Spark Summit East 2017】Spark化数据引擎

更多精彩内容参见云栖社区大数据频道https://yq.aliyun.com/big-data&#xff1b;此外&#xff0c;通过Maxcompute及其配套产品&#xff0c;低廉的大数据分析仅需几步&#xff0c;详情访问https://www.aliyun.com/product/odps。 本讲义出自Rohan Sharma在Spark Summit East 20…

将文本随意插入网页表单的 textarea

原作者&#xff1a;我佛山人出处&#xff1a;5D多媒体在网页表单的<textarea>中&#xff0c;我们有时候需要将文本插入到光标所在的地方&#xff0c;或是替换掉选区内的文字。这时候&#xff0c;用普通的.value"text"就无能为力了。下面这段测试代码可以解决这…

sharepoint 备份还原

sharepoint 2010备份和还原 sharepoint 2010中只有两种备份和还原的方法: 第一种: 使用命令行Stsadm来进行备份与还原 一. 备份操作 1, 首先创建一个批处理文件backup.bat,内容如下. "%systemdrive%\program Files\Common Files\Microsoft Shared\web server extension…

FCOS:全卷积一阶段Anchor Free物体检测器,多种视觉任务的统一框架

作者 | ronghuaiyang来源 | AI公园导读&#xff1a;这是众多Anchor Free中比较有影响力的一篇文章&#xff0c;不光是效果好&#xff0c;而且思路清楚&#xff0c;简单&#xff0c;不需要任何trick&#xff0c;并将众多的视觉任务统一到了一个框架中&#xff0c;值得一看。介绍…

Learn Jenkins the hard way (0) - Jenkins的罪与罚

写在开头 Jenkins是非常流行的开源的持续交付平台&#xff0c;拥有丰富的插件、文档与良好的社区。是国内大多数公司私有持续集成方案CI/CD服务器的选型。开发者可以快速的通过Jenkins搭架符合自己业务场景的pipeline&#xff0c;结合大量的开源插件&#xff0c;可以轻松的满足…