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.
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
Keep your application close, and your react components closer
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
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" />;
19. Storybook
Controls
Control the inputs for the component rendered
Generates controls based on the component props
Note: Replacement for the Knobs addon
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
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