Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Keep your application close, and your react components closer

138 visualizaciones

Publicado el

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.

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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

×