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.
- npm account
Let's get started
Step-1 - Initialize the project
⚠️ - Don't create project with
- Create a project ->
- Now we have to make sure the user have these installed, so we can add them as peer dependencies in
- Create a
srcfolder and add an
index.jsfile. Inside that
- Our project folder structure so far-
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
- Now you can see in the
src/storiesfolder it created some example stories. You can delete them.
Step-3 - Start creating stories
- Create a component in
src/componentsfolder. For example,
- Now create a story in
src/storiesand name it as
<Component>.stories.js. For example,
- Import your component into
- In order to see our component we have added our component to stories. To do that, in your
So this is the syntax to create a story.
- Now start your storybook server-
- Go to localhost:6006, you can see your rendered component there.
- 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
- We also need some plugins for rollup and to remove react modules in our package(Because users will already have them installed).
- Create a file called
rollup.config.jsat the root level of the project.
- And you can add this configuration-
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
- That's it, now you can see a folder called dist which contains all our code bundled together.
Step 5 - Publish to npm
- Create an account on [npm] if you don't have it already.
- Connect to npm with
- 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
- You need to make two changes to your
- Change main from "index.js" to "dist/index.js"
- Add the module field and set it to "dist/index.es.js"
- After completing all things, run-
- That's it, you can check your package on the npm registry
Congrats on publishing your first react package 🎉.
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.
LEAVE A COMMENT OR START A DISCUSSION
6 min read
All types of POST Requests with API Tester mobile app
Post requests are the most common types of requests that we perform on the internet and it is very useful in our day-to-day work life. These methods are those which are used to transfer data from a web browser to the server. In this article, I will teach you how to test post requests using API Tester mobile app.
9 min read
How to write tests in full-stack MERN web application
Only by writing tests can you understand the significance of testing. No coding Bootcamp or course, as far as I know, teaches you how to write tests. Writing tests may not be necessary for demo projects or coursework projects, but it is critical for real-world applications. So, in this Part 3 of the “Let’s build and deploy a full stack MERN web application” series, I’ll demonstrate how to write tests for ReactJs components and ExpressJs RESTAPI.