摘要：官方文檔中文文檔基本使用注意一定要在根目錄的中聲明，要不然點(diǎn)擊任何鏈接都無(wú)法跳轉(zhuǎn)。官方文檔中文文檔簡(jiǎn)單的來(lái)說(shuō)，每一次的修改狀態(tài)都需要觸發(fā)，然而其實(shí)項(xiàng)目中我現(xiàn)在還沒(méi)用到修改數(shù)據(jù)。。。

學(xué)習(xí) React 的過(guò)程中實(shí)現(xiàn)了一個(gè)個(gè)人主頁(yè)，沒(méi)有復(fù)雜的實(shí)現(xiàn)和操作，適合入門(mén) ~

原文地址：https://github.com/axuebin/react-blog/issues/17

這個(gè)項(xiàng)目其實(shí)功能很簡(jiǎn)單，就是常見(jiàn)的主頁(yè)、博客、demo、關(guān)于我等功能。

頁(yè)面樣式都是自己寫(xiě)的，黑白風(fēng)格，可能有點(diǎn)丑。不過(guò)還是最低級(jí)的 CSS ，準(zhǔn)備到時(shí)候重構(gòu) ~

如果有更好的方法，或者是我的想法有偏差的，歡迎大家交流指正

歡迎參觀：http://axuebin.com/react-blog

Github：https://github.com/axuebin/react-blog

ES6：項(xiàng)目中用到 ES6 的語(yǔ)法，在寫(xiě)的過(guò)程中盡量使用，可能有的地方?jīng)]想到

React

React-Router：前端路由

React-Redux：狀態(tài)管理

webpack：打包

marked：Markdown渲染

highlight.js：代碼高亮

fetch：異步請(qǐng)求數(shù)據(jù)

eslint：代碼檢查

antd：部分組件懶得自己寫(xiě)。。

由于不是使用 React 腳手架生成的項(xiàng)目，所以每個(gè)東西都是自己手動(dòng)配置的。。。

打包用的是 webpack 2.6.1，準(zhǔn)備入坑 webpack 3 。

官方文檔：https://webpack.js.org/

中文文檔：https://doc.webpack-china.org/

對(duì)于 webpack 的配置還不是太熟，就簡(jiǎn)單的配置了一下可供項(xiàng)目啟動(dòng)：

var webpack = require("webpack");
var path = require("path");

module.exports = {
  context: __dirname + "/src",
  entry: "./js/index.js",
  module: {
    loaders: [
      {
        test: /.js?$/,
        exclude: /(node_modules)/,
        loader: "babel-loader",
        query: {
          presets: ["react", "es2015"]
        }
      }, {
        test: /.css$/,
        loader: "style-loader!css-loader"
      }, {
        test: /.js$/,
        exclude: /(node_modules)/,
        loader: "eslint-loader"
      }, {
        test: /.json$/,
        loader: "json-loader"
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "bundle.js"
  }
}

webpack 有幾個(gè)重要的屬性：entry、module、output、plugins，在這里我還沒(méi)使用到插件，所以沒(méi)有配置 plugins 。

module 中的 loaders：

babel-loader：將代碼轉(zhuǎn)換成es5代碼

css-loader：處理css中路徑引用等問(wèn)題

style-loader：動(dòng)態(tài)把樣式寫(xiě)入css

eslin-loader：使用eslint

包管理現(xiàn)在使用的還是 NPM 。

官方文檔：https://docs.npmjs.com/

npm init

npm install

npm uninstall

關(guān)于npm，可能還需要了解 dependencies 和 devDependencies 的區(qū)別，我是這樣簡(jiǎn)單理解的：

dependencies：項(xiàng)目跑起來(lái)后需要使用到的模塊

devDependencies：開(kāi)發(fā)的時(shí)候需要用的模塊，但是項(xiàng)目跑起來(lái)后就不需要了

項(xiàng)目使用現(xiàn)在比較流行的 ESLint 作為代碼檢查工具，并使用 Airbnb 的檢查規(guī)則。

ESLint：https://github.com/eslint/eslint

eslint-config-airbnb：https://www.npmjs.com/package/eslint-config-airbnb

在 package.json 中可以看到，關(guān)于 ESLint 的包就是放在 devDependencies 底下的，因?yàn)樗皇窃陂_(kāi)發(fā)的時(shí)候會(huì)使用到。

在 webpack 配置中加載 eslint-loader：

module: {
  loaders: [
      {
        test: /.js$/,
        exclude: /(node_modules)/,
        loader: "eslint-loader"
      }
    ]
  }

創(chuàng)建 .elintrc文件：

{
  "extends": "airbnb",
  "env":{
    "browser": true
  },
  "rules":{}
}

然后在運(yùn)行 webpack 的時(shí)候，就會(huì)執(zhí)行代碼檢查啦，看著一堆的 warning 、error 是不是很爽~

這里有常見(jiàn)的ESLint規(guī)則：http://eslint.cn/docs/rules/

由于是為了練習(xí) React，暫時(shí)就只考慮搭建一個(gè)靜態(tài)頁(yè)面，而且現(xiàn)在越來(lái)越多的大牛喜歡用 Github Issues 來(lái)寫(xiě)博客，也可以更好的地提供評(píng)論功能，所以我也想試試用 Github Issues 來(lái)作為博客的數(shù)據(jù)源。

API在這：https://developer.github.com/v3/issues/

我也沒(méi)看完全部的API，就看了看怎么獲取 Issues 列表。。

https://api.github.com/repos/axuebin/react-blog/issues?creator=axuebin&labels=blog

通過(guò)控制參數(shù) creator 和 labels，可以篩選出作為展示的 Issues。它會(huì)返回一個(gè)帶有 issue 格式對(duì)象的數(shù)組。每一個(gè) issue 有很多屬性，我們可能不需要那么多，先了解了解底下這幾種：

// 為了方便，我把注釋寫(xiě)在json中了。。
[{
  "url": ,  // issue 的 url
  "id": ,  // issue id ， 是一個(gè)隨機(jī)生成的不重復(fù)的數(shù)字串 
  "number": ,  // issue number ， 根據(jù)創(chuàng)建 issue 的順序從1開(kāi)始累加
  "title": ,  // issue 的標(biāo)題
  "labels": [], // issue 的所有 label，它是一個(gè)數(shù)組
  "created_at": , // 創(chuàng)建 issue 的時(shí)間
  "updated_at": , // 最后修改 issue 的時(shí)間
  "body": , // issue 的內(nèi)容
}]

項(xiàng)目中使用的異步請(qǐng)求數(shù)據(jù)的方法時(shí) fetch。

關(guān)于 fetch ：https://segmentfault.com/a/1190000003810652

使用起來(lái)很簡(jiǎn)單：

fetch(url).then(response => response.json())
      .then(json => console.log(json))
      .catch(e => console.log(e));

在 Github 上查找關(guān)于如何在 React 實(shí)現(xiàn) markdown 的渲染，查到了這兩種庫(kù)：

react-markdown：https://github.com/rexxars/react-markdown

marked：https://github.com/chjj/marked

使用起來(lái)都很簡(jiǎn)單。

如果是 react-markdown,只需要這樣做：

import ReactMarkdown from "react-markdown";

const input = "# This is a header

And this is a paragraph";
ReactDOM.render(
    ,
    document.getElementById("container")
);

如果是marked，這樣做：

import marked from "marked";

const input = "# This is a header

And this is a paragraph";
const output = marked(input);

這里有點(diǎn)不太一樣，我們獲取到了一個(gè)字符串 output，注意，是一個(gè)字符串，所以我們得將它插入到 dom中，在 React 中，我們可以這樣做：

由于我們的項(xiàng)目是基于 React 的，所以想著用 react-markdown會(huì)更好，而且由于安全問(wèn)題 React 也不提倡直接往 dom 里插入字符串，然而在使用過(guò)程中發(fā)現(xiàn)，react-markdown 對(duì)表格的支持不友好，所以只好棄用，改用 marked。

代碼高亮用的是highlight.js：https://github.com/isagalaev/highlight.js

它和marked可以無(wú)縫銜接~

只需要這樣既可：

import hljs from "highlight.js";

marked.setOptions({
  highlight: code => hljs.highlightAuto(code).value,
});

highlight.js是支持多種代碼配色風(fēng)格的，可以在css文件中進(jìn)行切換：

@import "~highlight.js/styles/atom-one-dark.css";

在這可以看到每種語(yǔ)言的高亮效果和配色風(fēng)格：https://highlightjs.org/

可以看之前的一篇文章：https://github.com/axuebin/react-blog/issues/8

可以看之前的一篇文章：https://github.com/axuebin/react-blog/issues/9

項(xiàng)目中前端路由用的是 React-Router V4。

官方文檔：https://reacttraining.com/react-router/web/guides/quick-start

中文文檔：http://reacttraining.cn/

Blog

注意：一定要在根目錄的 Route 中聲明 exact，要不然點(diǎn)擊任何鏈接都無(wú)法跳轉(zhuǎn)。

比如我現(xiàn)在要在博客頁(yè)面上點(diǎn)擊跳轉(zhuǎn)，此時(shí)的 url 是 localhost:8080/blog,需要變成 localhost:8080/blog/article，可以這樣做：

這樣就可以跳轉(zhuǎn)到 localhost:8080/blog/article 了，而且還傳遞了一個(gè) number 參數(shù)，在 article 中可以通過(guò) this.props.params.number獲取。

當(dāng)我把項(xiàng)目托管到 Github Page 后，出現(xiàn)了這樣一個(gè)問(wèn)題。

刷新頁(yè)面出現(xiàn) Cannot GET / 提示，路由未生效。

通過(guò)了解，知道了原因是這樣，并且可以解決：

由于刷新之后，會(huì)根據(jù)URL對(duì)服務(wù)器發(fā)送請(qǐng)求，而不是處理路由，導(dǎo)致出現(xiàn) Cannot GET / 錯(cuò)誤。

通過(guò)修改 → 。

借助URL上的哈希值（hash）來(lái)實(shí)現(xiàn)路由。可以在不需要全屏刷新的情況下，達(dá)到切換頁(yè)面的目的。

當(dāng)前一個(gè)頁(yè)面滾動(dòng)到一定區(qū)域后，點(diǎn)擊跳轉(zhuǎn)后，頁(yè)面雖然跳轉(zhuǎn)了，但是會(huì)停留在滾動(dòng)的區(qū)域，不會(huì)自動(dòng)回到頁(yè)面頂部。

可以通過(guò)這樣來(lái)解決：

componentDidMount() {
    this.node.scrollIntoView();
}

render() {
  return (
    
 this.node = node} >
  );
}

項(xiàng)目中多次需要用到從 Github Issues 請(qǐng)求來(lái)的數(shù)據(jù)，因?yàn)橹熬椭?Redux 這個(gè)東西的存在，雖然有點(diǎn)大材小用，為了學(xué)習(xí)還是將它用于項(xiàng)目的狀態(tài)管理，只需要請(qǐng)求一次數(shù)據(jù)即可。

官方文檔：http://redux.js.org/

中文文檔：http://cn.redux.js.org/

簡(jiǎn)單的來(lái)說(shuō)，每一次的修改狀態(tài)都需要觸發(fā) action ，然而其實(shí)項(xiàng)目中我現(xiàn)在還沒(méi)用到修改數(shù)據(jù)2333。。。

關(guān)于狀態(tài)管理這一塊，由于還不是太了解，就不誤人子弟了~

React是基于組件構(gòu)建的，所以在搭建頁(yè)面的開(kāi)始，我們要先考慮一下我們需要一些什么樣的組件，這些組件之間有什么關(guān)系，哪些組件是可以復(fù)用的等等等。

可以看到，我主要將首頁(yè)分成了四個(gè)部分：

header：網(wǎng)站標(biāo)題，副標(biāo)題，導(dǎo)航欄

banner：about me ~，準(zhǔn)備用自己的照片換個(gè)背景，但是還沒(méi)有合適的照片

card area：暫時(shí)是三個(gè)卡片

blog card：最近的幾篇博文

demo card：幾個(gè)小demo類(lèi)別

me card：算是我放飛自我的地方吧

footer：版權(quán)信息、備案信息、瀏覽量

博客頁(yè)就是很中規(guī)中矩的一個(gè)頁(yè)面吧，這部分是整個(gè)項(xiàng)目中代碼量最多的部分，包括以下幾部分：

文章列表組件

翻頁(yè)組件

歸檔按鈕組件

類(lèi)別組件

標(biāo)簽組件

文章列表其實(shí)就是一個(gè) list，里面有一個(gè)個(gè)的 item:

  
文章1
  
文章2

對(duì)于每一個(gè) item，其實(shí)是這樣的：

一個(gè)文章item組件它可能需要包括：

文章標(biāo)題

文章發(fā)布的時(shí)間、類(lèi)別、標(biāo)簽等

文章摘要

...

如果用 DOM 來(lái)描述，它應(yīng)該是這樣的：

  
文章標(biāo)題
  
時(shí)間
  
類(lèi)別
  
標(biāo)簽
  
摘要

所以，我們可以有很多個(gè)組件：

文章列表組件

文章item組件

類(lèi)別標(biāo)簽組件

它們可能是這樣一個(gè)關(guān)系：

對(duì)于分頁(yè)功能，傳統(tǒng)的實(shí)現(xiàn)方法是在后端完成分頁(yè)然后分批返回到前端的，比如可能會(huì)返回一段這樣的數(shù)據(jù)：

{
  total:500,
  page:1,
  data:[]
}

也就是后端會(huì)返回分好頁(yè)的數(shù)據(jù)，含有表示總數(shù)據(jù)量的total、當(dāng)前頁(yè)數(shù)的page，以及屬于該頁(yè)的數(shù)據(jù)data。

然而，我這個(gè)頁(yè)面只是個(gè)靜態(tài)頁(yè)面，數(shù)據(jù)是放在Github Issues上的通過(guò)API獲取的。（Github Issues的分頁(yè)貌似不能自定義數(shù)量...），所以沒(méi)法直接返回分好的數(shù)據(jù)，所以只能在前端強(qiáng)行分頁(yè)~

分頁(yè)功能這一塊我偷懶了...用的是 antd 的翻頁(yè)組件 。

官方文檔：https://ant.design/components/pagination-cn/

文檔很清晰，使用起來(lái)也特別簡(jiǎn)單。

前端渲染的邏輯（有點(diǎn)蠢）：將數(shù)據(jù)存放到一個(gè)數(shù)組中，根據(jù)當(dāng)前頁(yè)數(shù)和每頁(yè)顯示條數(shù)來(lái)計(jì)算該顯示的索引值，取出相應(yīng)的數(shù)據(jù)即可。

翻頁(yè)組件中：

constructor() {
  super();
  this.onChangePage = this.onChangePage.bind(this);
}

onChangePage(pageNumber) {
  this.props.handlePageChange(pageNumber);
}

render() {
  return (
    

      
    
  );
}

當(dāng)頁(yè)數(shù)發(fā)生改變后，會(huì)觸發(fā)從父組件傳進(jìn) 的方法 handlePageChange，從而將頁(yè)數(shù)傳遞到父組件中，然后傳遞到 中。

父組件中：

handlePageChange(pageNumber) {
  this.setState({ currentPage: pageNumber });
}

render() {
  return (
    

      
      
    
  );
}

列表中：

render() {
  const articlelist = [];
  const issues = this.props.issues;
  const currentPage = this.props.pageNumber;
  const defaultPageSize = this.props.defaultPageSize;
  const start = currentPage === 1 ? 0 : (currentPage - 1) * defaultPageSize;
  const end = start + defaultPageSize < issues.length ? start + defaultPageSize : issues.length;
  for (let i = start; i < end; i += 1) {
    const item = issues[i];
    articlelist.push();
  }
}

在 Github Issues 中，可以為一個(gè) issue 添加很多個(gè) label，我將這些對(duì)于博客內(nèi)容有用的 label 分為三類(lèi)，分別用不同顏色來(lái)表示。

這里說(shuō)明一下， label 創(chuàng)建后會(huì)隨機(jī)生成一個(gè) id，雖然說(shuō) id 是不重復(fù)的，但是文章的類(lèi)別、標(biāo)簽會(huì)一直在增加，當(dāng)新加一個(gè) label 時(shí)，程序中可能也要進(jìn)行對(duì)應(yīng)的修改，當(dāng)作區(qū)分 label 的標(biāo)準(zhǔn)可能就不太合適，所以我采用顏色來(lái)區(qū)分它們。

表示這是一篇文章的blog：只有有 blog 的 issue 才能顯示在頁(yè)面上，過(guò)濾 bug 、help 等

表示文章類(lèi)別的：用來(lái)表示文章的類(lèi)別，比如“前端”、“攝影”等

表示文章標(biāo)簽的：用來(lái)表示文章的標(biāo)簽，比如“JavaScript”、“React”等

即使有新的 label ，也只要根據(jù)顏色區(qū)分是屬于哪一類(lèi)就好了。

類(lèi)別

在這里的思路主要就是：遍歷所有 issues，然后再遍歷每個(gè) issue的 labels，找出屬于類(lèi)別的 label，然后計(jì)數(shù)。

const categoryList = [];
const categoryHash = {};
for (let i = 0; i < issues.length; i += 1) {
  const labels = issues[i].labels;
  for (let j = 0; j < labels.length; j += 1) {
    if (labels[j].color === COLOR_LABEL_CATEGORY) {
      const category = labels[j].name;
      if (categoryHash[category] === undefined) {
        categoryHash[category] = true;
        const categoryTemp = { category, sum: 1 };
        categoryList.push(categoryTemp);
      } else {
        for (let k = 0; k < categoryList.length; k += 1) {
          if (categoryList[k].category === category) {
            categoryList[k].sum += 1;
          }
        }
      }
    }
  }
}

這樣實(shí)現(xiàn)得要經(jīng)歷三次循環(huán)，復(fù)雜度有點(diǎn)高，感覺(jué)有點(diǎn)蠢，有待改進(jìn)，如果有更好的方法，請(qǐng)多多指教~

標(biāo)簽

這里的思路和類(lèi)別的思路基本一樣，只不過(guò)不同的顯示方式而已。

本來(lái)這里是想通過(guò)字體大小來(lái)體現(xiàn)每個(gè)標(biāo)簽的權(quán)重，后來(lái)覺(jué)得可能對(duì)于我來(lái)說(shuō)，暫時(shí)只有那幾個(gè)標(biāo)簽會(huì)很頻繁，其它標(biāo)簽可能會(huì)很少，用字體大小來(lái)區(qū)分就沒(méi)有什么意義，還是改成排序的方式。

文章頁(yè)主要分為兩部分：

文章內(nèi)容區(qū)域：顯示文章內(nèi)容，顯示在頁(yè)面的主體區(qū)域

章節(jié)目錄：文章的章節(jié)目錄，顯示在文章的右側(cè)區(qū)域

有兩種方式獲取文章具體內(nèi)容：

從之前已經(jīng)請(qǐng)求過(guò)的數(shù)組中去遍歷查找所需的文章內(nèi)容

通過(guò) issue number 重新發(fā)一次請(qǐng)求直接獲取內(nèi)容

最后我選擇了后者。

文章是用 markdown 語(yǔ)法寫(xiě)的，所以要先轉(zhuǎn)成 html 然后插入頁(yè)面中，這里用了一個(gè) React 不提倡的屬性：dangerouslySetInnerHTML。

除了渲染markdown，我們還得對(duì)文章中的代碼進(jìn)行高亮顯示，還有就是定制文章中不同標(biāo)簽的樣式。

首先，這里有一個(gè) issue，希望大家可以給一些建議~

文章內(nèi)容是通過(guò) markdown 渲染后插入 dom 中的，由于 React 不建議通過(guò) document.getElementById 的形式獲取 dom 元素，所以只能想辦法通過(guò)字符串匹配的方式獲取文章的各個(gè)章節(jié)標(biāo)題。

由于我不太熟悉正則表達(dá)式，曾經(jīng)還在sf上咨詢過(guò)，就采用了其中一個(gè)答案：

const issues = content;
const menu = [];
const patt = /(#+)s+?(.+)/g;
let result = null;
while ((result = patt.exec(issues))) {
  menu.push({ level: result[1].length, title: result[2] });
}

這樣可以獲取到所有的 # 的字符串，也就是 markdown 中的標(biāo)題， result[1].length 表示有幾個(gè) #，其實(shí)就是幾級(jí)標(biāo)題的意思，title 就是標(biāo)題內(nèi)容了。

這里還有一個(gè)問(wèn)題，本來(lái)通過(guò) 的方式可以實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)，但是現(xiàn)在渲染出來(lái)的 html 中對(duì)于每一個(gè)標(biāo)題沒(méi)有獨(dú)一無(wú)二的標(biāo)識(shí)。。。