How to create simple ReactJS package

You may have already encountered the problem that you used the same code in your projects. Whether they are components or functions. You do not want to write your code twice. Then the rule applies: “Write once, run everywhere.”. These cases are suitable for creating NPM libraries.

We are not going to talk about how to create a ReactJS application from the beginning. Probably if you read this article, you already know it. We are going to talk about what do you to be able to create an NPM package and publish it as an NPM package.

Grab a cup of coffee and let’s do it … ☕️

NPM Account

If you still do not have an account, create one right here.

Project setup

One easy way how to initiate your project structure is to create new react application. Otherwise, you need to have configured correctly your package.json and source code files.

Project structure

The project structure is very simple so every react developer understands what are the folders and files for. We have one main folder called src in where is source code of our package.
There is index.js as the main component which is imported and reused in projects where is the package installed. Along with the main index file, there are also secondary components.

A more important folder for us called build. This folder includes built files to be used in projects. It means, that everything that we write in the source folder is compiled to browser-compatible JavaScript out.

Components preview

We are developing a package, not an application. So we can remove all files that are created with new react applications e.g. serviceWorker.js e.t.c. There is a question then: How can we develop components without visual control?

We are using Storybook. It is a library that helps you to document your components. So our project is extended by files related to Storybook.

Make it publishable

In our project’s root, we should have file package.json where are informations about the project, dependencies we are using as well as available scripts.

What is important to set up in package.json are information about the package name, what is the version, which is the main package folder, and publish config.

We recommend to add several additional information that serves as and package meta data e.g. author, description, keywords, licence, website

Example package.json:

{
  "name": "react-multilevel-dropdown",
  "version": "1.0.5",
  "author": "Kontentino",
  "description": "ReactJS multilevel dropdown component",
  "private": false,
  "main": "build/index.js",
  "keywords": [
    "kontentino",
    "react dropdown",
	...
  ],
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/kontentino/react-multilevel-dropdown.git"
  },
  "bugs": {
    "url": "https://github.com/kontentino/react-multilevel-dropdown/issues"
  },
  ...
}

Create final source code

After all setup, we are able to develop. I hope you know how to React, do not you? 🤔

If we want to generate reusable source code we need to compile our components to browser-compatible code. There are several compilers you can use. Here are some of them:

Custom configuration:

We set command npm run build, to build code to build folder where are all compiled files along with package.json file.

Make it public

Once we have everything ready, there is no reason to wait for us to publish it. What are we exactly publishing? We do not need to publish the whole project to NPM. Only what we need to publish is compiled code. That code is what we, or any users, are going to download, install, and use.

How to publish only files in an accurate folder? There is nothing complicated. We just need to add .npmignore, which is similar to .gitignore, and add there all files and folders we need to ignore during uploading to NPM. All other files we need to keep out of the package.

In this case, in our package.json, we have defined that our main folder is build/index.js.

The last 3 steps

Once we have configured everything necessary for the package, there are 3 more steps that separate us from the final line. These 3 steps are 3 commands in the terminal – login to NPM account, setup version – for next versions only, and release.

Command for publishing NPM package

Examples

If you are interested in, how many other packages can look like, we are inviting you to visit our Kontentino Github open source projects where you can find our ReactJS library react-multilevel-dropdown but also packages like react-style-classes, array-semantic-join, or ESlint config.

#npm#package#react#reactjs#tutorial
WRITTEN BYPatrik Mäsiar