使用react技術棧完全重寫一個vue書城專案

使用react技術棧完全重寫一個vue書城專案

本專案是在之前一個vue專案基礎上,用react技術棧重寫的一個書城專案

vue版本地址

本專案地址

預覽地址

專案說明

本專案是一個react nodejs mysql構建的移動書城專案,資料是通過nodejs爬蟲爬取,儲存在mysql中,專案api通過express構建,前端部分是react技術棧。關於爬蟲和api的詳情請參考vue版本的說明,地址

在寫這個之前對於vue算是比較熟練了,轉到react,jsx的語法研究了兩天,然後研究了一下redux,發現跟vuex是類似的東西,上手起來也比較快。

然後開始用react全家桶重寫這個專案,利用空餘時間前後花了大概不到一個星期的樣子,再之後花了一兩天新增了vue版本沒有的書架功能。

專案是基於create-react-app構建的,增加了sass的支援,元件熱過載還未支援,加入了react-router和redux。

總結一下,vue和react的理念我認為是差不多的,重點都是元件化,state、props也是類似的作用,vuex和redux也有一定程度的類似,二者區別可能就是語法不一樣了,vue寫起來更像傳統的html、js、css開發方式,jsx的寫法有的人可能難以接受,但是也不難掌握,另外可能react對於js的掌握程度要求更高一些。

所以我認為,vue和react如果你熟悉其中之一,我相信上手另一個是很快的,因為核心理念你已經掌握了,剩下了就是語法了,vuex和redux也是一樣。

本專案難點我認為是書架功能,也都寫了註釋,有類似想法的可以相互印證。

功能

[x] 首頁推薦

[x] 書籍詳情

[x] 相似推薦

[x] 分類檢視

[x] 閱讀器

[x] 章節跳轉

[x] 更改字型

[x] 更換主題

[x] 夜間模式

[x] 翻頁瀏覽

[x] 本地儲存(儲存每本書的閱讀進度)

[x] 書架

專案截圖