ReactJS is a JavaScript library for building user interfaces that uses a component-based approach. It introduces concepts like single source of truth, thinking in components, and always redrawing using a virtual DOM. Components receive data via props and maintain internal state. The library encourages separating functionality, templates, and styles into distinct components. Data flows in one direction via actions in a Flux architecture. React aims to make it easier to build large, complex user interfaces by dividing them into independent, reusable pieces.

1. ReactJS Overview
09/14/2015

2. Ping-Wen (Mark) Hsu Full-Stack Developer

5. Controller
View
Model

6. Initial fetch
Model
View

7. Initial fetch
Model
View
User Interaction

8. Initial fetch
Model
View
User Interaction
Model Model
View View

9. Initial fetch
Model
View
User Interaction
Model Model
View View

10. Initial fetch
Model
View
User Interaction
Model Model
View View

11. Initial fetch
Model
View
User Interaction
Model Model
View View

12. Initial fetch
Model
View
User Interaction
Model Model
View View
Real-Time

13. Single source of truth
Thinking in components
Always redraw
(Virtual DOM)

14. Single source of truth
Thinking in components
Always redraw
(Virtual DOM)

15. Model
View
View
Model
Model
View
Model
View
Model
View
Model
View

16. Controller
Controller
scope
scope
Controller
scope
Controller
scope
Controller
scope
scope
Controller

17. Component
Component
Props
Props
Component
Props
Component
Props
Component
Props
State
Component

18. Single source of truth
Thinking in components
Always redraw
(Virtual DOM)

19. 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

20. 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

21. Item.js
Functionality
Template
Style

22. Single source of truth
Thinking in components
Always redraw
(Virtual DOM)

23. Item.js
Update state
Always redraw
with new state

24. Component
Component
Props
Props
Component
Props
Component
Props
Component
Props
State
Component

25. Component
Component
Props
Props
Component
Props
Component
Props
Component
Props
State
Component
Actions
Flux

26. So, why React?

27. So, why React?
Why not?

28. Q & A