构建自己的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…