Introduction to ReactJS

1. Introduction to ReactJS
Dinh Hoang Long
@dinhhoanglong91

2. ReactJS
A Javascript library for building user interfaces
2

3. JUST THE UI
V in MVC
3

4. VIRTUAL DOM
Simpler programming model
Better performance
4

5. HTML DOM
● Document Object Model
● Constructed by browser when page is loaded
● JavaScript gets all the power to create dynamic HTML
5

6. HTML DOM
● Document Object Model
● Constructed by browser when page is loaded
● JavaScript gets all the power to create dynamic HTML
6
http://www.w3schools.com/js/js_htmldom.asp

7. Virtual DOM
● Pure JavaScript (JavaScript Object)
● render() to create real DOM
● Modify real DOM when something changes
7

8. 8

9. 9
JSX = JS + XML

10. Why Virtual DOM?
10

11. 90's webpage
11
Full-page refresh

12. 90's webpage
12
Full-page refresh
Virtual DOM
Re-render
Do not mutate

13. 90's webpage
13
Full-page refresh
Virtual DOM
Re-render
Do not mutate
Data is guaranteed to be updated

14. 90's webpage
14
Full-page refresh
Virtual DOM
Re-render
Do not mutate
SLOW FAST
Data is guaranteed to be updated

15. 15
What make Virtual DOM fast?

16. What make Virtual DOM fast?
React: “Version control” of DOM
16

17. When we were “children”
17
With Version Control
What we’ve done
--- with a project named “BreakOut”
BreakOutVer1
BreakOutVer2
BreakOutVer3
BreakOutFinal
BreakOutFinal2

18. DIFF ALGORITHM
Generate a list of DOM mutation
O(n)
http://facebook.github.io/react/docs/reconciliation.html
18

19. Re-rendering process
1. Build new virtual DOM subtree
2. Diff with the old one
3. Compute the minimal set of DOM mutations
4. Batch execute all update
19

20. 20
OLD NEW

21. 21
OLD NEW

22. 22
OLD NEW

23. 23
OLD NEW

24. 24
OLD NEW

25. 25
OLD NEW

26. 26
OLD NEW
Immutate
Unnecessary

27. ONE-WAY DATA BINDING
Keep complexity under control
27

28. Traditional data flow
Any component can communicate with other component
28

29. React thinking
No controllers
No models
No directives
No global event listeners
...
Everything is component
29

30. Everything is component
30
https://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html

31. Everything is component
31
FilterableProductTable
SearchBar
ProductTable
ProductCategoryRow
ProductRow
https://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html

32. Component
32
state
created within component
mutable
props
passed in from parent
immutable

33. State
33
changes state itself

34. Props
34
send props

35. Props
35
send props

36. Does data flow one way?
36

37. Does data flow one way?
37
Events flow up
Data flows down

38. Does data flow one way?
38
Events flow up
Data flows down

39. Events - Data Flow
39
send props request check

40. Batch update
40

41. Batch update
41
request check
event callback

42. Batch update
42
request check
event callback
set state

43. Batch update
43
request check
event callback
set state

44. Summary
V in MVC
Virtual DOM
One-way data binding
44

45. DEMO
45
https://github.com/dinhhoanglong91/reactjs/tree/master/counter