构建本身的React UI组件库: 构建首页

时间 2019-11-17

标签构建本身 react 组件首页栏目 React 繁體版

原文原文链接

序言

该系列文章将跟随做者的开发进度持续更新。css

预计内容以下：html

构建本身的React UI组件库：前端

（一）：从v0.0.0到 v0.0.1node

（二）：构建首页（本文）react

（三）：文档编写webpack

（四）：擦干净细节git

（五）：推广、宣传、迭代github

<= to be continue =web

在这里能够访问到个人组件库： BB-colorshell

以及npm地址: BB-color

约定

本系列文章尽量多的涉及到每一个步骤、每一个文件和每一个更新。
本系列文章中，整个项目的开始基于官方提供的 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文件

编写首页

在作主页的时候，能够参考参考以上或者更多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…