KEMBAR78
ReactJS Overview | PPTX
ReactJS Overview
09/14/2015
Ping-Wen (Mark) Hsu Full-Stack Developer
Controller
View
Model
Initial fetch
Model
View
Initial fetch
Model
View
User Interaction
Initial fetch
Model
View
User Interaction
Model Model
View View
Initial fetch
Model
View
User Interaction
Model Model
View View
Initial fetch
Model
View
User Interaction
Model Model
View View
Initial fetch
Model
View
User Interaction
Model Model
View View
Initial fetch
Model
View
User Interaction
Model Model
View View
Real-Time
Single source of truth
Thinking in components
Always redraw
(Virtual DOM)
Single source of truth
Thinking in components
Always redraw
(Virtual DOM)
Model
View
View
Model
Model
View
Model
View
Model
View
Model
View
Controller
Controller
scope
scope
Controller
scope
Controller
scope
Controller
scope
scope
Controller
Component
Component
Props
Props
Component
Props
Component
Props
Component
Props
State
Component
Single source of truth
Thinking in components
Always redraw
(Virtual DOM)
Style
Template
Functionality
Style
Template
Functionality
Backbone.css
Backbone.html
Backbone-model.js
Backbone-view.js
Angular.css
Angular.html
Angular-service.js
Angular-ctrl.js
Style
Template
Functionality
Style
Template
Functionality
Backbone.css
Backbone.html
Backbone-model.js
Backbone-view.js
Angular.css
Angular.html
Angular-service.js
Angular-ctrl.js
Style
Template
Functionality
component.js
Item.js
Functionality
Template
Style
Single source of truth
Thinking in components
Always redraw
(Virtual DOM)
Item.js
Update state
Always redraw
with new state
Component
Component
Props
Props
Component
Props
Component
Props
Component
Props
State
Component
Component
Component
Props
Props
Component
Props
Component
Props
Component
Props
State
Component
Actions
Flux
So, why React?
So, why React?
Why not?
Q & A

ReactJS Overview