Scribd
Upload
99 views33 pages

Introduction to React Components

The document introduces React, a JavaScript library for building user interfaces. It discusses how React uses virtual DOM to render UI components efficiently. Components are built to represent data, rather than using templates. The UI re-renders when data changes, rather than mutating the DOM. React uses a virtual DOM for fast re-rendering by efficiently comparing changes and applying minimal DOM updates.

Uploaded by

Саша SteamBoy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
99 views33 pages

Introduction to React Components

The document introduces React, a JavaScript library for building user interfaces. It discusses how React uses virtual DOM to render UI components efficiently. Components are built to represent data, rather than using templates. The UI re-renders when data changes, rather than mutating the DOM. React uses a virtual DOM for fast re-rendering by efficiently comparing changes and applying minimal DOM updates.

Uploaded by

Саша SteamBoy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, 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, dont mutate


Build components,
not templates

Re-render, dont 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

Dont need to use it as such


JSX

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


Re-render, dont mutate!

Every component has state and props.

18
Re-render, dont mutate!

Every component has state and props.

Acts as an Immutable DOM.

19
Re-render, dont mutate!

Every component has state and props.

Acts as an Immutable DOM.

Re-render the whole app once the state changes.

20
Re-render, dont mutate!

Data is guaranteed
to update!

21
Re-render, dont mutate!

Just like the 90s


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