構建本身的React UI組件庫: 構建首頁

序言

該系列文章將跟隨做者的開發進度持續更新。

預計內容以下：

---

構建本身的React UI組件庫：

（一）：從v0.0.0到 v0.0.1

（二）：構建首頁 （本文）

（三）：文檔編寫

（四）：擦乾淨細節

（五）：推廣、宣傳、迭代

<= to be continue =

---

在這裏能夠訪問到個人組件庫： BB-color

以及npm地址: BB-color

約定

1. 本系列文章儘量多的涉及到每一個步驟、每一個文件和每一個更新。
2. 本系列文章中，整個項目的開始基於官方提供的 creat-react-app 進行react構建，全部內容將使用最新的庫版本進行開發。

• create-react-app v2.1.1
• react v16.7.0
• webpack v4.19.1
• babel 7+
• node v10.15.0

必備知識

• 基本掌握 React
• 會使用 Git
• JavaScript、CSS等基礎知識

正文開始

---

起點

經過第一章的學習，你已經建立出了本身的React UI 組件庫，也許你並不知足文中的Button 組件，而且添加了屬於你本身獨有的組件，可是這不影響以後的學習。本章將以上一章的結尾做爲開始，繼續補充知識點。若是你尚未看過第一章，能夠在序言中看見相關的跳轉鏈接。

經過GitHub Pages建立首頁

咱們的首頁以及以後的文檔都屬於靜態頁面，那麼咱們就不須要再去申請服務器、申請域名。github 已經給咱們提供了咱們所需的全部內容：咱們能夠經過GitHub Pages建立首頁。

這是github Pages的介紹頁: pages.github.com/

你能夠按照介紹頁上的步驟建立你本身的靜態主頁，可是咱們已經建立好了咱們的文件倉庫，何不直接利用它？

在github上打開你的UI組件庫 倉庫，點擊 Setting

而後滾到頁面下方，依次點擊

注1 & 知識點A：

第二行 master branch /docs folder 沒法選中，緣由是咱們的項目代碼裏沒有 docs 文件夾。這個選項的意思是 github page 能夠識別咱們項目中的 docs 文件夾, 並在這個文件夾中尋找 index 文件進行部署

咱們如今先選第一行的master branch，在建立docs以後再更改

隨後github給你的倉庫建立了一個可訪問站點。

如今點進去默認進入了根目錄的readme.md文件

編寫首頁

Muse-ui

Vant

Ant Design

Material-UI

grommet

在作主頁的時候，能夠參考參考以上或者更多UI組件庫的首頁，而後創做出本身的首頁。 你能夠用純粹靜態的html文件，也能夠進行精細開發，但最終都請生成相應的靜態文件。

我在這裏就以最簡單的形式開發：只使用一個html和css文件。

在根目錄建立docs文件 在 知識點A 中已提到爲什麼要建立這個文件夾

而後我在這裏編寫出個人靜態主頁

下一步，提交到Github

git tag -a 'v0.0.2' -m '首頁建立'
git push origin v0.0.2
git add .
git commit -m '首頁建立'
git push -u origin master
複製代碼

修改github pages主頁路徑

回到咱們在github上 UI庫的倉庫，進入setting，移動到以前建立github pages的位置。

修改設置，選擇第二項，保存

如今再讓咱們點擊上面的地址。

讓咱們一塊兒驕傲吧，咱們成功了，咱們的藝術品有本身的首頁了！

收尾

最後讓咱們修改一下文件的描述

加上咱們的主頁地址。

尾聲

這是一次使人激動的過程，我在製做這個主頁時，彷彿找到了才學前端時的那種純粹感，看見本身編寫的主頁顯示出來時的快樂，將本身的主頁分享給他人時的自豪。

在下一章中，咱們將會學習整個UI組件庫中，第二重要的內容：文檔編寫。

---

若是有任何不當或缺失的地方，但願能在評論區指出，理性交流。

如需轉載請註明做者與原文地址

做者：ParaSLee

原文：juejin.im/post/5c2b75…