Scribd
Upload
478 views

React JS PDF

This document introduces React, a JavaScript library for building user interfaces. It summarizes that React allows building of components to generate DOM elements and render views based on changing data and state. It uses a virtual DOM for efficient re-rendering only of changed portions after data updates. Components have state and props, and the whole app re-renders immutably on state changes rather than directly mutating the DOM.

Uploaded by

Ram Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
478 views

React JS PDF

This document introduces React, a JavaScript library for building user interfaces. It summarizes that React allows building of components to generate DOM elements and render views based on changing data and state. It uses a virtual DOM for efficient re-rendering only of changed portions after data updates. Components have state and props, and the whole app re-renders immutably on state changes rather than directly mutating the DOM.

Uploaded by

Ram Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

React: A Sneak Peak

Jai Santhosh
UI Engineer @ Flipkart
@jaisanth
Meet React.

Not yet another JS framework!


Meet React.

But just a library for creating user


interfaces.
Meet React.

Renders your UI and responds to


events.
Meet React.

a.k.a. The “V” in MVC


Build components,
not templates
Build components,
not templates

Re-render, don’t mutate


Build components,
not templates

Re-render, don’t mutate

Fast Virtual DOM


Build components, not templates

• Combine DOM generation and display logic.

9
Build components, not templates

• Combine DOM generation and display logic.

• Transform data into interface components.

10
Build components, not templates

• Combine DOM generation and display logic.

• Transform data into interface components.

• Data can come from anywhere.

11
Build components, not templates

12
Build components, not templates

13
JSX

Allows you to write JS & XML


JSX

Allows you to write JS & XML


Together!
JSX

Don’t need to use it as such


JSX

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


Re-render, don’t mutate!

• Every component has “state” and “props”.

18
Re-render, don’t mutate!

• Every component has “state” and “props”.

• Acts as an “Immutable DOM”.

19
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
Re-render, don’t mutate!

Data is guaranteed
to update!

21
Re-render, don’t mutate!

Just like the 90’s


Full-page refresh!!

22
Fast Virtual DOM

Virtual DOM
Makes re-rendering on every change fast.

24
Fast Virtual DOM

On every update…
• React builds a new virtual DOM subtree

25
Fast Virtual DOM

On every update…
• React builds a new virtual DOM subtree

• …diffs it with the old one

26
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
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
Fast Virtual DOM
none to first
• Create Node: <div
className="first"><span>A Span</span></div>

first to second
• Replace attribute: className=“first" by
className=“second"
• Replace node: <span>A
Span</span> by <p>A Paragraph</p>

second to none
• Remove Node: <div
className="second"><p>A Paragraph</p></div>
29
Fast Virtual DOM

Virtual DOM is simple and fast

30
http://reactjs.org/
#reactjs on Freenode IRC
reactjs on Google Groups
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/
Thank You!!

You might also like