react仿簡書首頁恐仑、文章詳情頁

前言

經(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è)贊吧倾鲫!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末粗合,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子乌昔,更是在濱河造成了極大的恐慌隙疚,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,204評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件磕道,死亡現(xiàn)場離奇詭異供屉,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)捅厂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評論 3 395
  • 文/潘曉璐 我一進(jìn)店門贯卦,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人焙贷,你說我怎么就攤上這事撵割。” “怎么了辙芍?”我有些...
    開封第一講書人閱讀 164,548評論 0 354
  • 文/不壞的土叔 我叫張陵啡彬,是天一觀的道長。 經(jīng)常有香客問我故硅,道長庶灿,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,657評論 1 293
  • 正文 為了忘掉前任吃衅,我火速辦了婚禮往踢,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘徘层。我一直安慰自己峻呕,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,689評論 6 392
  • 文/花漫 我一把揭開白布瘦癌。 她就那樣靜靜地躺著,像睡著了一般跷敬。 火紅的嫁衣襯著肌膚如雪讯私。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,554評論 1 305
  • 那天,我揣著相機(jī)與錄音斤寇,去河邊找鬼桶癣。 笑死,一個(gè)胖子當(dāng)著我的面吹牛抡驼,可吹牛的內(nèi)容都是我干的鬼廓。 我是一名探鬼主播,決...
    沈念sama閱讀 40,302評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼致盟,長吁一口氣:“原來是場噩夢啊……” “哼碎税!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起馏锡,我...
    開封第一講書人閱讀 39,216評論 0 276
  • 序言:老撾萬榮一對情侶失蹤雷蹂,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后杯道,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體匪煌,經(jīng)...
    沈念sama閱讀 45,661評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,851評論 3 336
  • 正文 我和宋清朗相戀三年党巾,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了萎庭。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,977評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡齿拂,死狀恐怖驳规,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情署海,我是刑警寧澤吗购,帶...
    沈念sama閱讀 35,697評論 5 347
  • 正文 年R本政府宣布,位于F島的核電站砸狞,受9級特大地震影響捻勉,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜刀森,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,306評論 3 330
  • 文/蒙蒙 一踱启、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧研底,春花似錦埠偿、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽琐凭。三九已至芽隆,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背胚吁。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評論 1 270
  • 我被黑心中介騙來泰國打工牙躺, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人腕扶。 一個(gè)月前我還...
    沈念sama閱讀 48,138評論 3 370
  • 正文 我出身青樓孽拷,卻偏偏與公主長得像,于是被迫代替她去往敵國和親半抱。 傳聞我的和親對象是個(gè)殘疾皇子脓恕,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,927評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 基于Vue的一些資料 內(nèi)容 UI組件 開發(fā)框架 實(shí)用庫 服務(wù)端 輔助工具 應(yīng)用實(shí)例 Demo示例 element★...
    嘗了又嘗閱讀 1,151評論 0 1
  • 終端顯示如下(程序等待響應(yīng)): 打開網(wǎng)頁,輸入“127.0.0.1”窿侈,即本機(jī)地址: 得到響應(yīng):
    EeuwigHr閱讀 129評論 0 0
  • 今天分享一篇我自己的演講稿炼幔。 今晚和大家聊聊我的糗事。 小學(xué)四年級的時(shí)候史简,我是班里的學(xué)習(xí)委員乃秀。每周五我值日,作為值...
    作享其成閱讀 331評論 0 1
  • 銀元圆兵,起源于15世紀(jì)跺讯,始鑄于歐洲,16世紀(jì)傳入中國殉农,光緒年間開始鑄造但直到民國時(shí)期才正式大量發(fā)行成為國幣刀脏。在100...
    小藏說收藏閱讀 1,540評論 0 0
  • 今天是什么日子 起床:08:34 就寢:24:00 天氣:晴 心情:還好 叫我起床的不是鬧鐘是夢想 讀完20本書 ...
    木木碎碎念哇閱讀 81評論 0 0