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.
- Throttle function in javascript with the example
- React Context API Explained
- Introduction to Haskell Ranges
- HOC ( Higher-order components ) in ReactJS explained
Peace.