前言
經(jīng)過一段時(shí)間的React學(xué)習(xí)泉坐，React和Vue的開發(fā)確實(shí)有很大的不同，但都是MVVM框架和單頁應(yīng)用菊霜，因此上手沒有很大的難度，但個(gè)人感覺上手比Vue要難點(diǎn)济赎。這次用React+Redux仿簡書首頁和文章詳情頁這樣一個(gè)小demo鉴逞，以此來加深對react的了解，源碼地址：github司训。受gif圖大小影響构捡，以下動(dòng)態(tài)圖如加載過慢請耐心等待。
技術(shù)棧
前端
- react：用于構(gòu)建界面的MVVM框架
- redux：數(shù)據(jù)的集中狀態(tài)管理壳猜，方便快捷實(shí)現(xiàn)組件間通信
- styled-components：以組件化的思想編寫CSS樣式
- react-redux：組件從redux中讀取數(shù)據(jù)勾徽，并向store分發(fā)actions以更新數(shù)據(jù)
- immutable：一種持久化數(shù)據(jù)結(jié)構(gòu),防止state對象被錯(cuò)誤賦值
后端
- koa：基于Nodejs封裝的一個(gè)框架
- koa-generator：創(chuàng)建koa項(xiàng)目所用的腳手架
- koa-router：后端服務(wù)路由控制
- MySQL：數(shù)據(jù)庫
- koa2-cors：處理跨域
項(xiàng)目預(yù)覽
首頁
效果圖.gif
文章詳情頁
效果圖.gif
實(shí)現(xiàn)功能
- 搜索框的動(dòng)畫效果
- 文章列表加載更多
- 換一批功能(原理同上:分頁)
- 回到頂部
- 詳情頁展示
結(jié)語
雖然這只是一個(gè)簡單的小demo，但是對于自己的技能提升還是有一定的幫助统扳。在開發(fā)的過程中也遇到了一些問題喘帚，遇到問題去解決問題也是提升自己能力的過程畅姊。如果文中有什么錯(cuò)誤或者不足之處，歡迎大家斧正吹由！前端小白在線求教^^若未！
如果你喜歡這篇文章或者可以幫到你，不妨點(diǎn)個(gè)贊吧倾鲫！
