Instructor: Here, we have a simple, barebones, package.json for a Node module, which we have named fancy.
We start off by installing TypeScript, React, and the type definitions for React as dev dependencies. We add these only as dev dependencies, as we want people that will use our package to bring in their own versions for these libraries.
Next, we simply create a route source index.tsx file. Within the file, we bring in React. Next, we export a simple fancy component that takes a text prop as a string, and renders it into an h1 tag.
We wrap up our module by making the final set of changes in package.json. We add a hint for our users that they need to provide their own version of React, by adding it to our peer dependencies.
We also set up a build script, which simply invokes tsc, the TypeScript compiler, on our tsconfig.json. Add a start script that runs build in watch mode for live development.
Let's go ahead and run build once on our console to compile our project. At this point, if you wanted, you could run npm publish to publish this library to npm, but we will just use it locally by running npm link.
Let's jump back to our good, old "Hello, World!" React application and use this fancy package. If we had published our package to npm, we could use it with npm install fancy, but since we only linked it locally, we can bring it in by running npm link fancy. This npm link workflow is also a good tool to be aware of for local testing of packages before deploying them to npm.
We start off with the simple, basic, TypeScript "Hello, World!" React app. We now import the fancy React component into our application. Of course, since our fancy package was written with TypeScript, we get nice autocomplete error checking and all the other benefits we demonstrated in the first lesson. As you can see, our fancy component works as expected.