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

Intro to React

Bruno Cunha
February 22, 2016

Intro to React

Wordcamp Miami 2016

Bruno Cunha

February 22, 2016
Tweet

More Decks by Bruno Cunha

Other Decks in Programming

Transcript

  1. INTRO TO REACT
    B R U N O C U N H A @ B R U N C U N

    View full-size slide

  2. AGENDA
    What is React?
    JSX
    Props
    State
    Use Cases
    Next Steps

    View full-size slide

  3. bit.ly/24izsLz
    F O L L O W A L O N G

    View full-size slide

  4. WHAT IS REACT?
    I T S N O T A F R A M E W O R K

    View full-size slide

  5. React is a library for building
    composable, dynamic user
    interfaces.

    View full-size slide

  6. Components are modular,
    cohesive sets of data and
    functions.

    View full-size slide

  7. React abstracts the DOM
    and implements one-way
    reactive data flow.

    View full-size slide

  8. Its simple and declarative,
    minimizing boilerplate and
    making it easy to reason about.

    View full-size slide

  9. React components take
    input data and output what
    to render using JSX.

    View full-size slide

  10. JSX is an XML-like syntax that
    uses the expressive power of
    JavaScript to build HTML.

    View full-size slide

  11. JSX allows you to keep
    component markup and
    display logic in one place.

    View full-size slide

  12. PROPS
    J U S T P R O P E R T I E S

    View full-size slide

  13. Components access
    input data using props.

    View full-size slide

  14. Parent components assign
    props to children using
    attributes.

    View full-size slide

  15. Data changes cause
    components to re-render.

    View full-size slide

  16. A component cannot
    mutate its own props.

    View full-size slide

  17. STATE
    O N L Y F O R I N T E R A C T I V I T Y

    View full-size slide

  18. A component's state is
    mutable, allowing it to
    respond to changes.

    View full-size slide

  19. Updating state will cause a
    component to re-render
    appropriately.

    View full-size slide

  20. State should store as little
    data as possible because it
    is private to the component.

    View full-size slide

  21. The higher up the hierarchy
    state is stored, the easier it
    can be to maintain.

    View full-size slide

  22. USE CASES
    R E F L E C T D E E P L Y

    View full-size slide

  23. If your existing front-end stack is
    buggy, slow, or difficult to maintain,
    you should consider React.

    View full-size slide

  24. If you're already productive with at
    least one other front-end technology,
    you probably don't need React.

    View full-size slide

  25. If you're a beginner looking to
    write an interactive, stateful app,
    you should consider React.

    View full-size slide

  26. If you're a beginner looking to write a
    simple application with limited
    interactivity, you probably don't need
    React.

    View full-size slide

  27. NEXT STEPS
    A L W A Y S B E L E A R N I N G

    View full-size slide

  28. NEXT STEPS
    Official Tutorial - bit.ly/1F8DclG
    ES6 - bit.ly/1RfbS9W
    Babel - bit.ly/1Avg4YU
    Routing - bit.ly/1BFbk90
    Redux - bit.ly/1L3mZVE

    View full-size slide

  29. THANKS!
    @ B R U N C U N

    View full-size slide