react js101
TRANSCRIPT
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 JScreated by Facebook / Instagram
Song YANG
KEY CONCEPTS
▫︎ Just the UI
▫︎ Re-render everything on every change
▫︎ Virtual DOM
▫︎ Synthetic Events
▫︎ Component-centric view layer
2
REACT JS is not a MVC framework
JUST UI
3
ONLY CARES ABOUT THE UI
▫︎ Routers
▫︎Models
▫︎Bindings
▫︎Observers
▫︎ Templates
4
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
RE-RENDER THE ENTIRE APP
ON EVERY CHANGE
7
8
▫︎No observers
▫︎No magical data binding
▫︎No model dirty checking
▫︎No $apply() or $digest()
Makes things simple to reason about
Re-render
Virtual DOM
9
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
VIRTUAL DOM DIFFING
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
Render from Data to Virtual DOM is fast No string concatenation
Synthetic Events
14
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
Talk is Cheap, show you the code
17
JSX is a JavaScript syntax extension that looks similar to XML. You can use a simple JSX syntactic transform with React.
JSX
18
19
https://github.com/owenyang0/react-starter
git clone
20
1 Rendering
21
2 Components
22
23
3 Props
24
25
4 State
26
27
5 Composition
28
29
Thanks