Successfully reported this slideshow.
Your SlideShare is downloading. ×

Easy Bolt-on Docs Using React Styleguidist

Ad

How to document systems built in
react in a reactish way

Ad

WHY WHY NOT WHY NOT X
HOW WHERE

Ad

THE WHO THE WHAT

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 23 Ad
1 of 23 Ad

Easy Bolt-on Docs Using React Styleguidist

Download to read offline

The talk will explain both the process and provide code examples on how to bootstrap your latest project in the least disruptive way. An example of expanding a publicly available project in several phases will be given (along with the source). At the end you will learn what you can get for free, what are some low hanging fruit, and then where to concentrate your efforts as you scale. If you have an interest in creating a UI Component library or Design System this is a great precursor and first step for your project.

Presented at React Helsinki and Futurice Tech Weeklies, December 2018

The talk will explain both the process and provide code examples on how to bootstrap your latest project in the least disruptive way. An example of expanding a publicly available project in several phases will be given (along with the source). At the end you will learn what you can get for free, what are some low hanging fruit, and then where to concentrate your efforts as you scale. If you have an interest in creating a UI Component library or Design System this is a great precursor and first step for your project.

Presented at React Helsinki and Futurice Tech Weeklies, December 2018

Advertisement
Advertisement

More Related Content

Advertisement

Easy Bolt-on Docs Using React Styleguidist

  1. 1. How to document systems built in react in a reactish way
  2. 2. WHY WHY NOT WHY NOT X HOW WHERE
  3. 3. THE WHO THE WHAT
  4. 4. Why trust me?
  5. 5. One way to go pro
  6. 6. Why Finland? Science.
  7. 7. ZURB Foundation Top Contributor, Certified Preferred, etc.
  8. 8. A*%#@& => React
  9. 9. 5 STAGES OF GRIEF 1. Denial 2. Anger 3. Bargaining 4. Depression 5. Acceptance
  10. 10. 5 STAGES OF GRIEF source: wikipedia
  11. 11. 5 STAGES OF GRIEF WITH ANGULAR 1. Denial I'm just doing this until Vue.js catches on 2. Anger Nested ternaries, button components, CSS in JS 3. Bargaining wix/react-templates 4. Depression Endless videos and tutorials 5. Acceptance I'm now okay, but Functional Programing...
  12. 12. WHY A LIVING STYLEGUIDE 1. Foster better communication 2. Play to your team's strengths 3. Avoid conflict between teams 4. Produce a better quality product 5. More design consistency 6. Less meetings source: Design Systems Crash Course
  13. 13. In my experience there are two ways to get started with creating a Design System that will work for an organization of any size. Even a web team of one. ‣ Front-end Code ‣ Living Styleguide source: Design Systems Crash Course
  14. 14. Both of these are what I like to call low hanging fruit. This means that you will be able to build these the fastest, with the least amount of effort and they will have the biggest rewards. source: Design Systems Crash Course
  15. 15. WHY NOT X STORYBOOK ‣ You write stories in JavaScript files (vs md) ‣ How you describe components ‣ Shows only one variation at a time (vs. multiple) source: React Styleguidist Cookbook
  16. 16. REACT STLYEGUIDIST GIVES YOU ‣ Auto public method docs ‣ All components on a single page (Styleguide) ‣ Extra docs added (Design System or More complete docs) ‣ Can be branded (customizable design) ‣ You get some docs auto generated*
  17. 17. STORYBOOK EXAMPLE import React from "react"; import { storiesOf } from "@storybook/react"; import { action } from "@storybook/addon-actions"; import Button from "../components/Button"; storiesOf("Button", module).add("default", () => ( <Button onClick={action("clicked")}>Push Me</Button> ));
  18. 18. REACT STYLEGUIDIST EXAMPLE ```js <Button onClick={() => console.log('clicked')>Push Me</Button> ```
  19. 19. REACT STYLEGUIDIST EXAMPLE (FENCES REMOVED) <Button onClick={() => console.log('clicked')>Push Me</Button>
  20. 20. HOW REDUX TODO MVC EXAMPLE
  21. 21. WHERE github.com/jamesstoneco/react-styleguidist-todo

×