Storybook with React (Complete Tutorial)

Поділитися
Вставка
  • Опубліковано 5 січ 2025

КОМЕНТАРІ •

  • @luciamarconi3876
    @luciamarconi3876 Місяць тому

    great explanation! Watched a few videos before but yours was the best for me to actually get all the Storybook's basics.

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

    I already have learned a lot from u when I started React, now i am working with Next js, i hope you add Next js videos or even playlists soon, thanks a lot for this content

  • @bljdev
    @bljdev 18 днів тому

    your explanation is very good, maybe it's too fast, but you not missing any important details and rationale behind something. That's good. Now I understand the concept of Storybook and the potential of it.

  • @keifer7813
    @keifer7813 5 місяців тому +11

    Would be nice to see some sort of daily workflow at a typical frontend job from start to finish

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

    Thanks man, This video really helped me in understanding the storybook concept

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

    Great tutorial as always Cosden.
    Love your stuff, keep doing this video tutorials on different ui tools.
    Me and I'm sure many other experienced developers learning a lot from this.
    I'd be happy if you make a tutorial about Figma and integration of it with React.

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

    Watched a couple of your videos, you actually stop and explain what's happening or why there's an error, so many videos of people explaining similar stuff but they just continue on like you've immediately understood it. Top tier content man. You're doing it right.

  • @МишаКолоденец
    @МишаКолоденец 2 місяці тому

    Thanks! Great tutorial as always!

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

    Brilliant, thank you 🔥

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

    What an amazing tool, was about to start a project where we have to create a system design for a company and provide a react pkg for developping apps based on it.
    That would definitely meet our goal in terms of documentation :D

  • @mettle_x
    @mettle_x 5 місяців тому +9

    Storybook doesn't scale linearly as a project grows larger. For constantly evolving projects, it becomes a burden for these reasons: maintenance overhead, performance issues, increased build times, divergence from real-world usage, additional learning curve for new team members and overlapping functionality with other testing tools.

    • @sagarmusabbir
      @sagarmusabbir Місяць тому

      What do you suggest for a ui component library project?

    • @aurelianspodarec2629
      @aurelianspodarec2629 29 днів тому +1

      @@sagarmusabbir Maybe a simple .html page with each component and variation like bootstrap does? Seems like simple always prevails.

  • @akshaysrivastava4304
    @akshaysrivastava4304 Місяць тому

    perfect video

  • @RavindraSingh-lp9pl
    @RavindraSingh-lp9pl 5 місяців тому

    Wonderful video...hats off

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

    Great Tutorial 🎉

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

    wow thank you a lot!

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

    whit the way you added the types , i want to know how can i add description and details in the doc section ??

  • @harag9
    @harag9 3 місяці тому

    Great video, might look into storybook at work when I get some time. One thing, can you turn off the constant zooming in/out please. it makes it harder to follow sometimes.

  • @tongyu9470
    @tongyu9470 Місяць тому

    Hello! I'm working on building stories in Storybook for the React framework at my internship company, and I noticed that if the story contains arrow functions, the "Show code" section displays ()=>{}. I found online that it can be addressed using parameters.docs.source.code or transform, but my supervisor thinks this makes the source code appear cluttered. Is there a more fundamental way to solve this?

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

    How about if i have several components in my design system? I have to write all args type? Is there a better way to impelement them but writting them?

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

    Hey Darius,
    I have a question for you about this topic.
    If one of my component props contain object or array as value,
    what is the best way to implement this in story?

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

    Iove the quality and content of the videos
    Keep doing Bro

  • @mike-aaa
    @mike-aaa 4 місяці тому

    In TS i have 'numberOfChildren' is missing in props validation ERROR

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

    Please make a video on the process of taking React code from local to production, how things are automated.

  • @ptolemyhenson6838
    @ptolemyhenson6838 5 місяців тому +1

    Do you have a tutorial for publishing React libraries through NPM with JavaScript and not typescript? I'm trying to have better management of my utilities by making them packages instead of copying them to every project. Every tutorial I've seen does It specifically for typescript, and there's some discrepancy there because I can't get my projects to actually recognize the modules even though they are published and NPM install works.

  • @amranmohamed377
    @amranmohamed377 3 місяці тому

    How can we clone this repo only

  • @snivels
    @snivels 5 місяців тому +1

    The only issue I have with making a union type with additional storybook-specific props is that it doesn't clearly show what props are available to the component in the UI as actual component properties, you have to actually check the code for that, which I feel kind of defeats the purpose. I know you don't have to use additional props, just my two cents :)

    • @HuyLe-zx8ko
      @HuyLe-zx8ko 5 місяців тому

      Totally agree. Adding extra props for story component leads to confusion for other devs.

    • @bljdev
      @bljdev 18 днів тому

      agree as well with this

  • @avciua8082
    @avciua8082 5 місяців тому +4

    Great stuff, tho I still don’t get the idea of existence of this tool 😅

    • @bljdev
      @bljdev 17 днів тому

      this is usefull, but not everyone, I imagine large organization, have dedicated team just only prepare stories then this tool make sense

  • @alphaOrderly
    @alphaOrderly Місяць тому

    Anyone has problem with fn, run
    npx storybook@latest upgrade
    to update your storybook to latest version and install @storybook/test in dev dependency

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

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

    I love your channel but can you explain why not nextjs? ❤

    • @bljdev
      @bljdev 17 днів тому

      because next.js very specific, using React+Vite is just the powerfull generic one

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

    the constant zooming in and out and following your cursor is really bothersome and makes the video hard to follow, the content is really good and you explained things well its just this 'small' visual thing that made me lose track of what was going

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

    First here