Storybook in 100 Seconds

Storybook is a tool used for testing UI components in isolation that works with JS frameworks like React, Angular, Vue, and Svelte. It is especially useful for web developers building design systems and shared libraries.

#webdevelopment #js #100SecondsOfCode

🔗 Resources

🔥 Get More Content - Upgrade to PRO

Use code lORhwXd2 for 25% off your first payment.

🎨 My Editor Settings

- Atom One Dark
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- Storybook tutorial
- What is storybook
- Testing techniques in web development

[Matiast]

Yestarday I searched “storybook in 100 seconds” and it comes out now, you’re reading my mind

[oldever]

2 years from now, we will need a framework to manage storybooks...

[luqmaanheetun]

100 seconds. Hands down the greatest series ever 💯

[kendedetar]

Storybook was one of those tools that seemed so complex and hard to understand even the basics of it, that I just never tried.
This video helped me get through this. Next thing tomorrow, I’m trying it out.
Thanks Jeff!

[GuyGooL]

FRONT END DEVS READ THIS!
Like most, I also didn't see how writing a component and then "testing" it in storybook would work, because if I already made the component, why would I move it to storybook, it's working 🤔.
The actual usage should be opposite, first make the story of a component, and only then write it, and how, you ask? That's simple, create a blank component, write a blank story to it, and then develop the whole component in storybook (since it supports hot reload that wouldn't be hard).

The benefits are as follows:
- You get to write a component and reload the app without any needy re-routing/ authentication/ modal popping or any other prerequisite to simply view it.
- You get to write a component in a completely neutral environment, without any other styling or bounding affecting it.
- Most importantly, you will be forced to write an agnostic component, meaning, it won't know about any prop or pre-existing state. This will prevent excessive props or data.
- The complete component should be so reusable that you could grab it, and put it in an entirely different project with minimal effort.

[kabir]

This is so much better than reading their landing page..

[kaimura]

Storybook is a frontend developer's wet dream man. I frigging love it - also the plugins are amazing, finally designers and programmers can modify a synchronized and visualized design system and much more..

It also teaches you how to be a good developer, imo.

[loldirt]

This will be super useful! This channel allows be to discover a bunch of new tools and languages that I can learn to help me out. Thank you!

[rajat]

i never really understood storybook, even after watching tonnes of videos
these 100s made it very clear!
thank you so much!

[cesaryaelmurillo]

I was looking for this a week ago, you're always delivering timely with your great content. Thanks a lot mate!

[darielsurf]

I love all your videos. Really well done and great humor balanced with knowledge and great insights. Thanks for sharing!

[pinkink]

Literally today have watched first couple guides about storybook and now you dropped video about it, you are truly mindreader, much thanks ❤

[Gahlfe]

in the last year of me transitioning to software engineering and some web development projects, this series has had an explanation for technology that i was researching or comes with a new video just when it seems i just started to research that technology, love this channel for real

[BramvanLeur]

I’ve been using react on and off for side projects since 0.x. I saw storybook appear in some projects at some point but I think this video finally made it click as to why I would want this.

In other words: 100 seconds = good stuff

[nawti]

That was amazing I really needed this in my life. Best series ever man keep it up

[Craxmerax]

Great video! Please consider doing a more deep-dive into Storybook as well. I still find it hard to figure out how to do more complex things.

[mistersir]

Storybook has changed my life! No longer do I ever have to wait on the API team to take forever before I can create my components!

[robertkylethomas]

I'm struggling with story book at the moment so when I saw this I shouted ITS ABOUT DAMN TIME!!! I freaking love it thanks brother

[devkasunlakshitha]

I wanted to try but I never understood the basics of the storybook. Now I have what's going on the inside the storybook. Thank you so much.

[matiasmoresi]

Awesome to see that this kind of apps exists!
Thank you for sharing!