Building a React component as an NPM module

It’s easier than you think

You can view the whole source code at https://github.com/recraftstudio/dummy-react-npm-module

React is a great way to write reusable components which we can use to create complex UI. NPM provides a great way to write reusable modules and publish them online so they can be used by millions of developers from all around the world.

So why don’t use these two to write and publish React components so other developers can simply install and use our components.

Let’s start by creating a directory

mkdir dummy-react-npm-module
cd dummy-react-npm-module

Our next step will be converting this component to an npm module. We can do that by using npm init command inside our directory

npm init

The NPM will ask you some questions about your package answer them and you are ready to go.

Note: Make sure your npm package name is unique and there is no module with exactly the same as yours.

Let’s jump on to install babel v7 which will help use transpile our React JSX & Javascript code to ES5 ( which will help our code to run on old browsers ).

yarn add @babel/cli @babel/core --dev

After adding the core packages let’s install presets which will actually convert our code to ES5. We need two presets @babel/preset-env and @babel/preset-react

yarn add @babel/preset-env @babel/preset-react --dev

The @babel/preset-env will help us to convert our code into ES5 and @babel/preset-react will handle the conversion of React to Javascript.

We also have to tell babel to use these presets by creating a .babelrc file.

touch .babelrc

Now let’s add these presets to our file

{
    "presets": ["@babel/preset-react", "@babel/preset-env"]
}

Our next step will be defining a build command to our npm scripts so we can actually build our component and use it with other projects.

And by building I mean transipling our React code into ES5 equivalent. The problem is we don’t have any react code yet. Let’s write some

Create a directory src and inside src create an index.js file

mkdir src
cd src
touch index.js

Inside index.js write

Now we are all set to convert this code to ES5. In your terminal type

cd .. // make sure you are in the root folder of your project
./node_modules/.bin/babel src --out-file index.js

This will create a file index.js in your project root folder which will appear something like this

This is the transpiled ES5 source code of your component.

Let’s add this build command to our package.json so we don’t have to type it again and again

Now whenever we want to transpile our component we can simply write

yarn build

We are also missing one pair of dependency and those are our core libraries react and react-dom

But we are not directly going to install them as dependencies rather we will define them as our peerDependencies

What are peerDependencies?

peerDependencies will tell the npm that our package needs the dependencies listed as peerDependencies installed in the host project which will be using our npm module.

In our case those peerDependencies will be react and react-dom because if user has to use our React component it’s obvious they already have both of these libraries installed inside their project.

Let’s define them. Inside your package.json add a new field peerDependencies with react and react-dom inside it.

We will also install react and react-dom as our devDependencies as we want them to use while development

yarn add react react-dom --dev

With all said and being done it’s now time to test our component. In order to do that we will be installing our local npm module inside our other project.

Inside your project type ( make sure you are inside the root directory of your project )

pwd

This will give you the path of your current working directory

In my case path was /Users/manojsinghnegi/Projects/dummy-react-npm-module

Keep this path noted we will be using this to install our component to another project.

Let’s create a dummy React project.

cd .. // if you still in your component root directory
npx create-react-app dummy-app
cd dummy-app
yarn add /Users/manojsinghnegi/Projects/dummy-react-npm-module

Remember to replace npm module path with your system path. Once installed start your project server by typing

yarn start

And then inside App.js use our newly created DummyComponent

And the output will be something like this

Conclusion

React & NPM both are great tools used together we give birth to a whole new world of reusable React components. Write as much reusable code you can and if there is a chance to convert that code to a module share it with the world using NPM.

This is it for this post. In the next article, we will be learning how to publish an NPM module to npm registry.

keep sharing. 😃

Hi, My name is Manoj Singh Negi. I am a Javascript Developer and writer follow me at Twitter or Medium.

I am available to give a public talk or for a meetup hit me up at justanothermanoj@gmail.com if you want to meet me.

Really loved this article ?

Please subscribe to my blog. You will receive articles like this one directly in your Inbox frequently.

Here are more articles for you.

1. Throttle function in javascript with the example
2. React Context API Explained
3. Introduction to Haskell Ranges
4. HOC ( Higher-order components ) in ReactJS explained

Peace.