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
• Create react library
• Enter the folder
• Install node modules dependencies
• Install Example folder node modules dependencies
• Start developing
• Deployment

---

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

If yarn global didn't work check this out.

2. Create react library

then run using npx run this command.

npx create-react-library

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

3. Enter the folder

then enter your directory using:

cd (your package name)

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 

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

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

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

code .

7. Deployment

Now you have to make a new NPM account.

then back to your terminal, and run

npm init

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

npm login

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

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