Building a React Component Library: A Senior Developer's Guide

Поделиться
HTML-код
  • Опубликовано: 3 окт 2024

Комментарии • 35

  • @jenniferjohnston9236
    @jenniferjohnston9236 12 дней назад +1

    excellent tutorial, especially the parts on unit testing and storybook. for bundling I use tsup which is another really solid approach, saves the headache of configuring babel.

    • @imrancodes
      @imrancodes  11 дней назад +1

      Thank you Jennifer. I will have to take a look at the docs and check it out!

  • @dreamdrifter
    @dreamdrifter 7 дней назад +1

    SUBSCRIBED! Keep making content mate, this is top stuff.

    • @imrancodes
      @imrancodes  4 дня назад

      Thanks! Really appreciate your kind words

  • @nicoelyorugua
    @nicoelyorugua 27 дней назад +2

    I really enjoyed the video, thank you so much! It would be great if you could continue this series by creating various components for the library. Thanks in advance!

    • @imrancodes
      @imrancodes  19 дней назад +1

      Great suggestion! I will think about this

  • @ebn646
    @ebn646 Месяц назад +1

    This is so good to know.

  • @jbwebdevtips2479
    @jbwebdevtips2479 2 месяца назад +3

    I try doing this on my own but I got lost. Finally, I saw this.

    • @imrancodes
      @imrancodes  2 месяца назад +1

      Thanks for watching!

  • @DigitalArchitectures
    @DigitalArchitectures 2 месяца назад +1

    just what i needed. still getting comfortable but looking forward for more.

    • @imrancodes
      @imrancodes  2 месяца назад +1

      Thank you and keep it up

  • @htl4443
    @htl4443 2 месяца назад +2

    Thank you so much bro, that really help me alot!.

    • @imrancodes
      @imrancodes  2 месяца назад +1

      No worries. Glad it helped

  • @akibmahmudrime2845
    @akibmahmudrime2845 2 месяца назад +1

    very nice and informative video. Thanks

  • @AwaisOtho
    @AwaisOtho Месяц назад +1

    Explained very well❤❤

  • @Rajesh-rg6fw
    @Rajesh-rg6fw Месяц назад +1

    Is this best approach used in production? And what about if some one wants to use tools like sanity, Google analytics.. so on. Will you still recommend to use react or next.js?

    • @imrancodes
      @imrancodes  Месяц назад

      In this scenario yes. You have rollup as your module bundler then the benefits of react to have the modularity and ability to use props. There’s no need for next js and that has an express server which you don’t need. With a component library you can host on npm and import into whatever project you are using. Can be next react or anything else then you can add tools such as sanity in your project.

  • @gary7135
    @gary7135 3 месяца назад +1

    Please make a turbo repo version with all those libraries tutorial~~

    • @imrancodes
      @imrancodes  3 месяца назад +1

      I will have a look at this

    • @gary7135
      @gary7135 3 месяца назад

      @@imrancodes Thanks!!!

  • @Felix.942
    @Felix.942 Месяц назад +1

    What if I only want to install one ui component of the published package?

    • @imrancodes
      @imrancodes  Месяц назад

      You can import the component that you want to use and with the tree shaking functionality that is the best approach.
      So you would need to install the entire library to do this

    • @Felix.942
      @Felix.942 Месяц назад

      @@imrancodes Thank you

  • @olivebishop3794
    @olivebishop3794 Месяц назад +1

    same apporach on next js 14 ap router ?

    • @imrancodes
      @imrancodes  Месяц назад

      Yes why not keep it simple. Or you can use middleware on serverside to determine the branch based on the URL in a switch statement and then pass the props to client and handle brand that way

  • @maresal4271
    @maresal4271 5 месяцев назад +1

    amazing

  • @jenn9233
    @jenn9233 5 месяцев назад +1

    The eslint that I installed doesn't have a JSON config format option, and by default it creates a config file with MJS format, how about that?

    • @imrancodes
      @imrancodes  5 месяцев назад

      This should be fine just follow along the steps. You can always change your eslint config file when it’s created

  • @sameerfaridi2
    @sameerfaridi2 5 месяцев назад +1

    hii imran sir i need your help kindly tell me what is :
    LOCAL_VERSION
    GH_TOKEN
    CURRENT_VERSION
    and how can i implement them

    • @imrancodes
      @imrancodes  5 месяцев назад

      These are environment variables that you can save in the circle ci project
      I recommend doing the release and publish to npm jobs manually

  • @kathybrooke5443
    @kathybrooke5443 5 месяцев назад +1

    Promo'SM