Build and Document React Components With Storybook

Storybook is an awesome tool to help you build, demo, and document component libraries. Let's learn all about it in this tutorial!
#Storybook #Sotrybookjs #PortEXE
0:00 Intro
2:43 Project Setup
11:46 Storybook Overview
22:30 Building Tablr
41:15 MDX Syntax
46:38 Outro
🔗Code: github.com/portexe/storybook-...
🔗React Hooks: • Learn React Hooks In 6...
🎵 Music by Moon Wash.
songfuze.com/artist/moonwash
---
👀 Follow Me:
Twitter ➔ / portexe
Instagram ➔ / port.exe
GitHub ➔ github.com/portexe
Facebook ➔ / portexe
Website ➔ www.portexe.com/
GAMING ➔ / portexe

[@pengurrito7136]

Good tutorial video in general, but the editing was fantastic! You kept everything moving at a steady pace with no unneeded detours.

[@joshuahsieh436]

great tutorial, and love the way you positioned and cut your camera feed overlay!

[@tukuyoma]

now this is how you learn storybook...thanks man your content is top notch

[@amphibia95]

Cool tutorial man, thank you! Small tip at 5:00, you can just type " code . " in command line and it'll open vscode in current directory.

[@em-it]

Great, thanks for the practical training 👍

[@romko-romario]

A great tutorial, it's helped me very much, thank you!

[@skverskk]

Good intro tutorial to Storybook.

[@aryamantodkar3716]

Beautiful explanation🚀 thankyou

[@mabeleain3320]

I can't thank you enough. I completely understand the storybook becz of your tutorial 😄

[@KevinJTurner]

Fantastic tutorial!

[@dericmiano3660]

Thank you, be blessed for the good work.

[@abdu1wahid105]

Beautiful explaination! 🙏

[@BigBetaTester]

Thanks for teaching how to organise my storybook with subfolder.

[@nicolotommasi4811]

I think I just found my favorite coding tutorials

[@ToufikNefouci]

the most underrated tutorial !!

[@SergiyAntonyuk_PhD]

Very useful video. Thanks

[@magankumar8713]

It helped. Thanks :-)

[@mayasalasad8184]

thanks very helpful

[@romantyniv5381]

perfect. thanks

[@adomasgaudiesius]

Finally! I understand what storybook is for. Omg, I spent 12h today and only now I get it. Its for a component library without an app... Thank you my dude.

[@codigomate]

It can also be for an app with custom components or complex components. If you want to document and test your components in isolation is a good unit.

[@craig6494]

Great tutorial

[@fltngmmth]

Best tut on the tube e: I havent even heard of this before. I wonder if it comes in tsc flavor.

[@karthikeyansubbiah8792]

excellent tutorial....

[@webboss]

Would you recommend MDX over normal stories. What are possible pros and cons with using both? Great video by the way. Leading my team to create a component library and this was very helpful

[@moalii7775]

Nice bro.

[@tanzeelrana7348]

life saver !!

[@peryMimon]

good one

[@andrepadez]

That was great! Is there a followup on how to use this setup to publish a component/hooks library to npm? Thank you

[@sergeykahnwald6640]

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

[@rubenabrahamparedesjimenez5148]

Thanks :D new sub here

[@abodmedia]

hey after I do this can I just build with rollup and make it an npm package without adding anything further ?

[@peryMimon]

I have a question How to use the block in the MDX file. when I try it the code color come gray ( and I hade the language :jsx attribute )

[@garyrouse7766]

anyone know how to get ccs modules working? I'm getting 'CSS Loader has been initialized using an options object that does not match API schema'.

[@sanaowl3159]

Do you prefer yarn or npm when developing with react?

[@xiazhuxia9582]

cool，but how can storybook components used by reactjs for example?

[@felipesnet]

What VScode theme is this?

[@aqwandrew6330]

Any tutorial with mdx?

[@peilongdu5666]

How would this work regarding business logic of components? If you can't re-use them, is there any tangible benefit to creating re-useable components through storybook for complex components coupled with unique business logic?

[@PortEXE]

If you use those components throughout the codebase and you want to document how they are used and how to use them, then yes.

[@madvillany420]

Where did you get that shirt? It’s so cool!!

[@PortEXE]

Birthday present!

[@Jay-zr8kx]

hmm for me adding proptypes does not automatically generates the controls. I would have to manually go to stories and add args or argTypes to show the controls :(

[@okidokiyowyow356]

What device are you using? Yours is fast, but Mine is slow, delete and installing storybook

[@skoizumi291101]

Storybook can be work with native JavaScript?

[@raminkhodaie4063]

what if a component gets its some props from an external api call? how storybook can handle this props?

[@jasonlough6640]

@34:45, how are args getting into the function? I see that it works, but whats the mechanism? Put another way: how is adding a property to Default (Default.args = {...} ) connected to Default(args)? Hows args getting in there?

[@dgcp354]

I think it's spread operation,

[@scriptkeeper8243]

Template.bind({}) makes it a copy/paste. Thus, the args ride along and you can manipulate them since they're spread.

[@basselissa5176]

I am getting error in project setup at running npm sb init error @storybook/addon-postcss@3.0.0-alpha.1: The engine "yarn" is incompatible with this module. Expected version "^1.17.0". Got "1.13.0" error Found incompatible module

[@VworksArt]

Should you NOT use storybook for normal react apps? Like, is this best used for libraries?

[@Luj8n]

Hey! What is that theme you are using?

[@charlibiris]

Yes

[@s3nsej118]

I think it's called LaserWave

[@Luj8n]

@@s3nsej118 Thanks!

[@haiderali6915]

can anyone explain what " Template.bind({}) " do here in stories?

[@min11benja]

I think it adds a sub list on the left sides components accordeon. I mean visually not sure of what it really does under the hood besides that.

[@bisolaonaolapo6089]

it helps to bind different variations of your component to your template function

[@andreaserrano3809]

For those of you that run into this error when starting storybook --> Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin' Just run this --> npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server webpack-dev-middleware

[@GuilhermeFerreira-xb9tm]

Thanks, that helps a lot

[@stefankudla809]

Thank you

[@Dylancougar]

Awesome

[@oggy112]

Awesome video, but one thing: this must be the first time I've heard someone pronounce `Enum` as `eenoom`

[@thegrossmeyer]

Enumerate or enumeration is pronounced "ee-noom-er-ate", so calling it either "ee-noom" or "ee-numb" is pretty common.

[@fazalerabbi]

Tutorials is more about, how to delete files :-)

[@JeanAlesiagain3]

Why is he removing react-scripts?

[@kirillzlobin7135]

23:36

[@martinui4892]

Storybook is free ?

[@PortEXE]

Yes

[@voidmind]

"--save"? You must be old ;p

[@leftinashes]

...and if that is the case then you should mind your elders and learn something! Oh that's right... Trolls don't believe in such constructs!

[@klaybond7739]

Seems like lots of extra work

[@7alken]

understood, but its sooo fast, as everything, these days... sorry ))

[@nikusha5911]

Hello , storybook has a problem when installing it. My audit was clean before I installed storybook. It says: "19 high severity vulnerabilities". These vulnerabilities are about "chokidar" , "webpack" and so on. Could you tell me how to solve this problem ? I have googled and tried many things and as far as I have become I think it's Storybook's own problem. Anyone any help ? Thanks in advance.

[@skoodath]

Great tutorial!

[@kirillzlobin7135]

Great tutorial

[@abdu1wahid105]

Thanks, shows truly high level knowledge, yet swoops down low enough so develepers of every ability can cross the finish line! There are not enough teachers like this. ⭐Liked and subscribed.