Everything About Creating Node Packages in React

One of the good points about JavaScript libraries and frameworks is the vast number of open source packages we can use within our projects. These packages may be UI Components (Menus, Calendars, …) or logical packages (Axios, Mocha, …).

These packages are also used a lot in React (as node_modules). But how can we develop our custom package? How can we publish them as NPM packages so that other developers start using them? We’ll find out how in this article.

Creating a custom package

Now let’s get right to it and create a simple package to see how we should use it inside React.

Consider we have created a React project using create-react-app. First we should create a directory for our new package:
In the root of the project, we’ll create a directory called local_modules so that we can have all of our local packages somewhere.
Inside this directory, let’s have another directory called myfitstmodule. This folder may contain all the code needed for our custom package.

├── README.md
├── node_modules
├── package.json
├── local_modules
│   ├── myfirstmodule
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src

So to create the package, we need to run npm init inside this folder. After running this command, npm will ask you to enter the package name, version, description and other information.

During npm init, npm will ask for an entry point too which is better to be index.js in each package. This entry point is the JS file that will be invoked when consumers of your module require it.
It means when other components try to import your module, they’ll look for this entry point to see which parts of the module are exported and ready to use.

Running this command will create a package.json file. Let’s create the index.js file to export something for our React project and another js file to write our module:

├── local_modules
│   ├── myfirstmodule
│   │   ├── package.json
│   │   ├── index.js
│   │   ├── myfirstmodule.js

Inside myfirstmodule.js will be our module’s main code:

So let’s trace this:
We have a class here called MyFirstModule with a constructor which will create a json containing some information we need. There’s also a method inside this class called getJson which will return that json we declared earlier.

As there’s nothing in this file except our class, we will export this class as default. (As what we do mostly in React).

You can also have other methods inside your class based on your need.

Now let’s take a look at index.js:

Inside this file, we have imported MyFirstModule class (which was previously exported). We can also import all the other things (Classes, Functions, variables, …) based on our module usage.
While we have imported everything, we should export them so that our React can access them.

Learn more about import and export in ES6 modules here.

So why didn’t we simply write the class inside the index.js? Actually we can do this! But imagine we have lots of classes in our module and some of them are not needed to be exported. So having this index.js may lead to a cleaner and more readable code.

We are done! Our package is ready to use/publish. Let’s see how we can use it without publishing it on Npm.

How to use the custom package in React

While the package is not available via npm, we need to add it manually inside our React project.

To do so, open package.json of your React Project and add the following line to dependencies:

"myfirstmodule": "file:local_modules/myfirstmodule"

Then run npm install. Package is ready to use :) Simply import it in every React Component:

Please note, in import statement, curly brackets are needed while there’s no default export in our module’s index.js file.
Learn more about import and export in ES6 modules here.

From now on, enjoy writing your own reusable modules which may be UI components (menu, custom lists, …) or logical modules (Network/Serializer layer, …).
Feel free to share this article and also comment any questions.

Happy Moduling :)