Introduction to ReactJS

ReactJSPresented by Sajith Dilshan

First Project
$ npm install -g create-react-app
$ create-react-app hello-world
$ cd hello-world
$ npm start

Let’s see how it
really works

Components
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="App">
<h1> Hello World </h1>
</div>
);
}
}
export default App;

React JSXsyntactic-sugar for JS
const element =
(
<h1 className="greeting">
Hello, world!
</h1>
);
JSX Code
const element =
React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
Compiled JS Code
• Template Language with full power of JS
• Prevents injection attacks
https://facebook.github.io/react/docs/introducing-jsx.html
more…
https://facebook.github.io/react/docs/jsx-in-depth.html

State vs.Props
•STATE - Specific to a particular component (to track the
changes of the component
•PROPS - Passed from the parent Component.Inputs to
the child component
Features STATE PROPS
Can get initial value from parent
component?
Yes Yes
Can be directly changed by parent
component?
No Yes
Can set default values inside
component?
Yes Yes
Can change inside component? Yes No
Can set initial value for child
component?
Yes Yes
Can change in child component? Yes No

Component Events - Mounting
• constructor()
• componentWillMount()
• render()
• componentDidMount()

Component Events - Updating
• componentWillReceiveProps(nextProps)
• shouldComponentUpdate(nextProps,nextState)
• componentWillUpdate(nextProps,nextState)
• render()
• componentDidUpdate(prevProps,prevState)

Component Events - Unmounting
• componentWillUnmount()
Instance Properties,API
• props
• state
• setState()
• forceUpdate()

Virtual DOM
User’s View
(Real DOM)
Background JS Process
(Virtual DOM)
Initial State

Virtual DOM
User’s View
(Real DOM)
(Virtual DOM)
First Render
<html>
<div>
<h1>Sajith</h1>
</div>
</html>

Virtual DOM
User’s View
(Real DOM)
(Virtual DOM)
Real DOM populated and Virtual DOM cleared
<html>
<div>
<h1>Sajith</h1>
</div>
</html>
<html>
<div>
<h1>Sajith</h1>
</div>
</html>

Virtual DOM
User’s View
(Real DOM)
(Virtual DOM)
Click on Change Me
<html>
<div>
<h1>Sajith</h1>
</div>
</html>
<html>
<div>
<h1>Dilshan</h1>
</div>
</html>

Virtual DOM
User’s View
(Real DOM)
(Virtual DOM)
Only modified section is updated in Real DOM and
Virtual DOM is cleared
<html>
<div>
<h1>Dilshan</h1>
</div>
</html>
<html>
<div>
<h1>Dilshan</h1>
</div>
</html>
<html>
<div>
<h1>Sajith</h1>
</div>
</html>

Reconciliation
• Use “diffing” algorithm
• the state of the art algorithms have a
complexity in the order of O(n3) where n is
the number of elements in the tree.
• React implements a heuristic O(n)
algorithm
https://facebook.github.io/react/docs/reconciliation.html

Flux
Action
Dispatcher Store View

Let’s see how it
used in UltraStudio

Introduction to ReactJS

More Related Content

Introduction to ReactJS