ReactThe Dawn of Virtual DOM

What is React

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

Main Features

• Just V of MVC

• Virtual DOM

• One Way Data Flow

Background of React• Started by Facebook in 2013• Motivation - building large applications with data

that changes over time.

• Over 40k+ Star on Github and 645 contributors

• You are in a good company

Source - https://github.com/facebook/react/wiki/Sites-Using-React

Lets Get startedThe most important thing

Virtual DOM

To understand this We need to first see

Real DOM

The Reason for performance

Real DOM

DisadvantageDOM manipulation APIs are slow

Surprisingly 😟All the framework do this on every update

Enter the Dawn of Virtual DOM

React DOM Update Strategy

React’s Virtual DOM Strategy

On every update to component• React Builds New Virtual DOM Subtree• Diff with the actual DOM• Computes minimal DOM mutation• Batch executes updates

Benefits

Minimal DOM manipulation calls

Batch execution saves a lot of computation

Super Fast Performance

Getting started with ReactReact Terminology

React Elements(Basic Building Block) var root = React.createElement('div');

React.js Main React Library

react-dom.js Supporting library to generate DOM notation

Factories(Called internally by React Element)

function createFactory(type) { return React.createElement.bind(null, type);}

React Nodes Tree of React Element

React Componentsvar MyComponent = React.createClass({ render: function() { ... }});

(Encapsulated React Elements)(You will use this the most)

React Recommends Use of JSXWhat is JSX

JSX is a statically-typed, object-oriented programming language designed to run on modern web browsers.

In shortIts just like Type script and transpiles into Plain Javascript Without JSX

With JSX

Recommended Build Tool

Webpack

• Bundles JS using require.js• Minification, Linting, Production

Build• Loaders system allows easy

extensibility• Just like gulp but more powerful

• Lets us use ES6 and ES7 features

• React tags are transformed automatically using babel-react-presets module

Demo Time

Props• Props are like parameter to functions

• They make component super re-usable

• Way to pass info from one component to other component

• Includes props type validation to ensure sanity of data

Demo

STATE• Holds the current state of the component

• Update in the state variable updates the

component• getInitialState and setState method for updating

state value

Demo

Refs• Used to keep reference to components• If callback function is passed, then callback is

executed just after the component mounts with component as parameter

• Possible application includes animation, finding specific node

Component Specification• render -> Required method. Returns

ReactElement• getInitialState -> Not Required, If we require

some default state for component• getDefaultProps -> Not Required. If we want to

set default value of prop.• propTypes -> Not Required. Allows the prop

type validation Demo

Component Lifecycle• componentWillMount -> Invoked before the initial rendering of

component

• componentWillReceiveProps -> Invoked before the component receives

the props (not on initial render)

• componentDidUpdate -> Invoked immediately after the update of

comports are flushed to DOM

• componentDidMount -> Invoked after initial rendering of the component

(Used for fetching data from server)

• componentWillUpdate -> Called before rendering.

• shouldComponentUpdate -> Must return true (or) false. Called when new

state (or) props are being received.

• componentWillUnmount -> Called before component is unmounted

Advantages Declarative Nature

numbers = [1,2,3,4]total = 0for(i=0; i<numbers.length; i++){ total = total + numbers[i]}

Implicit Declarativenumbers = [1,2,3,4]numbers.reduce( function(previousValue, currentValue) {

return previousValue + currentValue;});

• componentWillMount()• componentWillReceiveProps( {NextProps} )• componentDidUpdate( {PreviousProps} , {PreviousState} )• componentDidMount()• componentWillUnmount()• getInitialState

Example

Advantages Composition

• Rather than building one big component, React allows to focus building mini components to compose one big component out of it.

• Highly reusable code

Synthetic events

• Only single event listener is binded per component• Results in less memory usage and improvement in performance

Plain Javascript

• Directive• digest cycle• Transclude function• $scope and $rootScope• $scope.$apply

We have all suffered our way through

Not anymore

React is pure javascript Less time learning and more time implementing

Best in class dev toolreact-devtools

Growing Eco system

React-router Axios - Promise library

Redux

React-Desktop React-Native

react-material

Source - https://github.com/enaqx/awesome-react#components

countless more …….

React-select

Thank You