The Easiest way to create React NPM packages
Tags: webdev, react, npm, javascript
Published: 2023-01-09 19:34:21

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](#getting-started)
- [Create react library](#2-create-react-library)
- [Enter the folder](#3-enter-the-folder)
- [Install node modules dependencies ](#4-install-node-modules-dependencies)
- [Install Example folder node modules dependencies ](#5-install-example-folder-node-modules-dependencies)
- [Start developing](#6-start-developing)
- [Deployment](#7-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](https://www.npmjs.com/package/create-react-library)

First, we have to install a package called [create-react-library](https://www.npmjs.com/package/create-react-library), so open up your terminal, and install it, using npm or yarn.

```bash
# 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](https://stackoverflow.com/questions/40317578/yarn-global-command-not-working) out.

### 2. Create react library 
then run using npx run this command.

```bash
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**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvz3pl0nct1rhnu3mrd0.png)

### 3. Enter the folder
then enter your directory using:

```bash
cd (your package name)
```


### 4. Install node modules dependencies 
If your yarn install broke, you can run it now.
```bash 
# 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.

```bash 
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:

```bash
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:

```bash
code .
```

### 7. Deployment
Now you have to [make a new NPM account](https://www.npmjs.com).

then back to your terminal, and run
```bash
npm init
```
And enter the information, then you need to authorize, and log in to your account using the terminal using the command:
```bash
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.

```bash
npm publish
```  

### My packages
I developed some simple packages with this method, you can check them in my [NPM account](https://www.npmjs.com/~vito.mohagheghian), 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](https://github.com/vito-mohagheghian) 🌈
My [Portfolio](https://vito-dev.ir) 🚀

[Back to top](#table-of-table-of-contents)