Last updated:
5 min read
Step-by-Step guide to make your first react package
Rakesh Potnuru

Step-by-Step guide to make your first react package

If you ever made an application with react, then you must have used lots of reactjs 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.


  1. React
  2. npm 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
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.
1"peerDependencies": { 2 "react": "^17.0.2", 3 "react-dom": "^17.0.2" 4}
  • 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.


  • 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

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 added our component to stories. To do that, in your <Component>.stories.js-
1import React from "react"; 2import { storiesOf } from "@storybook/react"; 3 4import Button from "../components/Button"; 5 6// create story 7const stories = storiesOf("Button", module); 8 9// add component to stories 10stories.add("Button", () => <Button />);

So this is the syntax to create a story.

  • Now start your storybook server-
npm run storybook

story example

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

Step 4 - Prepare to build the 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 along with some plugins.

  • Install rollup as a dev dependency
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-
1import babel from "rollup-plugin-babel"; 2import resolve from "@rollup/plugin-node-resolve"; 3import external from "rollup-plugin-peer-deps-external"; 4import { terser } from "rollup-plugin-terser"; 5import postcss from "rollup-plugin-postcss"; 6 7export default [ 8 { 9 input: "./src/index.js", 10 output: [ 11 { 12 file: "dist/index.js", 13 format: "cjs", 14 }, 15 { 16 file: "dist/", 17 format: "es", 18 exports: "named", 19 }, 20 ], 21 plugins: [ 22 postcss({ 23 plugins: [], 24 minimize: true, 25 }), 26 babel({ 27 exclude: "node_modules/**", 28 presets: ["@babel/preset-react"], 29 }), 30 external(), 31 resolve(), 32 terser(), 33 ], 34 }, 35];

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
1"scripts": { 2 "build": "rollup -c" 3}
  • 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 the module field and set it to "dist/"
1... 2"main": "dist/index.js", 3"module": "dist/", 4...
  • After completing all things, run-
npm publish
  • That's it, you can check your package on the npm registry

Congrats on publishing your first react package 🎉. congrats gif

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

⚒️Tool of the week⚒️

Front-End-Checklist Are you a front-end developer? Then go through this checklist before deploying your application.



Dockerizing Your MERN Stack App: A Step-by-Step Guide

    14 min read

Dockerizing Your MERN Stack App: A Step-by-Step Guide

Are you tired of spending hours messing with crontabs and installing packages in an attempt to run your app locally? Are you sick of always missing a dependency that doesn't allow you to run the app and therefore you have to debug it for hours trying to find what's wrong? Then you've come to the right place. In this article, you will learn how to make use of Docker to develop and ship your software faster and easier.

Introducing Publish Studio: Power Digital Content Creation

    3 min read

Introducing Publish Studio: Power Digital Content Creation

Say “Hi” to Publish Studio, a platform I’ve building for the past few months. If you are a content writer, then you should definitely check it out. And if you are someone who has an audience on multiple blogging platforms and need an easy way to manage your content across platforms, then you should 100% give it a try.

Subscribe to Newsletter


  • Never miss an update.
  • Get articles and snippets directly to your inbox.
  • Subscribe to stay connected and avoid getting lost among millions of websites.


  • Coming soon...