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

แชร์
ฝัง
  • เผยแพร่เมื่อ 25 ต.ค. 2024

ความคิดเห็น • 49

  • @tapasadhikary
    @tapasadhikary  10 หลายเดือนก่อน +2

    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

  • @suvasispatra6389
    @suvasispatra6389 2 หลายเดือนก่อน +2

    loved it 🤩

  • @swaponsaha8111
    @swaponsaha8111 5 หลายเดือนก่อน +2

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

    • @tapasadhikary
      @tapasadhikary  5 หลายเดือนก่อน

      You are most welcome

  • @surajpatil6849
    @surajpatil6849 2 หลายเดือนก่อน +1

    Thank you Sir 🤩

  • @shlomomoller7440
    @shlomomoller7440 5 หลายเดือนก่อน

    Tapas, you're a gifted educator!

    • @tapasadhikary
      @tapasadhikary  5 หลายเดือนก่อน

      ❤️❤️❤️

  • @shlomomoller7440
    @shlomomoller7440 5 หลายเดือนก่อน

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

    • @tapasadhikary
      @tapasadhikary  5 หลายเดือนก่อน

      You are most welcome ❤️

  • @kazmuz5916
    @kazmuz5916 3 หลายเดือนก่อน

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

    • @tapasadhikary
      @tapasadhikary  3 หลายเดือนก่อน

      @@kazmuz5916 sure, will do. Thanks a lot ❤️

  • @OjitDebNath
    @OjitDebNath 10 หลายเดือนก่อน +2

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

    • @tapasadhikary
      @tapasadhikary  10 หลายเดือนก่อน

      Very cool, will do a rollup video

  • @AsGamer-sif1t
    @AsGamer-sif1t 10 หลายเดือนก่อน +1

    really helpful video .
    Thanks for sharing with us❤❤

    • @tapasadhikary
      @tapasadhikary  10 หลายเดือนก่อน

      My pleasure… lets create ❤️

  • @farhadjaman5580
    @farhadjaman5580 10 หลายเดือนก่อน +1

    thank you for this amazing video sir.

    • @tapasadhikary
      @tapasadhikary  10 หลายเดือนก่อน

      Most welcome, Farhad ❤️

  • @aakashvishwakarma2243
    @aakashvishwakarma2243 9 หลายเดือนก่อน +1

    Great video

  • @Vjprathap0
    @Vjprathap0 2 หลายเดือนก่อน

    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.

    • @tapasadhikary
      @tapasadhikary  2 หลายเดือนก่อน +1

      @@Vjprathap0 thank you 🙏. Appreciate your comment.

  • @sanjuwa2677
    @sanjuwa2677 8 หลายเดือนก่อน +1

    learned about rollup. Thanks

  • @sayantanmanna1360
    @sayantanmanna1360 7 หลายเดือนก่อน

    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!!
    Thankssssss a lottttt for bringing this one, take love 🤗🤗.

    • @tapasadhikary
      @tapasadhikary  7 หลายเดือนก่อน +1

      Haha, that's great :)

  • @namratadas5569
    @namratadas5569 2 หลายเดือนก่อน +1

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

  • @injamamislamchowdhury7939
    @injamamislamchowdhury7939 10 หลายเดือนก่อน +1

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

    • @tapasadhikary
      @tapasadhikary  10 หลายเดือนก่อน +1

      Yes that's right. Please follow all the steps, if you got issue.. Let us know on discord.

    • @injamamislamchowdhury7939
      @injamamislamchowdhury7939 10 หลายเดือนก่อน

      @@tapasadhikary lot of thanks!

  • @Anguraj92
    @Anguraj92 10 หลายเดือนก่อน +1

    Thank you

    • @tapasadhikary
      @tapasadhikary  10 หลายเดือนก่อน

      Most welcome ❤️

  • @otis2646
    @otis2646 หลายเดือนก่อน +1

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

    • @tapasadhikary
      @tapasadhikary  หลายเดือนก่อน

      Yes, yes console ninja

  • @YtOk-bc7kr
    @YtOk-bc7kr 5 หลายเดือนก่อน

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

  • @gangstacoder4234
    @gangstacoder4234 6 หลายเดือนก่อน +1

    How can we add ts support

    • @tapasadhikary
      @tapasadhikary  6 หลายเดือนก่อน

      Will add a separate video as part of my TS playlist.

  • @AkonMHasib_Official
    @AkonMHasib_Official 10 หลายเดือนก่อน +1

    ❤❤❤❤❤❤❤❤

  • @abdurrahman720
    @abdurrahman720 8 หลายเดือนก่อน +1

    getting error for react component

    • @tapasadhikary
      @tapasadhikary  8 หลายเดือนก่อน

      Yes for react component you need to add additional configs. We have discussed it in tapaScript discord. You can catch up there.

  • @codingzen869
    @codingzen869 10 หลายเดือนก่อน +2

    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.

    • @tapasadhikary
      @tapasadhikary  10 หลายเดือนก่อน

      Sure. However, the purpose of the content would be different. Here the intention is to show the flow(in a straightforward way).
      The one you are asking is to describe and build a use case that can be done without explaining the package building flow.
      Let me know if you got any mid size use case in mind. I shall consider it after review. Thanks for your comment 👍

    • @codingzen869
      @codingzen869 10 หลายเดือนก่อน

      This is really great content. Don't get me wrong. :) What I meant to say is that the community lacks contents about how to approach and architecture a bit larger projects or packages, how to structure the codes or the modules etc. An example video would be probably implementing a wrapper for an existing API where the package will probably make it easier to call the API, or maybe modify the called data to fit the actual use case needs, or maybe creating a smaller version of jQuery, an image slider, a carousel with custom config, time tracker for ongoing projects, whatever suits you. Would love to watch one.

    • @tapasadhikary
      @tapasadhikary  10 หลายเดือนก่อน +1

      @codingzen869 great points. I'll plan something around it 👍

  • @danish7335
    @danish7335 6 หลายเดือนก่อน

    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...