Setting Up A React Component Library for Design Systems
Setting up the react component library package
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo 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.
Get unlimited access to Build a Complete Company Design System, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:09] So now let's start setting up our React environment. To start we will install React in the packets React.
[00:10 - 00:24] And to do this we will write again. Yarn workspace, we will target the React packets, add, and as development we will add the following.
[00:25 - 00:47] So basically we are adding the React version 18. And we will go to our packets.json inside the React packets where you can see the types and everything.
[00:48 - 01:10] But we will add a section by hand, which are the peer dependencies that basically we want our consumers to have a version higher than 16. And why is that because we want to provide a hook functionality and hooks were introduced after 16.8 version.
[01:11 - 01:20] So this is what our packets.json should look like after we installed everything for React. and let's move to the next lesson and start writing our first component.