Guide to make your first react package
Tags: tutorial, react, npm, beginners
Published: 2021-12-14 13:05:53

If you ever made an application with react, then you must have used lots of react packages. Ever thought about making your own package? or Have an idea but don't know how? Then this blog is for you. In this blog, I will explain how to make your own react package and submit it to the npm registry.

## Prerequisites
1. React
2. [npm](https://www.npmjs.com/signup) account

## Let's get started

### Step-1 - Initialize the project
⚠️ - _Don't create project with `create-react-app`_
- Create a project -> `npm init`
- Install `react` and `react-dom` as **devDependencies**
```bash
npm i --save-dev react react-dom
```
- Now we have to make sure the user have these installed, so we 
    can add them as peer dependencies in `package.json`.
```json
"peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
}
```
- Create a `src` folder and add an `index.js` file. Inside that `src` folder create `components` folder.
- Our project folder structure so far-
```
react-pack/
├── src/
│   ├── components/
│   └── index.js
└── package.json
```

### Step-2 - Setup project
Now we need to see our components while we are building it, so how we can do it as we are not creating a regular react app? For this, we can use a tool called **[Storybook](https://storybook.js.org)**.


![storybook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxep8n6gowcn0f8z6bk8.png)

- To install the storybook, simply run this command -

⚠️ - _Make sure you have storybook CLI installed in order to run this command. To install storybook CLI, run_ `npm i @storybook/cli -g`

```bash
npx sb init
```
- Now you can see in the `src/stories` folder it created some example 
  stories. You can delete them.
```
react-pack/
├── src/
│   ├── components/
│   ├── stories/
│   └── index.js
└── package.json
```

### Step-3 - Start creating stories
- Create a component in `src/components` folder. For example, `Button.jsx`.
- Now create a story in `src/stories` and name it as `<Component>.stories.js`. For example, `Button.stories.js`
- Import your component into `<Component>.stories.js`.
```
react-pack/
├── src/
│   ├── components/
│   │   └── Button.jsx
│   ├── stories/
│   │   └── Button.stories.jsx
│   └── index.js
└── package.json
```
- In order to see our component we have add our component to 
  stories. To do that, in your `<Component>.stories.js`- 
```javascript
import React from "react";
import { storiesOf } from "@storybook/react";

import Button from "../components/Button";

// create story
const stories = storiesOf("Button", module);

// add component to stories
stories.add("Button", () => <Button />);
```
So this is the syntax to create a story.

- Now start your storybook server-
```bash
npm run storybook
```
- Go to [localhost:6006](http://localhost:6006), you can see your rendered component there.

![story example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptfj5lkbp1etn1hdt6wr.png)

- Like this, you can create a story for every component and see a preview with the storybook.

### Step 4 - Prepare to build project
Normally we create a build for our project after developing with `npm run build`. But now we can't do that. So to build the project we have to use another tool called **[rollup.js](https://rollupjs.org)** along with some plugins.
- Install rollup as a dev dependency
```bash
npm install rollup --save-dev
```
- We also need some plugins for rollup and to remove react modules in our package(Because users will already have them installed).
```
npm install rollup @rollup/plugin-node-resolve rollup-plugin-babel rollup-plugin-peer-deps-external rollup-plugin-postcss rollup-plugin-terser @babel/preset-react --save-dev
```

- Create a file called `rollup.config.js` at the root level of the project.
```
react-pack/
├── src/
│   ├── components/
│   │   └── Button.jsx
│   ├── stories/
│   │   └── Button.stories.jsx
│   └── index.js
├── package.json
└── rollup.config.js
```
- And you can add this configuration-
```config
import babel from "rollup-plugin-babel";
import resolve from "@rollup/plugin-node-resolve";
import external from "rollup-plugin-peer-deps-external";
import { terser } from "rollup-plugin-terser";
import postcss from "rollup-plugin-postcss";

export default [
  {
    input: "./src/index.js",
    output: [
      {
        file: "dist/index.js",
        format: "cjs",
      },
      {
        file: "dist/index.es.js",
        format: "es",
        exports: "named",
      },
    ],
    plugins: [
      postcss({
        plugins: [],
        minimize: true,
      }),
      babel({
        exclude: "node_modules/**",
        presets: ["@babel/preset-react"],
      }),
      external(),
      resolve(),
      terser(),
    ],
  },
];
```
 `input` - starting pointing of your project
 `output` - where your want to put all the build files
 `plugins` - plugins to use

- Now create a script to run rollup
```json
"scripts": {
    "build": "rollup -c"
}
```
- That's it, now you can see a folder called **dist** which contains all our code bundled together.
```
react-pack/
├── dist/
├── src/
│   ├── components/
│   │   └── Button.jsx
│   ├── stories/
│   │   └── Button.stories.jsx
│   └── index.js
├── package.json
└── rollup.config.js
```

### Step 5 - Publish to npm
- Create an account on [npm] if you don't have it already.
- Connect to npm with `npm login`.
- Choose a unique name for your package. (When publishing the 
  name of the package will be the same as the name of your project which 
  is in the `package.json` file)
- You need to make two changes to your `package.json` file
  - Change **main** from "index.js" to "dist/index.js"
  - Add **module** field and set it to "dist/index.es.js"
```JSON
...
"main": "dist/index.js",
"module": "dist/index.es.js",
...
```

- After completing all things, run-
```bash
npm publish
```

- That's it, you can check your package on the npm registry

Congrats on publishing your first react package 🎉.
![congrats gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8dzx4i7sy8qsi6i52qnc.gif)
 
---

Share your package in the comments below. I will try it 👀.

---

## ⚒️Tool of the week⚒️
[Front-End-Checklist](https://github.com/thedaviddias/Front-End-Checklist)
Are you a front-end developer? Then go through this checklist before deploying your application.

---

Hope this helps you!
Save for reference.
Follow for more deliciousness 😋.
You can connect with me on [Twitter](https://twitter.com/rakesh_at_tweet) and [LinkedIn](https://www.linkedin.com/in/rakesh-potnuru-067a8b1b1).