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

ReactJS Style Guides

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
Tweet

More Decks by Adam Smith

Other Decks in Technology

Transcript

  1. REACT STYLE GUIDES
    (MOSTLY) STATELESS COMPONENTS

    View full-size slide

  2. ADAM T. SMITH
    ACODESMITH LLC
    @ACODESMITH

    View full-size slide

  3. Code for America

    View full-size slide

  4. HilaryClinton.com

    View full-size slide

  5. Why Style Guides
    Consistent branding for all platforms.
    Reduces confusion internally.
    Reduces confusion externally.
    Single source of truth.

    View full-size slide

  6. ..but…but…but…
    Hard to maintain!
    Too much work up front!
    Boss doesn’t care!

    View full-size slide

  7. How does ReactJS help
    with the but..but..but…
    ReactJS brings consistency
    in the style guide and in the
    production application!

    View full-size slide

  8. What do you mean
    consistency?
    The style guide and
    your application use
    the same React
    components!

    View full-size slide

  9. The same components?!
    Yes! The same
    components.

    View full-size slide

  10. Um.. what are components?!
    A snippet of code
    which stands alone yet
    is a part of a larger
    whole. ⛓

    View full-size slide

  11. Branding components…
    Logo
    Logo with slogan ⚒
    Branded Nav ⚒

    View full-size slide

  12. Branding component…Logo

    View full-size slide

  13. Logo With Slogan

    View full-size slide

  14. Nav Branding

    View full-size slide

  15. Nav Branding Alternative Slogan

    View full-size slide

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

    View full-size slide

  17. Example of passing props to component

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. Container Components
    React
    which pass their internal
    state down as props to
    other stateless
    components.

    View full-size slide

  21. Dynamic Nav Links (part 1)

    View full-size slide

  22. Dynamic Nav Links (part 2)

    View full-size slide

  23. Dynamic Nav In Use

    View full-size slide

  24. What have we learned?
    React Applications are
    built upon a nested
    cascading set of
    components.

    View full-size slide

  25. State vs Stateless
    Certain components
    contain stateful information
    which is passed through to
    other components via
    props={data}

    View full-size slide

  26. Reusable Components
    Components which don’t
    require active state
    information are reusable
    and more developer
    friendly.

    View full-size slide

  27. Style Guides are reusable
    Components
    A style guide is a set of
    reusable components
    which can be altered
    via their props.

    View full-size slide

  28. Questions and Live Code Demo

    View full-size slide