從小白到使用antd+react+react-router+issue+es6搭建博客

概述

自己是前端小白，學過html,css,js的各類書，各類視屏，就是沒有接觸web開發的內容。偶然看見一個朋友用react搭建了一個博客，因而本着程序員無所不能的精神，也嘗試着用react搭建博客。

下面記錄我從小白到搭建博客的過程，沒有寫方法，由於網上已經不少方法了。

這是我搭建的博客地址：饅頭加梨子

結論

先說結論，我學到了什麼：

1. 單頁面web開發的流程。把要作的分爲一個個模塊，逐個實現，而後用webpack設置，開發並打包上線。

2. antd庫的使用和一些組件的配置參數。

3. 相關知識：SPA, react, react-router4, antd, fetch, promise, es6等。

4. 怎麼搜索？在github和相關社區搜索，一般能找到意想不到的驚喜。

5. 程序員怎麼學習？必定要手打教程，並思考爲何要這麼作。

我碰到了哪些難點：

• webpack配置。一開始我沒有使用腳手架，之前只打過webpack的demo可是忘了，看了不少資料才學會webpck的實際使用。
• antd庫組件配置。之前沒用過這種庫，徹底不知道怎麼下手，後來在官網看見每一個例子都有代碼demo，才慢慢熟悉的。
• router4中的路由賦值。爲了把博客打形成SPA的形式，我思考了不少。
• fetch內容報錯。我看了不少遍關於promise和生命週期的內容，最後經過添加loading解決。
• 添加目錄。給文章加上錨點和經過錨點跳轉，爲了更優雅的編程，我遇到了不少坑。

搜索參考博客

既然本身是小白，那麼固然要去參考其餘人的博客，尋找他們的優勢而且學下來呀。

那怎麼搜呢？我主要經過這些渠道搜索：

• 百度
• bing
• react中文社區
• github
• segmentfault
• 阮一峯的日誌

通過一番搜索，我最後定下來參考這幾個大神的博客，他們都是用react搭建的，而且都能在github上找到源碼。

• reminia
• cobish
• water

而後樣式參考這幾個大神的博客，他們不是用react搭建的，可是樣式很好看。

• 我本身的博客
• Brook's Blog
• 早起搬磚

學習react

做爲一個小白，確定要先學習react，那麼去react中文官網把文檔看一遍，而且把教程手打一遍啦。

思考博客架構

我要一個什麼樣的博客？

個人博客要有如下特色：

1. 一個好看時髦的導航欄。
2. 一個自動生成的目錄(文章界面)。
3. 一個回到頂端的功能。
4. 要有代碼高亮。
5. 一個分類的功能。(沒作)
6. 一個加載的時候的進度條。(沒作)
7. 要簡潔，扁平化。
8. 要響應式。
9. 要速度快。

我還進行了以下思考：

1. 我不要首頁和側欄。由於顯得太複雜了。

2. 我不要翻頁。由於我有回到頂端功能，並且我如今寫的文章還少，不須要翻頁。並且阮一峯的日誌也沒有作翻頁功能。

單頁面軟件SPA

我以前沒有接觸SPA，可是在搜索的過程當中偶然碰到了，以爲頗有必要學習一下，由於這是當代web開發的分水嶺。因而去看了一本書《單頁Web應用:JavaScript從前端到後端》。

這是我學完SPA以後寫的一篇感想博客：當咱們說前端，咱們在說什麼。

SPA讓我瞭解到了模塊化開發的思想，也解決了個人一個需求：速度快。

路由

路由是SPA，也是react中很重要的一個功能。

因而我去學習了react-router4，而且把react-router-tutorial本身手打了一遍。而且查資料補充了redirect等內容。

antd

在學習water博客的時候接觸了一個頗有意思的ui庫：antd。我之前也沒有用過這種類型的庫，因而本着好奇的精神，也打算用這個庫。

我學習了這個庫裏面的這些組件：Button, Icon, Layout, Affix, Dropdown, Menu, Card, Collapse, List, Tag, BackTop。在學習的時候踩了不少坑，也懂了這些組件的一些配置參數。

antd也解決了個人一個需求：響應式。

es6

雖然我在react中文官網的教程裏面學習了部分es6語法，可是在學習別人博客的時候碰到了不少es6語法，我本身也有強迫症，能用es6語法的地方儘可能用es6語法。好比我就很不喜歡用if-else，能用map+箭頭函數的地方我就用map+箭頭函數。

因而我學習並實踐了以下es6的知識：模板對象，箭頭函數，解構賦值，類，promise，let和const。

路由賦值

路由路由，仍是路由。

學過SPA以後，我以爲有必要把博客打形成SPA的形式。因而各類思考和查資料。最後打形成了目前這種形式：只在打開博客的時候發送http請求，其他操做不發送http請求，直接由瀏覽器完成。

其實還有另外一種實現方法，就是利用redux，真的是與個人想法不謀而合，因爲我尚未學，並且redux文檔不建議小型網站使用redux，因此我沒有用這種方法。

這個時候我總結了一篇博文：react在router中傳遞數據的2種方法。

fetch

怎麼獲取博客內容呢？

我一開始打算用老辦法：寫完markdown文件就上傳至github，而後一個個解析md文件。可是這個方案有個缺點，就是每次寫完都要build上傳很是麻煩。強迫症迫使我尋找更好的方法。偶然我發現用issue寫博客是真的好，因而最後改用從issue獲取博客內容。

那麼怎麼獲取呢？在別人博客中找了三種方案：

• 用es5原生的fetch方法。
• 用isomorphic-fetch庫的fetch方法。
• 用axios庫的相關方法。

最後我決定用用isomorphic-fetch庫的fetch。

代碼高亮

一開始我還不知到什麼是代碼高亮，只是看資料各類說代碼高亮。代碼寫着寫着才發現，文章頁面的代碼區很單調啊，因此這才醒悟原來是代碼區的代碼高亮。

我最後用的別人現成的方案：marked結合highlight.js設置代碼高亮。

fetch報錯

因爲fetch方法返回的是promise對象，有必定的延遲，因此模塊的render函數開始渲染的時候並不能取到數據，而後marked庫各類報錯。

因而我去看了又看promise的文檔和組件生命週期的文檔。

最後經過在模塊的state屬性裏面添加一個loading屬性成功解決。

目錄和錨點

因爲antd沒有在文章界面自動生成目錄的組件，因而我本身動手寫了自動生成目錄的組件。

目錄要不要跳轉功能？個人目錄必需要不同凡響啊，強迫症須要我添加這個功能。

在用js寫跳轉功能的時候，我才發現react的錨是個巨坑，由於react的路由，es5的#錨點不能正確被解析，因而我又去查資料，最後用scrollIntoView解決了。原本覺得解決方法超麻煩的，最後一看真的超簡單。

路由污染

對，路由路由，仍是路由。

搭建快完成了，搬上github能夠看了，可是我發現，我github上的其它githubPage都變成了個人博客了。

爲了解決這個問題，我只好把博客放在個人github的一個分目錄下面。又要改路由。

改好路由以後我又發現，刷新鍵不能用了。網上查資料，最後看大牛router4的原理解析裏面說，須要在服務端解決。可是我是github博客，沒有服務端。也不能不支持刷新鍵啊，並且不解決的話，收藏文章也不支持了，只能收藏首頁。

因爲強迫症，我只好又把博客放在github小號上面，來讓別人體驗完整的功能。

收尾階段

這個時候有2個問題。

一個是導航欄太單調了，須要加入一些其它的模塊，通過考慮，我加入了做品和關於模塊。這個沒有什麼難度。

另外一個是css樣式，我參考我本身在博客園的博客和其餘人的博客，一下就設置好了，沒什麼難度。