Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Keep your application close
Keep your components closer
Maurice de Beijer - @mauricedb
 Maurice de Beijer
 The Problem Solver
 Microsoft MVP
 Freelance developer/instructor
 Twitter: @mauricedb
 Web: htt...
Udemy course
 Building React components with Storybook in 30 minutes or so
 Only €12.99 until September 12th
 https://w...
Agenda
 What is Storybook?
 And why should you even care
 Using Storybook with React
 Authoring stories
 Documenting ...
What isStorybook?
Component
Driven
Development
 Develop your components in isolation
 Optionally turn stories into snapshot tests
Style
Guide
 Document your components
 Publish as a static site
Getting started
Storybook 6 RC
Installing
Storybook
 Install Storybook into an existing React application
 Or Angular, Svelte, Vue and many more
 npx ...
StoriesOfAPI
StoriesOfAPI
 The originalAPI to write stories
 Replaced by the Component Story Format
 Still works in Storybook 6 😊
StoriesOfAPI
Example
import React from "react";
import { storiesOf } from "@storybook/react";
import Label from "./label";...
ComponentStory Format
Component
Story
Format
 The recommended way to write stories
 Based on ES2015 exports
 The default export is for story ...
CSF
Example
import React from "react";
import Label from "./label";
export default {
title: " Atoms/Label",
component: Lab...
StorybookControls
Storybook
Controls
 Control the inputs for the component rendered
 Generates controls based on the component props
 Not...
Storybook
Controls
Example
export const WithControls =
(args) => <Label {...args} />;
WithControls.args = {
label: "The la...
Storybook MDX
Storybook
MDX
 A wrapper over Component Story Format
 Stories are defined using Markdown
 Great for generating document...
MDX
Example
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import MovieList from './movie-list';
imp...
ExpandingStorybook
Expanding
Storybook
 Storybook can be expanded with many addons
 Docs
 Storyshots
 Accessibility validator
 Viewport ...
Storyshots
 Turn all JavaScript based stories into Jest snapshot tests
 Install the @storybook/addon-storyshots addon
 ...
Publishing stories
Building a
static version
 Using the build-storybook command you can build a static version
of the storybook
 Publish an...
Storybook
Deployer
 Deploy a static version of the stories
 GitHub pages
 Amazon S3
 Install the @storybook/storybook-...
Conclusion
 Storybook is a great way to develop components in isolation
 Create stories around your React components
 T...
Maurice de Beijer
@mauricedb
© ABL - The Problem Solver 31
Keep your application close, and your react components closer
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Keep your application close, and your react components closer

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Keep your application close, and your react components closer

  1. 1. Keep your application close Keep your components closer Maurice de Beijer - @mauricedb
  2. 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. 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. 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. 5. What isStorybook?
  6. 6. Component Driven Development  Develop your components in isolation  Optionally turn stories into snapshot tests
  7. 7. Style Guide  Document your components  Publish as a static site
  8. 8. Getting started
  9. 9. Storybook 6 RC
  10. 10. Installing Storybook  Install Storybook into an existing React application  Or Angular, Svelte, Vue and many more  npx sb init
  11. 11. StoriesOfAPI
  12. 12. StoriesOfAPI  The originalAPI to write stories  Replaced by the Component Story Format  Still works in Storybook 6 😊
  13. 13. 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" />);
  14. 14. ComponentStory Format
  15. 15. 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
  16. 16. CSF Example import React from "react"; import Label from "./label"; export default { title: " Atoms/Label", component: Label, }; export const Standard = () => <Label label="The label" />;
  17. 17. StorybookControls
  18. 18. Storybook Controls  Control the inputs for the component rendered  Generates controls based on the component props  Note: Replacement for the Knobs addon
  19. 19. Storybook Controls Example export const WithControls = (args) => <Label {...args} />; WithControls.args = { label: "The label", labelClassName: "text-success" };
  20. 20. Storybook MDX
  21. 21. Storybook MDX  A wrapper over Component Story Format  Stories are defined using Markdown  Great for generating documentation
  22. 22. 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>
  23. 23. ExpandingStorybook
  24. 24. Expanding Storybook  Storybook can be expanded with many addons  Docs  Storyshots  Accessibility validator  Viewport adjuster  Visual testing  …  Develop your own if needed
  25. 25. Storyshots  Turn all JavaScript based stories into Jest snapshot tests  Install the @storybook/addon-storyshots addon  Requires react-test-renderer with React
  26. 26. Publishing stories
  27. 27. 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
  28. 28. Storybook Deployer  Deploy a static version of the stories  GitHub pages  Amazon S3  Install the @storybook/storybook-deployer tool
  29. 29. 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
  30. 30. Maurice de Beijer @mauricedb © ABL - The Problem Solver 31

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.

Views

Total views

215

On Slideshare

0

From embeds

0

Number of embeds

1

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×