This document introduces React, describing it as a JavaScript library for building user interfaces by rendering components rather than mutating the DOM directly. It discusses how React uses a virtual DOM for fast re-rendering, building components instead of templates, and the use of JSX syntax to write HTML-like code. Components have state and props, and the whole app re-renders when state changes to guarantee updates.

1. React: A Sneak Peak
Jai Santhosh
UI Engineer @ Flipkart
@jaisanth

2. Meet React.
Not yet another JS framework!

3. Meet React.
But just a library for creating user
interfaces.

4. Meet React.
Renders your UI and responds to
events.

5. Meet React.
a.k.a. The “V” in
MVC

6. Build components,
not templates

7. Build components,
not templates
Re-render, don’t mutate

8. Build components,
not templates
Re-render, don’t mutate
Fast Virtual DOM

9. Build components, not templates
• Combine DOM generation and display logic.
9

10. Build components, not templates
• Combine DOM generation and display logic.
• Transform data into interface components.
10

11. Build components, not templates
• Combine DOM generation and display logic.
• Transform data into interface components.
• Data can come from anywhere.
11

12. Build components, not templates
12

13. Build components, not templates
13

14. JSX
Allows you to write JS & XML

15. JSX
Allows you to write JS & XML
Together!

16. JSX
Don’t need to use it as such

17. JSX
React.DOM.div({}, 'Hello ' + this.props.name)

18. Re-render, don’t mutate!
• Every component has “state” and “props”.
18

19. Re-render, don’t mutate!
• Every component has “state” and “props”.
• Acts as an “Immutable DOM”.
19

20. Re-render, don’t mutate!
• Every component has “state” and “props”.
• Acts as an “Immutable DOM”.
• Re-render the whole app once the state changes.
20

21. Re-render, don’t mutate!
Data is guaranteed
to update!
21

22. Re-render, don’t mutate!
Just like the 90’s
Full-page refresh!!
22

24. Fast Virtual DOM
Virtual DOM
Makes re-rendering on every change fast.
24

25. Fast Virtual DOM
On every update…
• React builds a new virtual DOM subtree
25

26. Fast Virtual DOM
On every update…
• React builds a new virtual DOM subtree
• …diffs it with the old one
26

27. Fast Virtual DOM
On every update…
• React builds a new virtual DOM subtree
• …diffs it with the old one
• …computes the minimal set of DOM
mutations and puts them in a queue
27

28. Fast Virtual DOM
On every update…
• React builds a new virtual DOM subtree
• …diffs it with the old one
• …computes the minimal set of DOM
mutations and puts them in a queue
• …and batch exexutes all updates
28

29. Fast Virtual DOM
none to first
• Create Node:
<div
className="first"><span>A Span</span></div>
first to second
• Replace attribute:
className=“second"
className=“first" by
• Replace node:
Span</span> by <p>A Paragraph</p>
<span>A
second to none
• Remove Node:
<div
className="second"><p>A Paragraph</p></div>
29

30. Fast Virtual DOM
Virtual DOM is simple and fast
30

31. http://reactjs.org/
#reactjs on Freenode IRC
reactjs on Google Groups

32. Other helpful links:
• http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/
• https://news.ycombinator.com/item?id=6936975
• https://news.ycombinator.com/item?id=6937921
• http://calendar.perfplanet.com/2013/diff/

33. Thank You!!