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.

A3c3d8a2b363c794bf2f0da138fb9684?s=128

Adam Smith

September 17, 2016
Tweet

Transcript

  1. 3.
  2. 4.
  3. 7.
  4. 9.
  5. 10.

    Why Style Guides Consistent branding for all platforms. Reduces confusion

    internally. Reduces confusion externally. Single source of truth.
  6. 12.

    How does ReactJS help with the but..but..but… ReactJS brings consistency

    in the style guide and in the production application!
  7. 13.

    What do you mean consistency? The style guide and your

    application use the same React components!
  8. 15.

    Um.. what are components?! A snippet of code which stands

    alone yet is a part of a larger whole. ⛓
  9. 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.
  10. 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.
  11. 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.
  12. 25.
  13. 29.

    What have we learned? React Applications are built upon a

    nested cascading set of components.
  14. 30.

    State vs Stateless Certain components contain stateful information which is

    passed through to other components via props={data}
  15. 32.

    Style Guides are reusable Components A style guide is a

    set of reusable components which can be altered via their props.