DEV Community

Cover image for The Easiest way to create React NPM packages
vito.mohagheghian
vito.mohagheghian

Posted on • Updated on

The Easiest way to create React NPM packages

In this tutorial I will be showing you how to create UI react NPM packages, which is the most easiest one to transform ideas to packages and modules. This will definitely help you to make your own packages without limitations. ⚗️

However, It's not efficient for modules or some non-UI packages. ⚠️

Table of contents:


Getting Started

This tutorial is a step-by-step guide, so don't worry about anything, I will cover everything you need.

If you are ready, let's get started. 🚀

1. Install Create-react-library

First, we have to install a package called create-react-library, so open up your terminal, and install it, using npm or yarn.

# This package requires node >= 10
npm install -g create-react-library
# or
yarn global add create-react-library
Enter fullscreen mode Exit fullscreen mode

If yarn global didn't work check this out.

2. Create react library

then run using npx run this command.

npx create-react-library
Enter fullscreen mode Exit fullscreen mode

after entering the package name, etc. You need to choose the package manager and template(default: JavaScript).

I have to mention that during running this command yarn install will somehow break, so you can manually run it by yourself

Image description

3. Enter the folder

then enter your directory using:

cd (your package name)
Enter fullscreen mode Exit fullscreen mode

4. Install node modules dependencies

If your yarn install broke, you can run it now.

# using npm
npm install
# using yarn
yarn install
# or simply 
yarn 
Enter fullscreen mode Exit fullscreen mode

5. Install Example folder node modules dependencies

After that enter the example folder, this is like a usual react app, in which you can develop and test your package. Cool, Right?
then run yarn install again.

cd example/

yarn install
# or 
npm install
Enter fullscreen mode Exit fullscreen mode

6. Start developing

Now everything is alright, and you simply need to split or open a new terminal to run the package.

So now you have two terminals one for running the package, and one for running the /example react app.

both of them will run with:

yarn start
# or 
npm start
Enter fullscreen mode Exit fullscreen mode

now you can open your VSCode(if you're using that) with the terminal in main / root, using this command:

code .
Enter fullscreen mode Exit fullscreen mode

7. Deployment

Now you have to make a new NPM account.

then back to your terminal, and run

npm init
Enter fullscreen mode Exit fullscreen mode

And enter the information, then you need to authorize, and log in to your account using the terminal using the command:

npm login
Enter fullscreen mode Exit fullscreen mode

After that Just run go to your IDE, and open package.json, and change this "private": true, to this "private": false,.

everything is okay for running this command and publishing your package.

npm publish
Enter fullscreen mode Exit fullscreen mode

My packages

I developed some simple packages with this method, you can check them in my NPM account, and there are GitHub links, so you check codes, too.👍

Hope you enjoy it. 🧑‍💻👩‍💻💖

I would like to see your packages, so leave me the link to your npm packages in the comments 💬.

My Github page 🌈
My Portfolio 🚀

Back to top

Top comments (0)