Publish a React component with TypeScript
In this lesson we look at how to create a React Component package using TypeScript.
Creating a React Package is very similar to creating any other TypeScript Node package and we demonstrate that here.
Instructor: [00:01] Here, we have a simple, barebones, package.json for a Node module, which we have named fancy.
[00:10] 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.
[00:29] Next, we create a simple tsconfig.json file to specify the TypeScript options. Within our file, we specify the compiler options for source map, target, JFX, along with declarations which we set to true, and most importantly, the output directory for the compiled JavaScript and declaration files using OutDir. We also specify that our source TypeScript files will be in the source folder.
[01:00] 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.
[01:23] 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.
[01:40] We set up package.json with the path to our output JavaScript files, along with the types for the output d.ds TypeScript declaration files, which in our case is specified by the OutDir, and hence the lib folder.
[01:58] 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.
[02:12] 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.
[02:31] 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.
[03:01] 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.
Yes! We want more :D
Thanks, this was interesting! Helpful stuff.
I don’t understand exactly what a peer dependency is. And I got this error where it says “Cannot find module 'react’” from fancy/lib when trying to use from the other project.
I got some error in the build. To solve the problem I added the lib configuration in the tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["es5", "es6", "dom"],
"jsx": "react",
"sourceMap": true,
"outDir": "lib",
"declaration": true
},
"include": [
"src"
]
}
The tsconfig is wrong. Please use proper tsconfig settings { "compilerOptions": { "sourceMap": true, "module": "commonjs", "lib": [ "dom", "es6" ], "target": "ES5", "jsx": "react", "declaration": true, "esModuleInterop": true, "outDir": "lib", "typeRoots": [ "node_modules/@types" ] }, "include": [ "src" ] }
Awesome course!