Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
INTRO TO REACT B R U N O C U N H A @ B R U N C U N
Slide 2
Slide 2 text
AGENDA What is React? JSX Props State Use Cases Next Steps
Slide 3
Slide 3 text
bit.ly/24izsLz F O L L O W A L O N G
Slide 4
Slide 4 text
WHAT IS REACT? I T S N O T A F R A M E W O R K
Slide 5
Slide 5 text
React is a library for building composable, dynamic user interfaces.
Slide 6
Slide 6 text
Components are modular, cohesive sets of data and functions.
Slide 7
Slide 7 text
React abstracts the DOM and implements one-way reactive data flow.
Slide 8
Slide 8 text
Its simple and declarative, minimizing boilerplate and making it easy to reason about.
Slide 9
Slide 9 text
JSX JS + XML
Slide 10
Slide 10 text
React components take input data and output what to render using JSX.
Slide 11
Slide 11 text
JSX is an XML-like syntax that uses the expressive power of JavaScript to build HTML.
Slide 12
Slide 12 text
JSX allows you to keep component markup and display logic in one place.
Slide 13
Slide 13 text
PROPS J U S T P R O P E R T I E S
Slide 14
Slide 14 text
Components access input data using props.
Slide 15
Slide 15 text
Parent components assign props to children using attributes.
Slide 16
Slide 16 text
Data changes cause components to re-render.
Slide 17
Slide 17 text
A component cannot mutate its own props.
Slide 18
Slide 18 text
STATE O N L Y F O R I N T E R A C T I V I T Y
Slide 19
Slide 19 text
A component's state is mutable, allowing it to respond to changes.
Slide 20
Slide 20 text
Updating state will cause a component to re-render appropriately.
Slide 21
Slide 21 text
State should store as little data as possible because it is private to the component.
Slide 22
Slide 22 text
The higher up the hierarchy state is stored, the easier it can be to maintain.
Slide 23
Slide 23 text
USE CASES R E F L E C T D E E P L Y
Slide 24
Slide 24 text
If your existing front-end stack is buggy, slow, or difficult to maintain, you should consider React.
Slide 25
Slide 25 text
If you're already productive with at least one other front-end technology, you probably don't need React.
Slide 26
Slide 26 text
If you're a beginner looking to write an interactive, stateful app, you should consider React.
Slide 27
Slide 27 text
If you're a beginner looking to write a simple application with limited interactivity, you probably don't need React.
Slide 28
Slide 28 text
NEXT STEPS A L W A Y S B E L E A R N I N G
Slide 29
Slide 29 text
NEXT STEPS Official Tutorial - bit.ly/1F8DclG ES6 - bit.ly/1RfbS9W Babel - bit.ly/1Avg4YU Routing - bit.ly/1BFbk90 Redux - bit.ly/1L3mZVE
Slide 30
Slide 30 text
THANKS! @ B R U N C U N