Intro to React

Wordcamp Miami 2016

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