Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ReactJS Style Guides

A3c3d8a2b363c794bf2f0da138fb9684?s=47 Adam Smith
September 17, 2016

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.


Adam Smith

September 17, 2016




  3. None
  4. Github

  5. Code for America

  6. Salesforce

  7. Walmart

  8. HilaryClinton.com

  9. None
  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