How to Write React Components for a Company Design System

Write our first Button component

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Build a Complete Company Design System course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Build a Complete Company Design System, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Build a Complete Company Design System

  • [00:00 - 00:15] So, time to write our first React component. So let's go to our React library, to the source folder, and create a button.tsx component.

    [00:16 - 00:26] So here, let's paste the code we found in the text version of this lesson. And what we are doing basically is a simple TypeScript component.

    [00:27 - 00:45] We extend the component properties of a button, component, and we explicitly state the disabled property. And you will see later why we explicitly defined the disabled, while this is also included in the component props.

    [00:46 - 00:59] And then also we add a new state, which is called a loading state that does not exist in an actual button component. And we forward the ref so we can pass references to the button.

    [01:00 - 01:21] But I have to state that this is not a component library core, so the architecture is totally up to you. And we pass all the properties here, and we state that this button will have a disabled state if it's actually disabled or if it's in a loading state.

    [01:22 - 01:39] And then we will also add a Nikon button. And again, we have the same exactly principle that we extend the bottom component props.

    [01:40 - 01:50] We had explicitly those three properties that we can pass to a Nikon component. And we have everything, everything spread it here.

    [01:51 - 02:03] So right now we are developing blindly, but in the next lesson we will see how we can set up storybook so we can actually have visual feedback of what we are developing and debugging