A Brief intro to React.js

1. React
The Dawn of Virtual DOM

2. What is React
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
Main Features
• Just V of MVC
• Virtual DOM
• One Way Data Flow

3. 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

4. Lets Get started
The most important thing
Virtual DOM
To understand this We need to first see
Real DOM
The Reason for performance

5. Real DOM
Disadvantage
DOM manipulation APIs are slow
Surprisingly 😟
All the framework do this on every update

6. Enter the Dawn of Virtual DOM
React DOM Update Strategy

7. 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

8. Benefits
Minimal DOM manipulation calls
Batch execution saves a lot of computation
Super Fast Performance

10. Getting started with React
React 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 Components
var MyComponent = React.createClass({
render: function() {
...
}
});
(Encapsulated React Elements)
(You will use this the most)

11. React Recommends Use of JSX
What is JSX
ped, object-oriented programming language designed to run on m
In short
Its just like Type script and transpiles into Plain Javascript
Without JSX
With JSX

12. 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

13. Demo Time

14. 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

15. 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

16. 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

17. 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

18. 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

19. Advantages
Declarative Nature
numbers = [1,2,3,4]
total = 0
for(i=0; i<numbers.length; i++)
{
total = total + numbers[i]
}
Implicit Declarative
numbers = [1,2,3,4]
numbers.reduce(
function(previousValue, currentValue) {
return previousValue + currentValue;
});
• componentWillMount()
• componentWillReceiveProps( {NextProps} )
• componentDidUpdate( {PreviousProps} , {PreviousState} )
• componentDidMount()
• componentWillUnmount()
• getInitialState
Example

20. 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

21. Synthetic events
• Only single event listener is binded per component
• Results in less memory usage and improvement in perform

22. 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

23. Best in class dev tool
react-devtools

24. 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

25. Thank You