react js101

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