Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
480 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
480 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
We take content rights seriously. If you suspect this is your content, claim it here.
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