React Storybook Crash Course 

This guy's a perfect juxtaposition of "nerd" and "chad" and I don't even know how he manages it

thanks for your movies. I used to watch them during my bootcamp, when i wanted to become Dev. And I still watch them as they are useful at work :)

This is a perfect Storybook walkthrough... I am pretty confident to start this new role. Thank you

Perfect timing! Already liking storybook a lot thanks to your super condensed and helpful crash course 👋👌🤩

I highly recommend this video tutorial. This is easily the best video or even tutorial to start learning React Storybook with! I have followed along and code the 2 components. Through it, I have learnt so much. When I read up other tutorials and the official documentation, the concepts just fit like a puzzle.

That’s exactly what I needed to get started with the Storybook. Thanks a lot, you are doing a great job 👏

I had to learn this for my job and you explained Storybook so well. Great tutorial!!!!!😊👍🏽

I've used storybook for 2 years at 2 different companies. It's awesome

Excellent video! Love your content, very clear, precise and straight to the point. For readers, something not mentioned in the video is that the “args” object can also be specified in the export default object (above const Template) and it would apply to all exported stories (the ones below const Template), reducing the need to repeat the same, common args values in each story variation.

Storybook is great! I love using it with tsdx to create component modules.

Thank you for the simplified explanation! It was easy to understand and still interesting. Great tutorial! :)👏🧠

Thank you 🙏 I use storybook at work. It’s really helpful to understand the project. When you need to understand what this component does, just check your storybook. I liked your video so much. I hope you can make more videos about it. See you

.hair { position: fixed; }

After watching whole playlist from another youtuber, now I can say that I can keep up with Kyle's teaching speed and understand all of this storybook video haha, thanks Kyle

Excited for this one! Thanks for the video!

Nice timing! I read up quickly on storybooks a month ago and forgot about it. Will be fun to watch this and test some of it myself :D

man, I am back to your video to try. Now I understand how to do this. Fast and to the point. Thank you.

Great video! High tempo yet easy to follow

No way! You read my mind or something. At work they told me on Thursday to look into Storybook, we will start implementing it soon. And just like that you release a video about it, unbelievable!

Kyle I have learned so much from you. Thanks man... Thanks ❤

Finally found perfect video to understand the video. Good work bro

WDS has the highest value-per-minute of any web tech channel! This intro to not only informs me but actually motivates me to use Storybook! Outstanding work. Thanks.

Can't believe that were 17 minutes! Great style of explanation! I appreciate that you speak relatively fast, even as a non-native it was just perfect to follow along. Hallo but where

Thank you, great explanation. I am a beginner in SB and React. I just created my first app in react and installed my Sb. Your instructions were helpful. I could not catch up with the speed you created all the components in your story book, because I still have to master js. Great video though! Good for those who already know the js. I have to use typescript.

Thanks you. Now i have much more the concept storybook

Thanks for the great video, really clear view to the Storybook.

is just me or this chanel is the best ever!!!. thanks Kyle for this video

Thank you This is great explaining and sample to start with storybook

to the point tutorial now I am confident enough to write storybook in my cv

Finally a Storybook tutorial that works!

Ty bro amazing explanation, i learned too much also with the proptypes video, ty !

Very clear explanation. Thank you!

Brother you are the truth. I was gonna buy coding phase course on storybooks an this video hit the spot for me. Man thank u for this info u save me money 💰 🤑 💸 lol

Man this is awesome thank you so much!!!

Thank you, it's perfect!

you are amazing!!! THANK YOU FOR TEACHING AND PLEASE UPLOAD MORE VIDEOS

thanks for this awesome tutorial

Excellent video, thanks Kile

great ! simple and short

Looks good, I can't wait for the day these types of tutorials use typescript by default

Hey! Great video! Thanks. Can you make one for storybook with angular?

great tutorial ! thank you so much

After I've finished creating the horizontal Stack story at 15:30, the 'defaultValue: 4' argType hasn't pulled through to StoryBook. In Storybook it just has 1 red box and it asks me to set the number manually from the Controls section. Has there been an update to the defaultValue argType which explains why this has happened?

Thank you!!

Thank you for this video

Nice intro... Keep them coming my friend

OMG 100% quality contents

bro you are a godsend

Aaaand I just got started on Storybook during an Uber ride. You're awesome, Kyle! Thank you! 💯

Awesome 🖤🖤

Nice crash course!

When you create stories at 10:06 how do you use those buttons in your component ?

Great tutorial

Appreciate this overview. I sorta wish the child component had been broken into a 2nd video and some use case examples were provided. Why would we ever want stacks of buttons in a UI scenario? Maybe taking the time to provide more context and showing use cases for advanced scenarios would be more helpful. Felt a little intense in the last minutes of the video cramming detail

thank you the suitable video at the suitable time

That is so strange, exactly when i need, these weeknds!!

thank you man:)

Great but it would be nice to add a little bit about snapshot (integration) testing in Storybook!

very help full

Hi, sorry to trouble you, could you explain a part of your code in 13:37 (extract below) I am not sure if Array is a component or referring to the type e.g. new Array()? I also need help explain the role of how the spread operator and .key() plays in dynamically adjusting the child element. [...Array(numberOfChildren).keys()].map......

It is very explicit, thank you! But how to use it in my app? Do I need just to import the story Component and work with it like with a simple Component?

Great video

Our component design team mandated everybody start using this and.... the Storybook web site does an atrocious job explaining either how to really use Storybook, or the benefits thereof. To that end, thanks for the video.

As always quick and to the point but tbh not sure if storybook really adds value and if it can be maintained as a project catches speed - writing unit tests and maintaining test coverage itself is a chore and now this - not sure if teams have got the bandwidth to go with something like storybook - IMO deliverables would maybe crawl with sb

Really awesome. How caould I publish the components that I use to npm?

Thank you :)

It's my perception, or did you increased the speed slightly? 👍

So storybook is a way to describe customized web component's ? I didn't know this tool, great discovery !

nice vid thanks i learnt a lot

Awesomeeeeee!!

god level video, i was looking fot this i like to meet you someday

What a nice video! Please try to go around GraphQL in the future C:

Thumb before watch, trust me!

this is great video. but I still do not understand what to do with this storybook?? in real project we have various UI and we use various component libraries. how storybook is helping in that? what is the use of creating such button.stories.js??

Hey bro you are excellent person, you are the one with whom i learned coding. #kyle #WebDevSimplified

Hey there, Can you do a video on how Storybook uses Design Tokens and interacts with Figma for a bridge between the 2 teams??

For anyone else wondering what is going on at 13:28 when he's iterating over numberOfChildren. I went into the docs and also tested it on the console to figure. it out: 1. defaultValue is just a standard field built into Storybook and is used as a key for a value: storybook.js.org/docs/react/api/argtypes#gatsby-focus-wrapper 2. Starting from the outside, he's spreading values into an array, that's the brackets and the 3 periods aka [...] 3. The values he's spreading into the array above come from the Array(numberofChildren).keys(). I'll explain in two parts. Part 1: we've got an empty array created with a maximum limit of 4 values, that's Array(numberOfChildren) Part 2: that array is then counted out using the keys() function. As stated in MDN, this function returns "An array of strings that represent all the enumerable properties of the given object." Since the array returned from Part 1 was empty, this just counts out the number of indexes (0, 1, 2, 3). 4. As a result, this expression [...Array(numberOfChildren).keys()] returns an array that is [0, 1, 2, 3] 5. When he iterates over it that, the values being passed as "n" are 0, 1, 2, and 3. That explains why he adds a 1 to each value within the brackets {n + 1} Hope that helps!

This guy is defeating Dev Ed too

Hmm. I'm trying to do something a bit more complex, I think. I'm trying to create a story for a component which has an parent wrapper. The component itself takes an 'intl' prop which is a complex object (containing functions for formatting currencies, e.g.) and this is dependent on having access to the provider component. Trying to ignore this requirement just leads to an error in Storybook saying the component I'm trying to render needs this provider wrapper. Erm....

Now this is interesting

Makes more sense to put the story file right next to the component

CAN YOU MAKE ANOTHER ONE LIKE THIS BUT USING VITE, (not deprecated CRA)? im struggling changing buttons sizes on the browser, it doesnt function

Please, tutorial for backend development

Storybook is a cool package) But there are some cases when we don’t need all the power of storybook, but just a simple “test page” with all our components where we can play with its props. There is one package that works just fine for this, called storybox-react

this is so informative, but also this is the first time I'm using the playback of slowmo in youtube cause sometimes you talk so fast, otherwise super great video!

can you do a video about how we can hide accesstokens in client side

can you make a video on how to use webpack with react.

Awesome

Any tips on getting this working in Angular?

How do we actually use these components in a project?

How do I import the components into my project after I'm done preparing them in a storybook project?

How can we type the advanced example shown in TypeScript, when i tried to add numberOfChildren ts yells

GoodJob!

I always thought propTypes was just referring to a typescript interface/type. Didn't realize it could be used in js

Is it possible to store custom hooks in storybook?

I like this guy, he's quite realistic for an alien lizard.

How can we create one for a higher order component?

I get SyntaxError: Unexpected token '

Thank you very much for the tutorial but what is the purpose of this? Can these components be imported to another react project so it can be used?

Nice Jackson ;)