Introduction to ReactJSDinh Hoang Long

@dinhhoanglong91

ReactJS

A Javascript library for building user interfaces

2

JUST THE UI

V in MVC

3

VIRTUAL DOM

Simpler programming modelBetter performance

4

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

5

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

6http://www.w3schools.com/js/js_htmldom.asp

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

7

8

9

JSX = JS + XML

Why Virtual DOM?

10

90's webpage

11

Full-page refresh

90's webpage

12

Full-page refresh

Virtual DOMRe-render

Do not mutate

90's webpage

13

Full-page refresh

Virtual DOMRe-render

Do not mutate

Data is guaranteed to be updated

90's webpage

14

Full-page refresh

Virtual DOMRe-render

Do not mutate

SLOW FAST

Data is guaranteed to be updated

15

What make Virtual DOM fast?

What make Virtual DOM fast?

React: “Version control” of DOM

16

When we were “children”

17

With Version Control

What we’ve done--- with a project named “BreakOut”

BreakOutVer1

BreakOutVer2

BreakOutVer3

BreakOutFinal

BreakOutFinal2

DIFF ALGORITHM

Generate a list of DOM mutationO(n)

http://facebook.github.io/react/docs/reconciliation.html

18

Re-rendering process1. Build new virtual DOM subtree2. Diff with the old one3. Compute the minimal set of DOM mutations4. Batch execute all update

19

20

OLD NEW

21

OLD NEW

22

OLD NEW

23

OLD NEW

24

OLD NEW

25

OLD NEW

26

OLD NEW

Immutate

Unnecessary

ONE-WAY DATA BINDING

Keep complexity under control

27

Traditional data flow

Any component can communicate with other component

28

React thinkingNo controllers

No modelsNo directives

No global event listeners...

Everything is component

29

Everything is component

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

Everything is component

31

FilterableProductTable

SearchBar

ProductTable

ProductCategoryRow

ProductRow

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

Component

32

state

created within componentmutable

props

passed in from parentimmutable

State

33

changes state itself

Props

34

send props

Props

35

send props

Does data flow one way?

36

Does data flow one way?

37

Events flow upData flows down

Does data flow one way?

38

Events flow upData flows down

Events - Data Flow

39

send props request check

Batch update

40

Batch update

41

request check

event callback

Batch update

42

request check

event callback

set state

Batch update

43

request check

event callback

set state

SummaryV in MVC

Virtual DOMOne-way data binding

44

DEMO

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