React UI Library Structure, Storybook and Tests

Let's dig into how to structure a UI library files, storybook stories, and tests.

👉 VS Code theme and font? Night Wolf [black] and JETBrains Mono

0:00 Introduction
1:12 Setting Up Example Project
3:14 New Directory Structure
5:13 Storybook Setup
7:58 Adding A Story
11:26 Setting Up Jest
15:32 Second Example: Product Card
20:43 Summary
22:08 Outroduction

#react #reactjs

[acidhauss]

My favorite React teacher - just when you think you've learned enough, there's always so much more to learn and improve on. Greetings from London :)

[jubalm]

You are a life saver! This is just so timely as I was about to abandon the monorepo (pnpm) setup having failed to setup Storybook. Really love your style of teaching, please don't get tired creating content. Much ❤ from 🇵🇭

[foo]

Although I didn't get hired yet, I'm finding myself more and more immerse into front end development. Your videos are absurdly useful and I feel like I can watch any of them without prior knowledge and just learn some cool shit. I even refactored stuff from older projects with some of the ideas you provide. Really innovative solutions too.

[gabriellavoro]

You have a very nice way to explain things. It would have helped me a lot to have someone like yourself to teach advanced concepts in such an easy to understand way.

[marcoscarlomagno]

All your content is so clear and cool. Thank you for it. Im a 4 yrs exp. developer (I guess I'm just starting my career) and I see you as the person I want to be in the future. Calmed, nice and enjoying sw development. Taking care of yourself and the others.

Btw, I think the first unit test is flaky tobethruty() will pass even when the array is empty

[danieldiazgiraldo]

I am not a person who comments a lot on youtube, but there are cases in which it is impossible not to, your videos are very valuable, the way you explain is excellent and goes beyond the basics that other youtubers do, I can't wait for more FE stuff such as architecture, patterns... THANKS!

[mmmike]

Thanks so much for putting this together Jack!!! This is incredibly valuable knowledge right here.

[Fuzbo_]

Thanks so much! Recently found your channel and been loving your content.

I know you mostly focus on React & Web dev (at least from what I’ve seen), but would love to hear your approach to putting together a cross-platform (React / React-Native) UI library.

Thanks again for all the content!

[julianklumpers]

Good to see you are back! hope everything is fine.

[universecode]

Great video, React, Storybook and Test. Honestly the work you do is amazing, and I say it as a Developer and Youtuber, from the explanations to the animations. Thanks Jack

[alisonhj]

Thanks a lot! I've been in love with your videos since the 1st one I watched!

Keep up with the excellent work!

[leonardmanosa]

from your linkedin saw this post, as always, great content 👍

[avi]

Pro tip: you're already creating stories with the correct or example props set. Instead of importing the component directly into your tests and addingprops there again, import the story component to avoid dupe code!

[permanar_]

wow, pretty cool.
I usually go with this structure except I'm using styled components with emotion and TypeScript support! it really is amazing.

[Microman]

Thanks for the tutorial Jack, it popped up in my YouTube feed just when I needed it... spooky :)

[omriterem]

Brilliant work Jack! Thanks for your videos especially in these difficult times. I really appreciate the time and effort you put into making content. Hope everything is getting better at home. Take care and get well soon to your wife 🙏🙏🙏

[ElijahManor]

Like how you use pnpm

I like having all related things in their own folder as well (storybook, tests, styled-components, etc...).

Ohh and I love MDX as well, yay

Great video, nicely done!

[bythealphabet]

NICE, the video I asked for in Discord .😁

Awesome.

[Chavezd]

awesome thanks!! 🙏 for you and yours!

[cryspypotato]

Great intro to storybook! I feel like a lot of devs tend to over-engineer the component libraries especially in smaller teams when they are trying to build something like bootstrap og material design while all they need is just a simple set of primitives. IMHO you don't always need a full blown styleguide.