Storybook is a very popular development tool for React components. Developing components separately from your application will make you much more productive. Storybook will help you write and showcase your components in an isolated playground. Once done Storybook allows you to deploy your storybooks as a style guide for coworkers to use. This session by Maurice de Beijer is about developing React components with Storybook. But Storybook also works with Angular, Vue, Svelte and many others.

1. Keep your application close
Keep your components closer
Maurice de Beijer - @mauricedb

2.  Maurice de Beijer
 The Problem Solver
 Microsoft MVP
 Freelance developer/instructor
 Twitter: @mauricedb
 Web: http://www.TheProblemSolver.nl
 E-mail: maurice.de.beijer@gmail.com
2ABL - The Problem Solver

3. Udemy course
 Building React components with Storybook in 30 minutes or so
 Only €12.99 until September 12th
 https://www.udemy.com/course/building-react-components-with-
storybook/?couponCode=847FA73AE69C075A8C38

4. Agenda
 What is Storybook?
 And why should you even care
 Using Storybook with React
 Authoring stories
 Documenting components
 Publishing a style guide
 Expanding Storybook

5. What isStorybook?

7. Component
Driven
Development
 Develop your components in isolation
 Optionally turn stories into snapshot tests

8. Style
Guide
 Document your components
 Publish as a static site

9. Getting started

10. Storybook 6 RC

11. Installing
Storybook
 Install Storybook into an existing React application
 Or Angular, Svelte, Vue and many more
 npx sb init

12. StoriesOfAPI

13. StoriesOfAPI
 The originalAPI to write stories
 Replaced by the Component Story Format
 Still works in Storybook 6 😊

14. StoriesOfAPI
Example
import React from "react";
import { storiesOf } from "@storybook/react";
import Label from "./label";
storiesOf(“Atoms/Label", module)
.add("Standard", () => <Label label="The label" />);

15. ComponentStory Format

16. Component
Story
Format
 The recommended way to write stories
 Based on ES2015 exports
 The default export is for story metadata
 Named exports are stories to run

17. CSF
Example
import React from "react";
import Label from "./label";
export default {
title: " Atoms/Label",
component: Label,
};
export const Standard =
() => <Label label="The label" />;

18. StorybookControls

19. Storybook
Controls
 Control the inputs for the component rendered
 Generates controls based on the component props
 Note: Replacement for the Knobs addon

20. Storybook
Controls
Example
export const WithControls =
(args) => <Label {...args} />;
WithControls.args = {
label: "The label",
labelClassName: "text-success"
};

21. Storybook MDX

22. Storybook
MDX
 A wrapper over Component Story Format
 Stories are defined using Markdown
 Great for generating documentation

23. MDX
Example
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import MovieList from './movie-list';
import movies from './data/movies.json'
<Meta title="Organisms/MovieList"
component={MovieList} />
# MovieList
Render a list of **5** movies.
<Preview>
<Story name="Display 5 movies">
<MovieList movies={movies} />
</Story>
</Preview>

24. ExpandingStorybook

25. Expanding
Storybook
 Storybook can be expanded with many addons
 Docs
 Storyshots
 Accessibility validator
 Viewport adjuster
 Visual testing
 …
 Develop your own if needed

26. Storyshots
 Turn all JavaScript based stories into Jest snapshot tests
 Install the @storybook/addon-storyshots addon
 Requires react-test-renderer with React

27. Publishing stories

28. Building a
static version
 Using the build-storybook command you can build a static version
of the storybook
 Publish anywhere as a static HTML website

29. Storybook
Deployer
 Deploy a static version of the stories
 GitHub pages
 Amazon S3
 Install the @storybook/storybook-deployer tool

30. Conclusion
 Storybook is a great way to develop components in isolation
 Create stories around your React components
 Test them using Storyshots
 Publish the result as documentation is easy

31. Maurice de Beijer
@mauricedb
© ABL - The Problem Solver 31