react ui library tutorial

React component library construction guide

• React component library construction guide (I): Project initialization
• React component library construction guide (II): Development and debugging
• React component library construction guide (III): Compilation and packaging
• React component library construction guide (IV): Unit testing
• React component library construction guide (V): Standardized release process

Online preview

? Local preview

git clone [email protected]:worldzhao/react-ui-library-tutorial.git
cd react-ui-library-tutorial
pnpm install
pnpm start

After executing the commands in order, you can see the following content on the localhost:3000 port:

Overview

This series of articles mainly includes the following content:

• Project initialization: Preparation for the component library development. eslint / commit lint / typescript etc;
• Development stage: Use dumi for development debugging and documentation writing;
• Packaging stage: output ~~ umd ~~/ cjs / esm products and support on-demand loading;
• Component testing: Use @testing-library/react and its related ecology to perform component testing;
• Publish npm: Write a script to complete the release or directly use np to publish;
• Deploy document site: Use Github Pages and Github Actions to complete automatic deployment of document site.