前言
前段時間使用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