4. JSX (1/3)
• JSX (Almost like HTML)
• JS createElement (“TagName”, “Attribute”, “Child”)
• React Factories (Common HTML tag)
(Javascript XML)
JavaScrip
Factory
Need
Compile
5. JSX (2/3)
• Native HTML tag (Lower-case first letter)
• JSX DOM (Upper-case first letter)
• Reserved words (class => className, for => htmlFor, …)
• JavaScript expression & Comment
a - z first
A - Z first
Comment{Expression}
6. JSX (3/3)
• … (Spread attributes ES6) & Overwrite with order
• JSX Differences
• style accepts JavaScript object (camelCased properties)
• onChange event behaves as you would expect it to
• Form More here
style onChange Form
React? Redux?
8. DATA FLOW
Initial data
User input
Network data
New data
ComponentSet State
Set Props
ComponentSet State
Set Props
Component Set State
Event
Callback
ComponentSet State
Set Props
Set
Again
One Way
Data Binging
9. Component
COMPONENT (1/2)
• props (Component property)
• External data from parent
• this.props read-only
• state (State machine)
• Internal data in component
• this.state to read
• this.setState() to update
State render
Change
JSX Component
props
immutable
mutable
Easy to
Unit Test
12. ACTIONS
• type action type
• payload action data
• Pure function
Pure function Impure function
Always same output
with same input
May different output
with same input
Never side-effects May side-effects
Never alter state May alter state global
Action
JavaScript
Object
Call Rest
Api
Periodic
Update
13. REDUCERS
• (oldState, action) => newState (When state tree update)
• object spread (Ensure new object)
Reducer
New
State
Action
Pure function, too
reduce into
current state
14. STORE
• Maintain state tree
• getState() to get state
• dispatch() to sent action & alter state
• subscribe() to get callback function & listening to state update
Reducer
Action
Store
dispatch()
createStore()
15. DATA FLOW
Call store.dispatch(action)
Action trigger root reducer
• reducer(state, action)
• return new state
Store save return state tree
• Call all store.subscribe(listener)
• get new state store.getState()
Action
Reducer
Store
App call
root reducer
root reducer
new state
subscribe() dispatch()
getState()
