This guy's a perfect juxtaposition of "nerd" and "chad" and I don't even know how he manages it
@Pururin_Purin3 жыл бұрын
its the hair
@vnoommuy3 жыл бұрын
He's a CHARD!
@jr-yn4lk3 жыл бұрын
step 1: be a handsome white male step 2: teach geeky stuff on youtube
@hardwired663 жыл бұрын
hahahaha
@josersleal3 жыл бұрын
he's competent. that's all that matters. He's young and that we all had. When age fades he can still be competent. Good job in your videos.
@KevinVandyTech3 жыл бұрын
I've used storybook for 2 years at 2 different companies. It's awesome
@federicomedinauy3 жыл бұрын
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.
@VacaAlpha Жыл бұрын
by that you mean you would only repeat the arguments that you wanna change? as in, for example: specify args object inside the export default with backgroundColor: "red" and then only specify it again where you actually do need a different color?
@federicomedinauy Жыл бұрын
@@VacaAlpha Yeah. You only specify it again when you actually need a different default color for that one particular story.
@megapixel233 жыл бұрын
That’s exactly what I needed to get started with the Storybook. Thanks a lot, you are doing a great job 👏
@none0n2 жыл бұрын
This is a perfect Storybook walkthrough... I am pretty confident to start this new role. Thank you
@nicoalvarezeu3 жыл бұрын
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!
@emgodas8 ай бұрын
God works in mysterious ways buddy
@nicoalvarezeu8 ай бұрын
@@emgodas Amen!
@TomDoesTech3 жыл бұрын
Storybook is great! I love using it with tsdx to create component modules.
@Markard04 ай бұрын
Thank you for a short video with just enough information to get started, I don't need a 6 hour course with the history of react and storybook. This is perfect, keep up the good work
@thedevguild75252 жыл бұрын
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.
@monique28192 жыл бұрын
I had to learn this for my job and you explained Storybook so well. Great tutorial!!!!!😊👍🏽
@dominiquebello32122 жыл бұрын
Perfect timing! Already liking storybook a lot thanks to your super condensed and helpful crash course 👋👌🤩
@joannagoofit72534 ай бұрын
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 :)
@isareinert80313 жыл бұрын
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
@stelagadevska43422 жыл бұрын
Thank you for the simplified explanation! It was easy to understand and still interesting. Great tutorial! :)👏🧠
@callumgrayson1010 Жыл бұрын
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.
@avinashchaudhary4231 Жыл бұрын
thats the main thing i like about this channel. Thanks WDS
@bama26192 жыл бұрын
man, I am back to your video to try. Now I understand how to do this. Fast and to the point. Thank you.
@daniamsalem2 жыл бұрын
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!
@yerkoacuna50372 жыл бұрын
Hey, sorry can you help me with a problem related to this? Im trying to do exactly the same as the example of the wrapper component with the argTypes numberOfChildren, but with TypeScript. The problem is that i cannot pass numberOfChildren to my template function throwing an error which says "numberOfChildren does not exist in (my component props)"... And indeed thats true, but thats the point of this example, to use an argtypes that originally does not exist in the component props. I don't know what i'm doing wrong and because i'm new to TS I also don't know how to specify the correct StoryBook Type for fix the error because is not inferring the argtype automatically and after digging in the docs / stack / google for hours im still stuck in this because all the examples that i find with TS only cover the case that the argType exist in the component props. Thanks.
@thedevguild75252 жыл бұрын
Omg, I didn't catch it at first. You rocks! Thanks for the explanation.
@VacaAlpha Жыл бұрын
@@yerkoacuna5037 have you solved it? Im curious about how to fix it, maybe creating an interface and passing it to the object?
@rizqyhbb2 жыл бұрын
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
@erikleo5727 Жыл бұрын
Looks good, I can't wait for the day these types of tutorials use typescript by default
@hk-nu2zt Жыл бұрын
to the point tutorial now I am confident enough to write storybook in my cv
@motr3bam8673 жыл бұрын
Kyle I have learned so much from you. Thanks man... Thanks ❤
@Francois3k3 жыл бұрын
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
@Tinandel Жыл бұрын
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.
@maheshgunjal10923 жыл бұрын
Finally found perfect video to understand the video. Good work bro
@shachaha2 жыл бұрын
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
@HumbertoRincon3 жыл бұрын
It's my perception, or did you increased the speed slightly? 👍
@abubakiruralov5543 Жыл бұрын
you are amazing!!! THANK YOU FOR TEACHING AND PLEASE UPLOAD MORE VIDEOS
@vnoommuy3 жыл бұрын
.hair { position: fixed; }
@ThiagoVieira913 жыл бұрын
Aaaand I just got started on Storybook during an Uber ride. You're awesome, Kyle! Thank you! 💯
@bama26192 жыл бұрын
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.
@travelingmindful2 жыл бұрын
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
@jotasenator3 жыл бұрын
is just me or this chanel is the best ever!!!. thanks Kyle for this video
@jeisongarzon60662 жыл бұрын
Ty bro amazing explanation, i learned too much also with the proptypes video, ty !
@GnomePuntTrainerYT3 жыл бұрын
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
@sergeykahnwald66402 жыл бұрын
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
@zayne-sarutobi11 ай бұрын
🤲🤲
@sitedel3 жыл бұрын
So storybook is a way to describe customized web component's ? I didn't know this tool, great discovery !
@sitedel3 жыл бұрын
... but in the example I don't like the idea of setting a color property because It may he difficile to adapt afterwards for dark mode or color blindness. I prefer to associate semantics to a component like "strong", "alert", "warning*, "validate", "reset", "update", "apply", "cancel*, and so on and so forth. Then telling that the "alert" behaviour leaf to white text on red background, to red button with some fancy shadow, can be done with CSS.
@madara_uchiha_WB3 жыл бұрын
Hey bro you are excellent person, you are the one with whom i learned coding. #kyle #WebDevSimplified
@jotasenator3 жыл бұрын
the same here, a year ago
@madara_uchiha_WB3 жыл бұрын
@@jotasenator yeah he is excellent
@asbeldev30713 жыл бұрын
Thanks you. Now i have much more the concept storybook
@BusinessWolf1 Жыл бұрын
bro you are a godsend
@ecam903 жыл бұрын
Excited for this one! Thanks for the video!
@vedantthombare10283 жыл бұрын
This guy is defeating Dev Ed too
@ДмитрийКарпич2 жыл бұрын
Thanks for the great video, really clear view to the Storybook.
@amauryperalta4364 Жыл бұрын
Excellent video, thanks Kile
@RyanJohnson3 жыл бұрын
Finally a Storybook tutorial that works!
@Ipauler2 жыл бұрын
great ! simple and short
@AgneMedia3 жыл бұрын
Thank you This is great explaining and sample to start with storybook
@larzo13373 жыл бұрын
Great video! High tempo yet easy to follow
@asifurrahman543610 ай бұрын
thanks for this awesome tutorial
@jamesdillon738 Жыл бұрын
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?
@Ntnismink2 жыл бұрын
OMG 100% quality contents
@RizaHariati2 жыл бұрын
Very clear explanation. Thank you!
@michaelodonovan69892 жыл бұрын
I like this guy, he's quite realistic for an alien lizard.
@artonthemind2 жыл бұрын
Hey there, Can you do a video on how Storybook uses Design Tokens and interacts with Figma for a bridge between the 2 teams??
@ferhatdursun5689 Жыл бұрын
Thank you!!
@mfpears2 жыл бұрын
Makes more sense to put the story file right next to the component
@ChiragPatel-y1d5 ай бұрын
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??
@hadjerjoo6744 Жыл бұрын
great tutorial ! thank you so much
@yokiyu7993 жыл бұрын
Thumb before watch, trust me!
@yyxx93092 жыл бұрын
Man this is awesome thank you so much!!!
@licokr2 жыл бұрын
Thank you, it's perfect!
@dragonAwkward Жыл бұрын
Nice crash course!
@justinmeskan44102 жыл бұрын
Nice intro... Keep them coming my friend
@cyril71043 жыл бұрын
That is so strange, exactly when i need, these weeknds!!
@rajabnatshah62562 жыл бұрын
Thank you :)
@markshinkai5983 жыл бұрын
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!
@hackynawhat3 жыл бұрын
Please, tutorial for backend development
@kasunedward9622 жыл бұрын
Great tutorial
@ІванХлиста-б1ч Жыл бұрын
Great but it would be nice to add a little bit about snapshot (integration) testing in Storybook!
@AbhishekMishra-uh6du3 жыл бұрын
Thank you for this video
@pepesabe11 ай бұрын
CAN YOU MAKE ANOTHER ONE LIKE THIS BUT USING VITE, (not deprecated CRA)? im struggling changing buttons sizes on the browser, it doesnt function
@sudeepchoudhary54673 жыл бұрын
Great video
@saiprathap95502 жыл бұрын
very help full
@amjadshadid903 жыл бұрын
thank you the suitable video at the suitable time
@maresstefan33912 жыл бұрын
Really awesome. How caould I publish the components that I use to npm?
@hassanm903 жыл бұрын
How do we actually use these components in a project?
@basharal-zghayar45642 жыл бұрын
Excellent tutorial, but please can you slow down you speaking ratio so we can follow up with you :D. Thank you very much
@rezakajbaf6702 Жыл бұрын
Just came across your video. Much appreciate it.
@artem_zakharchuk9 ай бұрын
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?
@feossandon3 жыл бұрын
What a nice video! Please try to go around GraphQL in the future C:
@kacperkepinski49906 ай бұрын
started from the middle
@edetmmekut809 Жыл бұрын
Awesome
@supritbeck3 жыл бұрын
can you make a video on how to use webpack with react.
@CadPixel-why-not24552 жыл бұрын
nice vid thanks i learnt a lot
@arshdeepkumar25863 жыл бұрын
god level video, i was looking fot this i like to meet you someday
@nastiak40443 жыл бұрын
Hey! Great video! Thanks. Can you make one for storybook with angular?
@ahmadjonabdusamadov42823 жыл бұрын
thank you man:)
@jeanmarcr91962 жыл бұрын
When you create stories at 10:06 how do you use those buttons in your component ?
@brianevans43 жыл бұрын
I always thought propTypes was just referring to a typescript interface/type. Didn't realize it could be used in js
@suneethar63293 жыл бұрын
Hi, thanks for teaching. I have around 10 years of experience as front end developer and want to switch company to explore more. Any suggestions on how to prepare for the interview
@roctanweer22653 жыл бұрын
10 -> 3 ?
@cbsaikumar3 жыл бұрын
I have one for you. Come out of comfort zone and keep giving interviews. You will definitely get better and better as the time passes by. Good luck 🤞
@suneethar63293 жыл бұрын
@@cbsaikumar Thanks👍
@LAVOTODGJORCE3 жыл бұрын
You got 10 years of experience! Thats the advantage you have over a lot of people, every interview will be better and better
@aqibfayyaz16192 жыл бұрын
Awesomeeeeee!!
@wissendev54903 жыл бұрын
How about Nest Js crash course video
@ThiagoVieira913 жыл бұрын
I second this!
@chesterxp5082 жыл бұрын
GoodJob!
@janakachamith12743 жыл бұрын
can you do a video about how we can hide accesstokens in client side
@XiagraBalls2 жыл бұрын
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....
@JonasPDC2 ай бұрын
Doesn't Typescript cover the use case for propTypes? I worked with ReactJS with TS for over 6 years i large teams and haven't used propTypes. I wonder if Storybook can deduct from TS types instead?
@Yanis13 жыл бұрын
Awesome 🖤🖤
@thedevguild75252 жыл бұрын
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......
@ianpogi53 жыл бұрын
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?
@pb94052 жыл бұрын
Yes, you can for example use this to make a component library and export it as a npm package. Then in another project you can import your component library and use the components.
@whereisjeffrey2 жыл бұрын
Get a painting Kyle! Put something on your wall
@sourabhvaishnav82352 жыл бұрын
Here's a tip [Array(numberOfChildren).keys()].map ((n) => (JSX) ) might not work for some of you as this does not produce index of array in new ES's rather (Array.from(Array(numberOfChildren).keys())).map((n) => (JSX) ) has to be the new style. Thank me later.