現(xiàn)在不少技術(shù)人有記錄的習(xí)慣,記錄與Bug奮戰(zhàn)的故事,記錄一些實踐心得,本文作者也是一個喜歡記錄的程序員,并且喜歡在博客上寫文章,這次他將講述自己用React、GraphQL和Cosmic JS創(chuàng)建一個簡易博客的經(jīng)歷,這是一個建立在現(xiàn)代技術(shù)堆棧上的輕量級博客,具體如何做呢?(Github源代碼、demo視頻以及在Cosmic JS上安裝簡易React博客等內(nèi)容鏈接均在文末提供)
1、入門
第一步當然是確保你的機器上安裝了Node.js和NPM,如果沒有,請訪問Node.js官網(wǎng)以安裝最新版本。
然后,開始為應(yīng)用程序創(chuàng)建文件夾。在你喜歡的終端中運行以下命令:
接下來,讓我們添加一個package.json文件導(dǎo)入應(yīng)用程序的所有依賴關(guān)系:
vim package.json
將以下內(nèi)容添加到package.json文件中:
這是一個相當輕的應(yīng)用程序依賴列表。所以要安裝的是:
·Axios為基于承諾的HTTP客戶端從Cosmic JS GraphQL API中獲取內(nèi)容。
·Next.js作為React Universal框架。
·Next routes 動態(tài)路由。
·Express為服務(wù)器端Web應(yīng)用程序框架。
·React處理用戶界面。
腳本是開始生產(chǎn)和開發(fā)應(yīng)用程序所必需的。
運行以下命令來安裝依賴關(guān)系:
· npm i
2、建立博客
接下來,讓我們開始建立博客頁面。首先,創(chuàng)建一個頁面文件夾并添加index.js文件:
· vim index.js
將以下內(nèi)容添加到index.js中:
這個過程,會發(fā)生幾件事情:
·導(dǎo)入基本模塊:Axios,Lodash、其他幫助器以及組件。
·拉一些部分:頁眉和頁腳,你可以從GitHub的代碼庫中引用這些部分。
·查詢Cosmic JS GraphQL API只返回我們需要的東西:_id,type_slug,slug,title,metadata和created_at。
·把元素中的主要組件設(shè)置為cosmic對象,并使用lodash解析Post和Global Object類型。
·將帖子數(shù)組數(shù)據(jù)和圖片網(wǎng)址返回主要blog Feed。
3、單一post查詢
對于單個post,添加一個post屬性到props。通過將query.slug與Object slug進行匹配找到Post:
▲(完整代碼請查看Github)
結(jié)論
這是Simple React Blog簡要版本,可以在Cosmic JS Apps(https://cosmicjs.com/apps?utm_source=syndicate&utm_medium=post&utm_content=sitepoint-dec17)頁面下載。完整的代碼庫包括一個單一頁面視圖,以及可以查看每一次提交的更改。在GitHub上查看完整的代碼庫,并將應(yīng)用程序安裝到Cosmic JS Bucket中,從Cosmic JS儀表板單擊幾下即可部署此應(yīng)用程序。
Github源代碼地址:https://github.com/cosmicjs/simple-react-blog?utm_source=syndicate&utm_medium=post&utm_content=sitepoint-dec17
DEMO視頻地址:https://cosmicjs.com/apps/simple-react-blog/demo?utm_source=syndicate&utm_medium=post&utm_content=sitepoint-dec17
在Cosmic JS上安裝簡易React博客:https://cosmicjs.com/apps/simple-react-blog?utm_source=syndicate&utm_medium=post&utm_content=sitepoint-dec17