dumi builds react component library

Time:2022-11-24

Dumi official website builds react component library

According to the official website order, we build a component library

mkdir vultures-react && cd vultures-react
npx @umijs/create-dumi-lib
npm install
npm start

Install required dependencies

The current component library is very mature, and we can repackage it into business components used in work according to the existing component library, such as antd and echarts

// antd basic components
npm install antd -S 
// Drag and drop component library
npm install react-beautiful-dnd --save

Install dependent component libraries according to your own needs

Build the first component

Modify the Foo file in the directory

// @FilePath: /vultures-react/src/Foo/index.tsx
import * as React from 'react';
import { Button } from 'antd';


const Foo = () => {
  return (
    <Button>build the first button</button>
  )
}

export default Foo

Show the first component we wrote in the documentation

Must be exported, otherwise the side component library will report an error

import * as React from 'react'
import {Foo} from '../index'

const Demo = () => {
  return  <Foo/>

}

export default Demo

dumi builds react component library

view components

http://localhost:8000/fooYou can see the first component we wrote in the address, but isn’t there some problem? The antd component library we imported, how to display it as a normal button label, let’s troubleshoot this error together.
dumi builds react component library

  1. Open the console to see if the clas of antd is added
    dumi builds react component library
  2. You can see that the class style is available, it seems that the packaged css file may not be loaded
  3. Go to the official website to view, need to introduce css style
  4. Add at the topimport 'antd/dist/antd.css'it’s ok