How to Write React Components for a Company Design System

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. 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. 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. 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. 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. And then we will also add a Nikon button. And again, we have the same exactly principle that we extend the bottom component props. We had explicitly those three properties that we can pass to a Nikon component. And we have everything, everything spread it here. 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