This article is about 600 words, read this article about 5 minutes, focuses on the official source directory structure and reading methods, to achieve the ability to read the source code, if there is an error, please correct.

How to read source code

1. The clone code

[email protected]:DouyinFE/semi-design.git
Copy the code

2. Core file directory

For the semi-styled, all components in @douyinfe/ semi-UI are styled based on this animation library - Semi-animation-React - Animation component - semi-Foundation - Core function F/A architecture F-semi-UI - Core function F/A architecture S-semi-icons -icon component -- Illustrations -- Semi-ScSS -- Compile -- SCSS -- Semi-WebPack -- Custom Themes and Replace CSS prefixes -- Semi-Illustrations -- AI Vector Components -- Plugins -- Gatsby Plug-ins -- SRC Gatsby official website - package.jsonCopy the code

3. ReadHow can the Semi Design-UI component library be layered to accommodate multiple MVVM frameworksTo master the advantages and disadvantages of F/A mode, how to communicate, and how to cross Vue and React

4. Look at the components in the semi-UI and semi-Foundation directories under Packages

Before looking at functional components, you need to learn about the BaseComponent component. Most functional components in semi-UI inherit from this BaseComponent component (not HOC, as I thought) and act as a communication hub

packages\semi-ui_base\baseComponent.tsx

5. Find a component and dive into it

Parts of the component source code from simple to difficult viewing order

  1. _base
  2. Button, Avatar, card
  3. The collapse, dropdown can
  4. The input, the form,

6. Storybook UI component related

Build component driven UIs faster 

yarn 
yarn start
Copy the code

Open the browser http://localhost:6006/ to visit

7. Related to the Gatsby deployment website

Gatsby is a free, open source framework based on React that helps developers build extremely fast websites and applications

yarn develop
Copy the code

Personal view

Bright spot

  1. Semi is based on Sass + CSS Vars, and dynamic theme switching is easier to do
  2. Document change Log document comparison tool reviews
  3. The code does not repackage rc components like ANTD, which reduces learning costs and is development-friendly
  4. The F/A architecture is novel, concrete and impressive

disadvantage

  1. Current ecology is not good, production is used cautiously
  2. Ts code prompt is weak
  3. Components are basically Class components, not Function components

How to contribute source code

Official Contribution documents

reference

semi ui

How can the Semi Design-UI component library be layered to accommodate multiple MVVM frameworks

Gatsby is a free, open source framework based on React that helps developers build extremely fast websites and applications

Build component driven UIs faster