Utilizing a Shared UI Library in a React Application with TypeScript and PNPM
We are going import a ccomponent from a shared library into our main app.
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 The Art of Enterprise Monorepos with Nx and pnpm 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 The Art of Enterprise Monorepos with Nx and pnpm, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:34] Welcome to lesson 2. In the last lesson we learned how to build a shared UI library using React and TypeScript, build it and then have it ready to be imported into our frontend React application. So in this lesson we are gonna learn how to import a shared UI library. We could add the shared UI library inside our frontend applications package.json file in the dependency section, but instead what we're gonna do is we are gonna install that app using pmpm.
[00:35 - 01:16] And then we add workspace command so that we are saying to pmpm that we are looking for a package inside our monorepository. Great! Now you could see the package has been added into our project and we can now go to our app page and import this file. So first let's get rid of this boilerplate code.
[01:17 - 01:38] Let's import the button. Let's also import useState.
[01:39 - 02:10] We will use useState to initialize our initial state for the clicked event. We will initialize it to false. Now let's implement the button component and we will set it to unclicked. Now we can look at the clicked state and then show that button was clicked.
[02:11 - 02:23] Let's run the application and test. So we will use pmpm filter frontend start.
[02:24 - 03:07] It seems the application is running successfully and the button renders as expected and when you click on the button it is placed the clicked event. In this lesson we learn how to import a shared UI component from another module to our main React application. In this module we learned how to build shared repositories by creating a shared library within NX and gain practical insights into collaborative development and efficient code reuse. In the next module we will look into modularizing our application with local libraries.