React js - The Core Concepts

We’ll Go Through
Getting at the core - Virtual DOM!
What is Virtual DOM? How it Works? React Virtual
DOM vs. the real DOM.
React - A Walkthrough.
What is React? A basic introduction of React’s
“Component” based world.
2-11
SLIDES
12-26
SLIDES

React.js is
“A JavaScript library for building user interfaces”.
Its used by leading brands namely Facebook, Instagram,
Whatsapp, Airbnb, Uber, Netflix, Twitter, Pinterest, Reddit,
Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr, Walmart
and others.
The Team Behind
Developed and Maintained by Facebook,
Instagram and a community of individual
developers and corporations.
Let’s
check out React’s
Terminology

Virtual DOM
A JavaScript representation of the actual
DOM. It’s better to think of the virtual DOM
as React’s local and simplified copy of the
HTML DOM. It allows React to do its
computations within this abstract world and
skip the “real” DOM operations, often slow
and browser-specific.
JSX (JavaScript XML)
Allows us to write HTML like syntax which gets transformed
to lightweight JavaScript objects. The syntax is intended to
be used by pre-processors (i.e., transpilers like Babel) to
transform HTML-like text found in JavaScript files into
standard JavaScript objects that a JavaScript engine will
parse.
Components
React is Component Based. You can build
encapsulated components that manage their own state,
then compose them to make complex user interfaces.BUY!
Leaf t-shirt!
cool for all purpose!
WOWSHOP
var React = require("react");
var ReactDOM = require("react-dom");
require("./index.css");
class App extends React.Component {
render: function() {
return (
<div>
Hello World!
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('app'));

Hey, we just launched our new
products! discount 70% just for
today!
WOW SHOP
State
The internal data store (object) of a
component. For data that is going to
change, we have to use state. It affects
how a component behaves and
renders.
Props & PropTypes
Get
Coupon Code
1
Most components can be customized when they are
created, with different parameters. These creation
parameters are called props.
propTypes allows you to control the presence, or
types of certain props passed to the child
component.
import PropTypes from 'prop-types';
class App extends React.Component {
constructor(){
this.state = {
date: new Date(),
count: 0
};
}
updateCounter(count) {
this.setState({count: this.state.count + count});
}
render() {
return (
<div>
<h1>Name: {this.state.name}!</h1>
<h4>Roll Number:
{this.props.roll}</h4>
<h4>Marks: {this.state.count}</h4>
<h4>Time:
{this.state.date.toLocaleTimeString()}</h4>
<input type='button' value='Add One'
onClick={this.updateCounter.bind(this, 1)} />
</div>
)
}
}
App.propTypes = {
name: PropTypes.string.isRequired,
roll: PropTypes.number.isRequired
};
App.defaultProps = {
name: "Guest",
roll: 0
};
ReactDOM.render(<App name="Nobody" roll={32} />,

React.Component
Earlier used as React.createClass(), it is the way in
which you create a new component. It takes in an
object. This object is what will specify the different
properties (render, getInitialState, propTypes) of the
component.
render() &
ReactDOM.render()
render() method essentially contains the
template for our component. Every component
is required to have a render method.
ReactDOM.render() method renders react
component to a DOM node.
Lifecycle
Each component you make will have its own lifecycle
events that are useful for various things. Methods
prefixed with will are called right before something
happens, and methods prefixed with did are called right
after something happens.

REACT IS AWESOME
You can design simple views for each state in your
application, and React will efficiently update and render
just the right components when your data changes.
Declarative views make your code more predictable and
easier to debug.
Declarativeness
React JS :
Highlights
As per the definition from Facebook, React is
used for building interactive user interfaces.
Therefore it’s basically a library that focuses on
the “View” Part of in context of an MVC
framework, thereby making it significantly
different from Angular or other JS frameworks.
Focused on “View”
You can build encapsulated components that
manage their own state, then compose them to
make complex user interfaces. Since component
logic is written in JavaScript instead of templates,
you can easily pass rich data through your app
and keep state out of the DOM.
“Component” Based
With React Native, you can build cross platform mobile
apps (android, iOS) using only JavaScript. Using the
same design as React, it lets you compose a rich mobile
UI from declarative components.
Learn Once, Write Anywhere

The Power of
React JSThe future
React helps developers
reuse code across the web
and on mobile.

Componentization
Think of a component as a collection of HTML, CSS, JS, and some
internal data specific to that component.
What makes React so convenient for building user interfaces is that
data is either received from a component’s parent component, or it’s
contained in the component itself.
We might take example of twitter user’s profile section, and name it
“UserInfo” component. Inside the UserInfo component we have
another component, that we could call the “UserImages” component,
here we will have the photos of user. The way this parent/child
relationship works is our UserInfo component, or the parent
component, is where the ‘state’ of the data for both itself and the
UserImage component (child component) lives. If we wanted to use
any part of the parent component’s data in the child component,
which we do, we would pass that data to the child component as an
attribute. In this example, we pass the UserImage component all of
the images that the user has (which currently live in the UserInfo
component).

var React = require("react");
var ReactDOM = require("react-dom");
require("./index.css");
class Helloworld extends React.Component {
return (
<div>
Hello World!
</div>
)
}
}
ReactDOM.render(
< Helloworld />,
Every component is required to have a render method.
Helloworld is our component which will be rendered on the
DOM
ReactDOM.render method renders the component on DOM.
Uses the component name and DOM node id as arguments
The “HTML” that in the render method isn’t actually HTML but
it’s what React is calling “JSX”.
React takes these JS objects and form a “virtual DOM”
return React.createElement("div", null, "Hello World");
}

DOM (Document Object Model)
The WHAT Part
Document Object Model is a cross-platform and
language-independent application programming
interface that treats an HTML, XHTML, or XML
document as a tree structure wherein each node is
an object representing a part of the document
DOM is an abstraction of a structured text. If the
structured text is an HTML code, then the DOM will be
simply called HTML DOM. Elements of that HTML
become nodes in the DOM.

DOM Processing
The HOW Part
While HTML is a text, the DOM is an in-memory
representation of this text. The HTML DOM provides
an interface (API) to traverse and modify the nodes.
So, whenever we want to dynamicly change the
content of the web page, we modify the DOM.
The CSSOM and DOM trees are combined into a
render tree, which is then used to compute the layout of
each visible element and serves as an input to the paint
process that renders the pixels to screen.

Is the DOM really
SLOW?
People often throw around the statement “The DOM is slow”. This isn’t
exactly true. The DOM is fast. Adding and removing DOM nodes
doesn’t take much more than setting a property on a JavaScript object.
It’s a simple operation.
Let’s test it out.
Ten THOUSAND divs in about 200 milliseconds.
NO!
Who Told You
That?
What is slow with DOM, however, is the layout that browsers have to
do whenever the DOM changes. Every time the DOM changes,
browser need to recalculate the CSS, do layout, and repaint the web
page. This is what takes time.

Problem as of now
SPAs
Since we are pushed towards dynamic web apps (Single
Page Applications – SPAs), we need to modify the DOM
tree incessantly and a lot.
This is a real performance and development pain. It
comes with two major issues:
1. It’s hard to manage. Imagine that you have to
tweak some functionality. If you lost the context, you
have to dive really deep into the code to even know
what’s going on. Both time-consuming and bug-risky.
2. It’s inefficient. Do we really need to do all this
findings manually? Maybe we can be smarter and
tell in advance which nodes are to-be-updated?

Solution be like React JS
HARD TO
MANAGE
1
Declarative-ness
Instead of low-level techniques like traversing
the DOM tree manually, you simple declare
how a component should look like. React does
the low-level job for you – the HTML DOM API
methods are called under the hood.
NOT
EFFICIENT
2
Virtual DOM
First of all – the Virtual DOM was not invented by React,
but React uses it and provides it for free.
Virtual DOM solutions are built on top of
standard DOM. They still utilize DOM
eventually, but do it as little as possible and
very efficiently.

The Blueprint
Virtual DOM
Virtual DOM is in-memory representation of
Real DOM. It is lightweight JavaScript
object which is copy of Real DOM.
The Virtual DOM is an abstraction of the HTML DOM. It
is lightweight and detached from the browser-specific
implementation details. Since the DOM itself was
already an abstraction, the virtual DOM is, in fact, an
abstraction of an abstraction.

What Makes VDOM Faster?
Batched
Update
Operations

Diff Algorithm : The
requirement
At a single point in time you can think of the render() function as
creating a tree of React elements.
On the next state or props update, that render() function will return a
different tree of React elements.
React then needs to figure out how to efficiently update the UI to
match the most recent tree.

Diff Algorithm - Complexity
O(n)
Goal is to generate the minimum number of operations to
transform one tree into another.
State of art algorithms have a complexity in the order of O(n3)
where n is the number of elements in the tree
.
If we used this in React, displaying 1000 elements would
require in the order of one billion comparisons.
This is far too expensive. Instead, React implements a
Heuristic O(n) algorithm based on two assumptions:
1. Two elements of different types will produce different trees
2. The developer can hint at which child elements may be
stable across different renders with a key prop

Diff Algorithm - Assumptions
Assumption 1
Two elements of different types will produce different
trees.
When diffing two trees, React first compares the two root
elements. The behaviour is different depending on the types
of the root elements.
Whenever the root elements have different types, React
will tear down the old tree and build the new tree from
scratch.
When comparing two React DOM elements of the same
type, React looks at the attributes of both, keeps the same
underlying DOM node, and only updates the changed
attributes.
<div><Counter /></div>
<span><Counter /></span>
<div className="before" title="stuff" />
<div className="after" title="stuff" />
<div style={{color: 'red', fontWeight: 'bold'}} />
<div style={{color: 'green', fontWeight: 'bold'}}
/>

Diff Algorithm - Assumptions
Assumption 2
The developer can hint at which child elements may be
stable across different renders with a key prop.
By default, when recursing on the children of a DOM node,
React just iterates over both lists of children at the same
time and generates a mutation whenever there’s a
difference. [Snippet 1]
If you implement it naively, inserting an element at the
beginning has worse performance. [Snippet 2]
In order to solve this issue, React supports a key attribute.
When children have keys, React uses the key to match
children in the original tree with children in the
subsequent tree. [Snippet 3]
<ul>
<li>first</li>
<li>second</li>
</ul>
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
<ul>
<li>Duke</li>
<li>Villanova</li>
</ul>
<ul>
<li>Connecticut</li>
<li>Duke</li>
<li>Villanova</li>
</ul>
1
2
<ul>
<li key="2015">Duke</li>
<li key="2016">Villanova</li>
</ul>
<ul>
<li
key="2014">Connecticut</li>
<li key="2015">Duke</li>
<li key="2016">Villanova</li>
</ul>
3

Diff Algorithm – Traversing VDOM
Breadth First Search
ReactJS traverses the tree using Breadth First Search
algorithm
States of element B and H have changed. So when using
BFS, ReactJS reached element B it will by default re-render
the element H. This is the reason to use BFS for tree
traversal.
A
B C
D E
H I
F G

Batch Update
ReactJS using the diff algorithm to find the minimum number of steps
to update the Real DOM.
Once it has these steps, it executes all the steps in one event loop
without involving the steps to repaint the Real DOM. Thus, if there
are more element which gets updated ReactJS will wait for the event
loop to finish then, in bulk will updated the real DOM with all the
updated elements.
Once all the steps are executed, React will repaint the Real DOM.
This means during the event loop, there is exactly one time when the
Real DOM is being painted. Thus all the layout process will run only
on time for updating the real DOM.

1Detect Changes
Using observables, signal to
notify our app some data has
changed
3
Apply Diff
Algorithm
Compare previous virtual DOM
with new virtual DOM to
evaluate the changes
Re-render Virtual
DOM
Whenever setState() method is
called on any component,
ReactJS makes that component
dirty and re-renders it
2
Quick view on Virtual DOM Process
4 Update Real DOM
Only update real DOM with
necessary changes evaluated
by diff algorithm
React App

React js - The Core Concepts

More Related Content

What's hot (20)

Similar to React js - The Core Concepts (20)

Recently uploaded (20)

React js - The Core Concepts

Editor's Notes