preface

Writing background

Here is my first column on Digging Gold. I will document the process of building a UI component library in an actual project, so that I can query it in the future. I will also give you an idea of how to build a front-end UI library based on React.

Why write your own UI library

Now there are many excellent front-end open source UI libraries, such as ANTD, Material UI, Element UI, etc., these UI libraries are relatively complete ecology, documentation is also well written, you can directly use in the project, but why write your own? Borrow an old saying, rent is better than buy, buy is better than build, from this point of view can also know that the old use of others always feel a bit of a defect, here the author personally believe that there are several reasons to insist on writing their OWN UI library:

1. You can be disciplined.

Although it is an open source library, most products in the market are not used by these component libraries, on the contrary, the projects inside the enterprise are used more. I think it’s more about not wanting to be controlled by others. If the UI library author wants to collect royalties one day, should you move your project to another component library? Or do you just hand over the money? On the other hand, if all of your company’s products use ANTD, over time, you will naturally rely on The development habits of Ali and choose new products more inclined to those of ali’s family. Therefore, the price of free is the loss of autonomy.

2. Upgrading depends on your face.

For example, if your product’s framework is going from 2 to 3, Angular to 9 to 12, React to 18, and you’re relying on third-party UI component libraries that don’t support the new framework or are partially compatible with the new framework or other dependencies, it’s going to make your development very difficult.

3. Maintenance is difficult.

Use other people’s component library, if there is a Bug how to fix? Do you need to Issue 😂 on Github? It’s your customers who are complaining and your product that suffers. Third party open source, is a double-edged sword, free for you to use, but the problem is not responsible for others.

With all these reasons, it’s no wonder why you should build your own UI library. Owning a complete set of product systems is an important step for enterprises to regain their autonomy. For us developers, it is also a process to temper our basic skills. Why not do it?

Based on the React

Here I record the enterprise project I am building now, while building while recording, so happy, can be called hand in hand teaching this study [DOGE].

1. Create with dumi

Dumi is an open source tool responsible for component development and component documentation generation. Dumi was not involved in the final packaging release, so it is ok to use Dumi here.

Then start recording the actual steps.

Install Node first and make sure node is 10.13 or later.

Create a new folder in a blank space

mkdir dux-ui && cd ./dux-ui
Copy the code

Then execute the install command, which I chose to create as a site

$ npx @umijs/create-dumi-lib        Initialize a document schema component library development scaffolding
# or
$ yarn create @umijs/dumi-lib

$ npx @umijs/create-dumi-lib --site Initialize the component library development scaffolding for a site pattern
# or
$ yarn create @umijs/dumi-lib --site
Copy the code

Execute commands in the root directory

npm install
npm run dev
Copy the code

And then the project took off! (Stolen from the official website for reference only)

2. Files and directories

Once the scaffolding has set up the project, you can see the initial file directory

Here we put our custom components in a separate Components folder for ease of development:

Then change the import path of the component in the index file under SRC:

export { default as Foo } from './components/Foo';
Copy the code

Modified dumi configuration file umirc.ts and added menu display path:

import { defineConfig } from 'dumi';

export default defineConfig({
  title: 'test-dumi'.favicon:
    'https://user-images.githubusercontent.com/9554297/83762004-a0761b00-a6a9-11ea-83b4-9c8ff721d4b8.png'.logo: 'https://user-images.githubusercontent.com/9554297/83762004-a0761b00-a6a9-11ea-83b4-9c8ff721d4b8.png'.outputPath: 'docs-dist'.mode: 'site'./ / new
  menus: {
    // You need to customize the path of the side menu. If the path is not configured, the automatically generated configuration will be used
    '/components': [{title: 'components'.path: '/components'.children: [
          // Menu subitem (optional)
          'components/Foo/index.md',],},],},});Copy the code

Modify the package. The json

Then perform

npm run docs
Copy the code

You can see it’s running

At this point, the project is set up! This chapter concludes, and the next section will document the development of each component step by step.