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
  2. AGENDA What is React? JSX Props State Use Cases Next

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

    N G
  4. WHAT IS REACT? I T S N O T A

    F R A M E W O R K
  5. React is a library for building composable, dynamic user interfaces.

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

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

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

    to reason about.
  9. JSX JS + XML

  10. React components take input data and output what to render

    using JSX.
  11. JSX is an XML-like syntax that uses the expressive power

    of JavaScript to build HTML.
  12. JSX allows you to keep component markup and display logic

    in one place.
  13. PROPS J U S T P R O P E

    R T I E S
  14. Components access input data using props.

  15. Parent components assign props to children using attributes.

  16. Data changes cause components to re-render.

  17. A component cannot mutate its own props.

  18. STATE O N L Y F O R I N

    T E R A C T I V I T Y
  19. A component's state is mutable, allowing it to respond to

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

  21. State should store as little data as possible because it

    is private to the component.
  22. The higher up the hierarchy state is stored, the easier

    it can be to maintain.
  23. USE CASES R E F L E C T D

    E E P L Y
  24. If your existing front-end stack is buggy, slow, or difficult

    to maintain, you should consider React.
  25. If you're already productive with at least one other front-end

    technology, you probably don't need React.
  26. If you're a beginner looking to write an interactive, stateful

    app, you should consider React.
  27. If you're a beginner looking to write a simple application

    with limited interactivity, you probably don't need React.
  28. NEXT STEPS A L W A Y S B E

    L E A R N I N G
  29. NEXT STEPS Official Tutorial - bit.ly/1F8DclG ES6 - bit.ly/1RfbS9W Babel

    - bit.ly/1Avg4YU Routing - bit.ly/1BFbk90 Redux - bit.ly/1L3mZVE
  30. THANKS! @ B R U N C U N