Project: Micro frontend and design system
- React course
- Expert
- Lesson 25/32
- 4 min
Review the goal and steps of the micro frontend and design system project.
Project: Micro frontend and design system
In this project you will build a micro frontend combining a design system core, a server component page and concurrent features.
In the first step you write the Button component, the building block of the design system. The variant prop changes the appearance. In later lessons this button will be combined with a theme provider and a server page.
Each lesson's starting code includes the previous solution; the project grows step by step.
The variant prop
The Button component takes a variant prop. If variant === 'primary' the btn-primary class is applied; otherwise btn-secondary.
This pattern ensures consistent appearance in the design system. To add new variants you only extend the condition.
The button content is carried by children; this allows flexible usage.
Practice Write the Button component
Write Button. Take variant and children props. Compute className with variant === 'primary' ? 'btn-primary' : 'btn-secondary'. Return <button className={className}>{children}</button>. Export it.
Starter code
// Button.jsx
// Write the Button component hereSample solution
function Button({ variant, children }) {
const className = variant === 'primary' ? 'btn-primary' : 'btn-secondary';
return <button className={className}>{children}</button>;
}
export default Button;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is the first step of this project?
- Writing a server page
- Writing the Button component Correct answer
- Adding concurrent search
- Setting up a custom renderer
Explanation: First you write Button, the building block.
2 Fill in the blank: select the class with variant
function Button({ variant, children }) {
const className = variant === 'primary' ? 'btn-primary' : '____';
return <button className={className}>{children}</button>;
}function Button({ variant, children }) {
const className = variant === 'primary' ? 'btn-primary' : 'btn-secondary';
return <button className={className}>{children}</button>;
}Explanation: If not primary, the btn-secondary class is applied.
3 Match project steps
| Term | Meaning |
|---|---|
Button |
Design system core |
ThemeProvider |
Provides theme |
ProductPage |
Server component page |
SearchPanel |
Concurrent search |