React js101

1. a J a v a S c r i p t l i b r a r y f o r b u i l d i n g U I
REACT JS
created by Facebook / Instagram
Song YANG

2. KEY CONCEPTS
▫︎Just the UI
▫︎Re-render everything on every change
▫︎Virtual DOM
▫︎Synthetic Events
▫︎Component-centric view layer
2

3. REACT JS is not a MVC framework
JUST UI
3

4. ONLY CARES ABOUT THE UI
▫︎Routers
▫︎Models
▫︎Bindings
▫︎Observers
▫︎Templates
4

5. BINDINGS / OBSERVERS
▫︎Must mutate Model to propagate changes to View
▫︎Each mutation can trigger other observers (Run Loop /
Digest Loop)
▫︎Can't use immutable data structures as your model
▫︎Two-way bindings open Pandora’s box
▫︎No easy way of knowing how far-reaching a change in
the reverse direction is going to be
5

6. 6

7. RE-RENDER THE ENTIRE APP
ON EVERY CHANGE
7

8. 8
▫︎No observers
▫︎No magical data binding
▫︎No model dirty checking
▫︎No $apply() or $digest()
Makes things simple to reason about
Re-render

9. Virtual DOM
9

10. VIRTUAL DOM
10
▫︎in-memory data structure (fast)
▫︎JavaScript representation of DOM
nodes, totally separate from the
browser’s slow JavaScript/C++ DOM API
▫︎Makes server-side rendering possible
▫︎Most important…

11. 11
VIRTUAL DOM
DIFFING

12. 12
▫︎Build new Virtual DOM tree
▫︎Diff with old one
▫︎Compute minimal set of changes
▫︎Put them in a queue
▫︎Batch render all changes to browser
Treat the DOM like a GPU!
ON EVERY UPDATE

13. 13
Render from Data to Virtual DOM is fast
No string concatenation

14. Synthetic Events
14

15. 15
▫︎React implements it's own event system
▫︎a cross-browser wrapper around the browser's
native event
▫︎same interface as the browser's native event
Treat the DOM like a GPU!
Synthetic Events

16. 16
Talk is Cheap, show you the code

17. 17
JSX is a JavaScript syntax extension
that looks similar to XML. You can use
a simple JSX syntactic transform with
React.
JSX

18. 18

19. 19
https://github.com/owenyang0/react-starter
git clone

20. 20
1 Rendering

21. 21
2 Components

22. 22

23. 23
3 Props

24. 24

25. 25
4 State

26. 26

27. 27
5 Composition

28. 28

29. 29
Thanks