React
Project: Micro frontend and design system
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.
Exercise 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.
Show example solution
function Button({ variant, children }) {
const className = variant === 'primary' ? 'btn-primary' : 'btn-secondary';
return <button className={className}>{children}</button>;
}
export default Button;
Test yourself
-
What is the first step of this project?
- Writing a server page
- Writing the Button component
- Adding concurrent search
- Setting up a custom renderer
Show answer
Writing the Button component — First you write Button, the building block.
-
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>;
}
Show answer
function Button({ variant, children }) {
const className = variant === 'primary' ? 'btn-primary' : 'btn-secondary';
return <button className={className}>{children}</button>;
}
-
Match project steps
- Button
- Design system core
- ThemeProvider
- Provides theme
- ProductPage
- Server component page
- SearchPanel
- Concurrent search
Next lesson: Design system core
