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.

Easy Bolt-on Docs Using React Styleguidist


Published on

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

Published in: Design
  • My personal experience with research paper writing services was highly positive. I sent a request to ⇒ ⇐ and found a writer within a few minutes. Because I had to move house and I literally didn’t have any time to sit on a computer for many hours every evening. Thankfully, the writer I chose followed my instructions to the letter. I know we can all write essays ourselves. For those in the same situation I was in, I recommend ⇒ ⇐.
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Easy Bolt-on Docs Using React Styleguidist

  1. 1. How to document systems built in react in a reactish way
  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>
  21. 21. WHERE