1. Several ways to develop component libraries
There are many tools for packaging component libraries
rollup
, packed JS tools, very lightweight, integrated tree-shakingcreate-react-app/vue-cli3
, can quickly modify a component library scaffoldingwebpack
To encapsulateumi/father
, rollup and Babel component packaging, docz documentation integration, TypeScript support, etc- Go directly to Ant-Design or elementUI’s Github repository and copy the code into your own component library scaffolding
Here are my articles on how to use webpack4.0 and rollup:
How to use the rollup package front-end components Use webpack4.0 lu single/multiple pages scaffold (jquery, react, vue, typescript)
Component system design ideas and patterns
We can encapsulate organisms with similar functions or requirements as a business component and expose interfaces for flexible customizability so that we can reuse the same logic and functionality across subsystems on different pages.
- General-purpose components: Button, Icon, etc.
- Layout components: Grid, Layout, etc.
- Navigational components: like Breadcrumb,
- Drop-down menus :Dropdown, Menu, etc.
- Data entry components: form form, Switch Switch, Upload file, etc.
- Data display components: such as Avator avatar, Table, List, etc.
- Feedback components: such as Progress bar, Drawer, Modal dialog box, etc.
- Other Business types
Component case column: hand touch hand to achieve a lightweight extensible Modal box (Modal) component
Component construction practice
React +umi/father+react
Principle:
- React encapsulates components in index.js
export
Use exposure - Based on the UMI /father scaffolding, provide integration tools for component libraries or tool libraries packaged, we just need to change the configuration file to easily build a component library with documentation. Docz document
- NPM release
- Import directly
Project: XUI — Ant-Design, a lightweight UI component library based on React
Based on vuE-CLI3 + plug-in mount build
componentlib
element
Component test
Mini-case: Model components
- Make sure that
Cancel the event
Must be stated
it('onCancel should be called'.() = > {
const onCancel = jest.fn(); / / jest. Fn () returns a new, unused simulation function [] (https://www.jestjs.cn/docs/mock-function-api).
const wrapper = mount(<Modal visible onCancel={onCancel} />);
wrapper.find('.ant-btn').first().simulate('click');
expect(onCancel).toHaveBeenCalled(); // Make sure the mock function is called
});
Copy the code
- Ensure that the value passed by type is true, that is, not:
false
.0
.' '
.null
.undefined
, andNaN
it('danger type'.() = > {
const wrapper = mount(<Modal okType="danger" visible />);
expect(wrapper.find(Button).last().props().danger).toBeTruthy();
});
Copy the code
- Confirm mode should be turned off when the close button is clicked
it('should close confirm modal when click close button'.() = > {
jest.useFakeTimers();
const onCancel = jest.fn();
Modal.confirm({
title: 'title'.content: 'content'.closable: true.closeIcon: 'X',
onCancel,
});
act(() = > {
jest.runAllTimers();
});
expect($$(`.ant-modal-close`)).toHaveLength(1); $$,'.ant-btn') [0].click();
act(() = > {
jest.runAllTimers();
});
expect($$(`.ant-modal-close`)).toHaveLength(0);
expect(onCancel).toHaveBeenCalledTimes(1);
jest.useRealTimers();
});
Copy the code
React Jest ant-design Jest