From the course: Building UI Components with Storybook: Master React Components and UI Design with Storybook for Better Efficiency
Unlock this course with a free trial
Join today to access over 25,200 courses taught by industry experts.
How to build a component in React with Storybook: Visual breakdown
From the course: Building UI Components with Storybook: Master React Components and UI Design with Storybook for Better Efficiency
How to build a component in React with Storybook: Visual breakdown
Now that we've covered basics of installing Storybook and then running that local host development server, taking a guide with the wizard, and then just going through our main configuration here, which we're going to come back to quite a bit, so if you feel fairly vague about this, that's fine for now. It's just for us to see it. When we start building our own example, the configurations here for our preview are going to become much more concrete and tangible for us to understand. It's just good for us to see what the storybook installation gives us up to this point. Now that we've combed through the preliminaries, let's start developing. Okay, finally, Clarion, finally. So let's go to our app.js. Right now, we're just returning what? We're returning basic React on local 3000 here, starter. You can learn about react you got to click basically we have three components here in an app Page when the app page is the app itself and that we've got this animation of this rotating icon We've…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
(Locked)
Installing and setting up Storybook into your project application from scratch14m 45s
-
(Locked)
Overview of how Storybook is configured with web app projects9m 29s
-
(Locked)
How to build a component in React with Storybook: Visual breakdown10m 44s
-
(Locked)
Build a basic sub-component in React4m 40s
-
(Locked)
How to build a story for React components from scratch6m 36s
-
(Locked)
How to use args in Storybook for multiple dynamic component stories6m 2s
-
(Locked)
How to use argTypes and controls in Storybook to create user-friendly stories5m 28s
-
(Locked)
Automating documentation for web components with Storybook6m 50s
-
(Locked)
Customizing docs and values with Storybook11m 26s
-
(Locked)
Adding component complexity for Storybook arguments9m 8s
-
(Locked)
CSS techniques and Storybook rendering9m 48s
-
(Locked)
What are actions in Storybook and the synthetic base event object?10m 3s
-
(Locked)
Hooking up live React components to Storybook and rendering fundamentals15m 24s
-
(Locked)
Creating stories with mock state and events in Storybook7m 36s
-
(Locked)
Testing interactions and events with React components in Storybook13m 56s
-
(Locked)
-
-
-
-