前言
前段时间使用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，原因在上面对比已经体现出来了，??。
最后，希望我的贡献可以帮助到你。
分类: react
4
0
? 上一篇：vue2.0构建淘票票webapp
posted on 2017-02-14 00:53 canfoo#! 阅读(1476) 评论(14) 编辑 收藏
评论
#1楼 2017-02-14 08:15thirking
情人节还在码代码。。。哎
#2楼 2017-02-14 08:46秦随境迁
所以你个人有偏向哪个嘛？或者推荐新人学习的话你会推荐哪个？
#3楼[楼主] 2017-02-14 10:01canfoo#!
@ thirking
同叹，哈哈
#4楼[楼主] 2017-02-14 10:03canfoo#!
@ 秦随境迁
我比较喜欢react，但是react的学习成本会比较高。推荐新手先入门vue，vue简洁易用，而且比较符合web开发人员的习惯。
#5楼 2017-02-14 11:00hlzfr
<img src="http://images2015.cnblogs.com/blog/696208/201702/696208-20170214110033519-1343411092.png" alt="" border="0" "="" style="border: 0px; max-width: 400px;">
#6楼 2017-02-14 11:01hlzfr
楼主，npm run dev报这个错怎么解决呢
#7楼[楼主] 2017-02-14 11:18canfoo#!
@ hlzfr
使用cnpm install安装依赖包的吗
#8楼 2017-02-14 11:20hlzfr
嗯嗯，是的，现在我跳过了这一步，npm run deploy后直接在9000端口下可以访问
#9楼[楼主] 2017-02-14 14:26canfoo#!
@ hlzfr
嗯，9000是另一个服务了。根据你的截图，我估计是在react-taopiaopiao目录下的依赖包没装好，如果你确定装好的话，可以试试换一下node版本。
#10楼[楼主] 2017-02-16 10:40canfoo#!
有特别疑问的可以进609228927群
#11楼 2017-02-21 08:09cyberspace
能不能整个真实的app，比如 react-native ，哈哈
#12楼[楼主] 2017-02-21 09:36canfoo#!
@ cyberspace
有时间的话，也会打算搞一下的，哈哈
#13楼 2017-05-01 11:01Michael_Cyrus
你好，运行 npm run dev 报错，能帮我解决下吗？谢谢！
ERROR in ./src/main.js
Module parse failed: F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\src\main.js Unexpected token (77:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (77:2)
at Parser.pp$4.raise (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:2221:15)
at Parser.pp.unexpected (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:603:10)
at Parser.pp$3.parseIdent (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:2189:12)
at Parser.pp$3.parsePropertyName (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:2052:101)
at Parser.pp$3.parseObj (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:1988:14)
at Parser.pp$3.parseExprAtom (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:1805:19)
at Parser.pp$3.parseExprSubscripts (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExprList (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:2165:22)
at Parser.pp$3.parseNew (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:1927:52)
at Parser.pp$3.parseExprAtom (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:1816:19)
at Parser.pp$3.parseExprSubscripts (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (F:\WorkSpace\WebStorm\VUE\node_modules\vue2.0-taopiaopiao\node_modules\._acorn@3.3.0@acorn\dist\acorn.js:1692:19)
http://www.cnblogs.com/canfoo/p/6394761.html
更多精彩分享
- RxSwift 系列(九) -- 那些难以理解的概念 前言 2017-07-26 15:50:59.93
- 2017年读书计划 前言 2017-07-19 16:50:22.993
- 在Windows上安装Elasticsearch v5.4.2 前言 2017-07-16 16:08:29.397
- OpenStack（企业私有云）万里长征第四步——DevStack整体安装规划及使用 一、前言 2017-07-12 13:46:56.913
- Lombok : 让你写 Java代码像C#一样爽 前言 2017-07-07 15:45:30.583
- [前言] 实现一个Android电子书阅读APP 2017-06-08 14:37:13.673
- 小议短网址系统的设计（有些时候，需要换个角度思考问题） 前言 2017-06-06 15:15:54.887
- 刨根究底正则表达式之零——前言 2017-06-01 17:09:10.737
- 线程也疯狂----线程同步（1） 前言 2017-05-19 14:45:53.51
- 理解Node.js(译文) 前言 2017-05-18 15:16:35.77
2017年读书计划 前言