The preface

This series of articles will be updated as the author progresses.

The expected contents are as follows:

Build your React UI component library:

A: from V0.0.0 to V0.0.1

(2) : Build the home page (article)

(III) Documentation

(four) : Clean the details

(V) : promotion, publicity and iteration

<= to be continue =


This is where I can access my component library: BB-color

And NPM address: bb-color


convention

  1. This series covers every step, every file, and every update as much as possible.
  2. In this series of articles, the entire project is based on official sourcescreat-react-appWith the React build, everything will be developed using the latest library version.
  • The create – react – app v2.1.1
  • The react v16.7.0
  • Webpack v4.19.1
  • babel 7+
  • The node v10.15.0


You’re supposed to know

  • React
  • Will use the Git
  • Basic knowledge of JavaScript, CSS, etc


The starting point

You’ve already created your React UI library. You may not be satisfied with the Button component and have added your own. This chapter will start with the end of the previous chapter and continue to add knowledge. If you haven’t seen chapter 1, you can see the related jump links in the prologue.

Create the homepage through GitHub Pages

Our home page and subsequent documents are static pages, so we don’t need to apply for a server or a domain name. Github already gives us everything we need: we can create a front page through Github Pages.

This is the introduction page for Github Pages: pages.github.com/

You can follow the steps on the introduction page to create your own static home page, but we’ve already created our repository, so why not just use it?

Open your UI component repository on Github and click Setting

Then scroll to the bottom of the page and click one by one

Note 1:

The second line, Master Branch/Docs Folder, is not selected because there is no docs folder in our project code. This option means that github Page can identify the Docs folder in our project and look for index files in that folder to deploy

Let’s now select the master Branch in the first line and change it after we create the docs


Github then creates an accessible site for your repository.

Now click on the readme.md file in the root directory by default


Write the first page

Muse-ui

Vant

Ant Design

Material-UI

grommet

When making a home page, you can refer to the above or more UI component library home page, and then create your own home page. You can use purely static HTML files, or you can elaborate, but ultimately generate static files.

I’m developing here in the simplest form possible: just one HTML and CSS file.

Create the docs file in the root directory. Why create this folder

Then I wrote my static home page here

Next, submit to Github

Git tag -a 'v0.0.2' -m '-m' -m '-m' -m '-m' -m '-m' -m '-mCopy the code


Change the path of the Github Pages home page

Go back to our repository of UI libraries on Github, go to Setting, and move to the location where we created Github Pages.

To modify the Settings, select the second option and save


Now let’s click on the address above again.

Let us be proud together, we have succeeded, our artwork has its own home page!


finishing

Finally, let’s change the description of the file

Plus our home page address.


The end of the

It was an exciting process. When I made this home page, I seemed to find the pure feeling of learning, the joy of seeing my own home page displayed, and the pride of sharing my home page with others.

In the next chapter, we’ll look at the second most important aspect of the entire UI component library: documentation.

If there is anything inappropriate or missing, please point it out in the comments section and communicate rationally.

If need to be reproduced, please indicate the author and original address

Author: ParaSLee

Original text: juejin. Cn/post / 684490…