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

Поділитися
Вставка
  • Опубліковано 18 жов 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

    loved it 🤩

  • @swaponsaha8111
    @swaponsaha8111 5 місяців тому +2

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

  • @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

  • @shlomomoller7440
    @shlomomoller7440 4 місяці тому

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

  • @kazmuz5916
    @kazmuz5916 2 місяці тому

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

    • @tapasadhikary
      @tapasadhikary  2 місяці тому

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

  • @AsGamer-sif1t
    @AsGamer-sif1t 10 місяців тому +1

    really helpful video .
    Thanks for sharing with us❤❤

    • @tapasadhikary
      @tapasadhikary  10 місяців тому

      My pleasure… lets create ❤️

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

  • @surajpatil6849
    @surajpatil6849 2 місяці тому +1

    Thank you Sir 🤩

  • @shlomomoller7440
    @shlomomoller7440 4 місяці тому

    Tapas, you're a gifted educator!

  • @farhadjaman5580
    @farhadjaman5580 10 місяців тому +1

    thank you for this amazing video sir.

  • @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 🤗🤗.

  • @aakashvishwakarma2243
    @aakashvishwakarma2243 9 місяців тому +1

    Great video

  • @sanjuwa2677
    @sanjuwa2677 7 місяців тому +1

    learned about rollup. Thanks

  • @namratadas5569
    @namratadas5569 2 місяці тому +1

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

  • @AkonMHasib_Official
    @AkonMHasib_Official 10 місяців тому +1

    ❤❤❤❤❤❤❤❤

  • @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

  • @YtOk-bc7kr
    @YtOk-bc7kr 4 місяці тому

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

  • @otis2646
    @otis2646 Місяць тому +1

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

  • @gangstacoder4234
    @gangstacoder4234 6 місяців тому +1

    How can we add ts support

    • @tapasadhikary
      @tapasadhikary  6 місяців тому

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

  • @danish7335
    @danish7335 5 місяців тому

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

  • @abdurrahman720
    @abdurrahman720 7 місяців тому +1

    getting error for react component

    • @tapasadhikary
      @tapasadhikary  7 місяців тому

      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 👍