1
Introducing Design Systems with React and Typescript in Storybook
1m 59s
2
Set up Storybook for React from Scratch
2m 5s
3
Add your first React Story to Storybook
2m 48s
4
Add a Welcome Page with Sequential Stories to a React Storybook
1m 16s
5
Display the JSX of a React Storybook Story with the JSX Addon
1m 18s
6
Apply Style to a React StoryBook with the Info addon to Turn Stories into Documentation
2m 44s
7
Create Interactive Storybook Stories with the Knobs Decorator
1m 33s
8
Configure React Storybook for use with Typescript
1m 50s
9
Automate Documentation Generation in your Typescript React Codebase with Storybook
47s

Set up Storybook for React from Scratch

React^16.0.0
Extend
JavaScript

Share this video with your friends

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show how to set up Storybook to display React components from scratch.

Course

Design Systems with React and Typescript in Storybook

Joonas Kallunki

~ 6 years ago

Why is it using Yarn to install packages but NPM to run?

venelinpetrov

~ 6 years ago

Note that the installation step is outdated in this video, you need Babel7 and Babel loader instead npm i -D @babel/core babel-loader@next

Christopher Debove

~ 6 years ago

+1 @venelinpetrov. As of now if you install @storybook/react without specifying a version, it will install the version 5 of storybook. This version depends now on babel 7 (which is scoped into @babel scope)