How To Publish React Hooks And Components As NPM Package? A Beginner's Guide
4,175 views
0

 Published On Dec 16, 2023

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:
- https://github.com/atapas/tapas-count...

Learn Rollup:
- https://rollupjs.org/tutorial/

The Custom Hook NPM Boilerplate
- https://github.com/atapas/custom-hook...

ReactJS Playlist on tapaScript
-    • 01 - A complete roadmap to learn Reac...  

Join tapaScript Discord Server
-   / discord  

How to Submit the Task?
- Complete the task given in the video.
- Join tapaScript Discord Link:   / discord  
- Post your task in the "general" channel.

Special Links:
- Are you looking for the best NextJS templates to start your project development? Download and use them for FREE: https://www.wrappixel.com/templates/c...
- If you are looking for the best content management system, here is something for FREE that you can rely on: https://app.caisy.io/app/signup/mwiyy...

🤝 My Links:
- Blog: https://blog.greenroots.info/
- Follow on X(Twitter):   / tapasadhikary  
- Connect on LinkedIn:   / tapasadhikary  
- Follow My Work on GitHub: https://github.com/atapas
- Follow on Facebook:   / tapasadhi  

👋 Like my work? Thank You. You can sponsor me from here:
- Sponsor Me: https://github.com/sponsors/atapas
- Sponsor my Blog: https://blog.greenroots.info/sponsor

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.

You can find more about him at https://tapasadhikary.com.

show more

Share/Embed