Building an Excellent React Component Library: Design, Development, Testing, and Maintenance (Zent Case Study)

A system with many business scenarios and similar pages inevitably generates duplicated code. Managing and abstracting these similar modules is a common challenge for teams. Instead of repeatedly copying code, creating reusable UI or business components is far more efficient.

1. Choose Open‑Source or Build Your Own?

Many mature React UI libraries exist, such as Ant Design and Material‑UI. Yet Youzan’s frontend team decided to build its own library, Zent, which now provides over 45 components used across various PC products.

Different business lines have independent design specifications.

Complex scenarios (e.g., Design and SKU components) require deep customization.

The library must support multiple PC products across departments.

Open‑source development fosters discussion and team growth.

2. Component Library Composition

Building a complete library involves several aspects:

Component design philosophy

Code standards

Development workflow

Testing

Maintenance (PR/issue management, packaging, documentation)

1. Component Design Philosophy

Components abstract common business scenarios and interaction patterns. A unified visual style and interaction spec must be defined first; otherwise, the same component may need different UI treatments, increasing construction cost.

Props should be highly extensible, and components should be fully controlled, keeping input and output consistent. Below is a typical Button component example:

// Button is a react component of Zent
<Button type="primary" className="customer-classname" loading={true} disabled={false} size="large" onClick={this.handleClick}>
  {children}
</Button>

The Button defines props such as type (visual style), size, disabled, loading, and allows custom className and children. It can also render as an a tag when an href prop is provided:

// Button as <a>
<Button type="primary" className="customer-classname" href="https://www.youzan.com" target="_blank">
  有赞首页
</Button>

Key conventions:

All state is controlled by props.

Children support custom DOM structures.

Never hard‑code internal DOM.

2. Code Standards

Youzan’s internal library uses the open‑source lint tool felint, which integrates eslint, stylelint, and Git hooks. It initializes appropriate configurations for React, Vue, ES5/ES6 projects, installs dependencies, and enforces linting on every commit.

3. Development Workflow

After agreeing on design and standards, the workflow includes component initialization, coding, and demo creation. Zent provides a CLI command: yarn new-component – creates directories and template files for a new component. Developers then write code following lint rules, add a demo, and run a local server for debugging.

4. Component Testing

Zent uses jest together with enzyme for UI testing. An example test for the Button component:

import { mount } from 'enzyme';

describe('Button', () => {
  it('Button UI test', () => {
    const wrapper = mount(<Button>OK</Button>);
    expect(wrapper.hasClass('zent-btn')).toBe(true);
    expect(wrapper.text()).to.equal('OK');
  });
});

Tests are run with yarn test, which outputs results in the terminal.

5. Maintenance

Maintenance occupies a large part of a library’s lifecycle. It includes PR/issue handling, packaging, and changelog management. PR titles follow a strict format, e.g., [bug fix] Button: fix disabled state, which helps generate clear changelogs.

Packaging is performed by authorized members using: yarn build – bundles the entire Zent code. yarn publish – publishes the package after tests pass.

Conclusion

The article outlines the design philosophy, coding standards, development process, testing, and maintenance of a React component library, using Zent as a case study. It emphasizes the importance of a healthy component ecosystem, open‑source collaboration, and systematic lifecycle management.