How To Publish React Hooks And Components As NPM Package? A Beginner's Guide #react #rollup #npm

What are you doing today? Let's do something for the developer community. Let us create an NPM package and publish it from our ReactJS code.

We will create a web development project, write a custom ReactJS hook, build the project with modification and source map with Rollup, create the NPM package, test it, and finally release it as a public NPM package.

After watching this video, I hope you can create your own NPM package easily. Also, I have provided a boilerplate for you(find the link below) to create an NPM package easily and quickly from your ReactJS codebase.

Why waiting? Let's GO 🚀

I take special care to provide you the best quality. Please LIKE/SHARE/SUBSCRIBE to the channel to show your support. Also, could you like/comment on this video so that it reaches others? Thanks! 🫶

Timecodes
0:00 - Introduction and What is NPM?
02:10 - What Do You Need To Know First?
05:10 - Initialize Project.
07:41 - Setting up Rollup
11:44 - Create A ReactJS Custom Hook.
18:11 - How To Setup Minification and Sourcemap With Rollup?
22:03 - Create Build Scripts And Build The Project.
26:35 - Create an NPM Package Locally.
29:44 - Test The NPM Package Locally.
33:57 - Publish The NPM To Public Repository
36:58 - Use The NPM From The Public Repository
38:00 - A Boilerplate For You To Create NPM Package From ANy ReactJs Code.
39:14 - Task For You

## The Source Code Used In The video:

## Learn Rollup:

## The Custom Hook NPM Boilerplate

## ReactJS Playlist on tapaScript

## Join tapaScript Discord Server

## How to Submit the Task?
- Complete the task given in the video.
- Post your task in the "general" channel.

## Special Links:

## 🤝 My Links:

## 👋 Like my work? Thank You. You can sponsor me from here:

## About Me:
Tapas Adhikary is an Educator at tapaScript, Tech enthusiast, Writer, YouTuber, and Open Source projects maintainer/contributor. He is a full-stack developer who has vast experience in building SaaS solutions. He is the founder of the ReactPlay platform, which is driven by open-source projects and a fast-growing community.

[tapasadhikary]

Topics Covered In this Video:

0:00 - Introduction and What is NPM?
02:10 - What Do You Need To Know First?
05:10 - Initialize Project.
07:41 - Setting up Rollup
11:44 - Create A ReactJS Custom Hook.
18:11 - How To Setup Minification and Sourcemap With Rollup?
22:03 - Create Build Scripts And Build The Project.
26:35 - Create an NPM Package Locally.
29:44 - Test The NPM Package Locally.
33:57 - Publish The NPM To Public Repository
36:58 - Use The NPM From The Public Repository
38:00 - A Boilerplate For You To Create NPM Package From ANy ReactJs Code.
39:14 - Task For You

[swaponsaha]

this is my first video with npm package publish ... thank you dada 💌💌💌💌

[shlomomoller]

This is an excellent video! Thank you so much Tapas! Best guide on this topic!!

[shlomomoller]

Tapas, you're a gifted educator!

[OjitDebNath]

Really awesome video and we want next video about rollup. Thank you❤

[kazmuz]

Thank you so much sir, I'm so happy I found your video and channel, please keep it up!!!

[Vjprathap]

Hai tapas, Last 10 days I have been trying to create a npm package without any idea nd got lots of errors, your video give best roadmap, it is very clear and very very useful for me, Thank you so much.

[AsGamer-sift]

really helpful video .
Thanks for sharing with us❤❤

[sayantanmanna]

I'm not sure if you remember, I asked exactly for such a tutorial to create and publish npm package in one of your previous videos. It seems I'm a bit late at the party but who cares!!
a for bringing this one, take love 🤗🤗.

[namratadas]

Great video! Can u plz guide how to create a private npm package?

[otis]

32:52 how you were able to see console.log in vs code ? any extension ?

[YtOk-bckr]

can we identify whether ecmascript have been used in our project?

[injamamislamchowdhury]

awesome! really thanks for your dedication. if i want to publish any react component, will it be same proccedure as you have guided here?

[codingzen]

Why don't you make an actually useful and robust package explaining the architecture, code structure etc? Not like a big one, a medium sized one. That will be really great. Everybody shows the flow, but few shows building the real deal. Please do one.

[danish]

can you please explain me how can i create my own boilerplate just like create-react-app or vite and i also want to make the same package to also work as full stack project setup like installing all the dependies and all...