Introduction to ReactJS

ReactJS Presented 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

DOM) First Render <html> <div> <h1>Sajith</h1> </div> </html>

DOM) Real DOM populated and Virtual DOM cleared <html> <div> <h1>Sajith</h1> </div> </html> <html> <div> <h1>Sajith</h1> </div> </html>

DOM) Click on Change Me <html> <div> <h1>Sajith</h1> </div> </html> <html> <div> <h1>Dilshan</h1> </div> </html>

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

Introduction to ReactJS

AdroitLogic

More Decks by AdroitLogic

Other Decks in Programming

Featured

Transcript

ReactJS Presented by Sajith Dilshan

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

Let’s see how it really works

Components import React, { Component } from 'react'; class App

React JSXsyntactic-sugar for JS const element = ( <h1 className="greeting">

State vs. Props •STATE - Specific to a particular component

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

Component Events - Updating • componentWillReceiveProps(nextProps) • shouldComponentUpdate(nextProps, nextState) •

Component Events - Unmounting • componentWillUnmount() Instance Properties, API •

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

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

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

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

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

Reconciliation • Use “diffing” algorithm • the state of the

Flux Action Dispatcher Store View

Flux Action Dispatcher Store View

Flux Action Dispatcher Store View

Flux Action Dispatcher Store View

Let’s see how it used in UltraStudio

Q&A