ReactJS Style Guides

Developing a style guide for your project will bring long term gains but maintaining the guide over time can be a challenge. ReactJS solves this issue but using the same components in the style guide as in the application.

Transcript

1. REACT STYLE GUIDES (MOSTLY) STATELESS COMPONENTS
2. ADAM T. SMITH ACODESMITH LLC @ACODESMITH
4. Github
5. Code for America
6. Salesforce
7. Walmart
8. HilaryClinton.com
10. Why Style Guides Consistent branding for all platforms. Reduces confusion internally. Reduces confusion externally. Single source of truth.
11. ..but…but…but… Hard to maintain! Too much work up front! Boss doesn’t care!
12. How does ReactJS help with the but..but..but… ReactJS brings consistency in the style guide and in the production application!
13. What do you mean consistency? The style guide and your application use the same React components!
14. The same components?! Yes! The same components.
15. Um.. what are components?! A snippet of code which stands alone yet is a part of a larger whole. ⛓
16. Branding components… Logo Logo with slogan ⚒ Branded Nav ⚒
17. Branding component…Logo
18. Logo With Slogan
19. Nav Branding
20. Nav Branding Alternative Slogan
21. What are props? Information passed into a component is called a prop — short for "property". Multiple bits of information are passed as attributes in JSX syntax.
22. Example of passing props to component
23. Ok, we know what props are
 …but what is state? An object containing data that determines how a component renders/behaves. 
 The state allows you to create components that are dynamic.
24. Cool story bro… 
 but how is the state managed? `this.state` can exist at different levels of your application. Each level is managed by it’s own container component.
25. Container Components React <Components /> which pass their internal state down as props to other stateless components.
26. Dynamic Nav Links (part 1)
27. Dynamic Nav Links (part 2)
28. Dynamic Nav In Use
29. What have we learned? React Applications are built upon a nested cascading set of components.
30. State vs Stateless Certain components contain stateful information which is passed through to other components via props={data}
31. Reusable Components Components which don’t require active state information are reusable and more developer friendly.
32. Style Guides are reusable Components A style guide is a set of reusable components which can be altered via their props.
33. Questions and Live Code Demo