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

2. How to document systems built in
react in a reactish way

3. WHY WHY NOT WHY NOT X
HOW WHERE

4. THE WHO THE WHAT

5. Why trust me?

6. One way to go pro

7. Why Finland?
Science.

8. ZURB Foundation
Top Contributor, Certified Preferred, etc.

9. A*%#@& => React

10. 5 STAGES OF GRIEF
1. Denial
2. Anger
3. Bargaining
4. Depression
5. Acceptance

11. 5 STAGES OF GRIEF
source: wikipedia

12. 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...

13. 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

14. 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

15. 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

16. 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

17. 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*

18. 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>
));

19. REACT STYLEGUIDIST EXAMPLE
```js
<Button onClick={() => console.log('clicked')>Push Me</Button>
```

20. REACT STYLEGUIDIST EXAMPLE (FENCES REMOVED)
<Button onClick={() => console.log('clicked')>Push Me</Button>

21. HOW REDUX TODO MVC EXAMPLE

22. WHERE
github.com/jamesstoneco/react-styleguidist-todo