ReactJSA Web Library for web development

By George Tony

History Created By Jordan Walke, Facebook

Influenced by XHP, an HTML component framework for PHP

Open Source on 2013

Released React Native for IOS and android development in React on 2015

React and React native are top two stared open sourced project of facebook.

React is 6th most starred project( Star : 52k, Fork : 9k )

Introduction

Written in JSX

Supports ES6(ECMAScript 6).

Classes ,arrow function … support comes to React with ES6.

Can create reusable Components

<HelloWorld/>

<div> Hello World </div>

Unidirectional.

Virtual DOM to detect Changes.

JSX and ES6

JSX is a preprocessor step that adds XML syntax to JavaScript.

ES6 new standard for Javascript which give support for much needed classes etc.

Compilers are used to convert JSX files to javascript for web browser.

Reusable Component.

Componet in React are like Html tag

Eg <input>

Link fo support html tag.

All the html tag are supported by the react.

Give ability to create New Component with existing ones

Events Handlers.

Html event like click, focus, hover are handled by the event handler in React

Eg <input value={this.state.value} onChange={ e => this.setState( { value : e.target.value })}/>

Link to events

Console of react Component

console.log(this){“props” : { ... }, // all the attribute of react component “state” : {... }, // all state variable in hash “refs” : {...}, // all reference to child components render(){...}, // render function component*(){..} // Life cycle function….. // other user defined function}

React special attributes

Key

Used to map array of child node

className

Used to give css classname

Style

Inline style to react element

Hash of key-value pairs

Ref

Reference to element to used to modified component

All reference are avaialble in this.refs

<ul className=”list” ref=”listItem”><li key=1 style={style1}>1

</li><li key=2

style={style2}>2

</li></ul>

React Architecture

React Component Virtual Dom Browser Dom

Inter Communicating Components

Virtual Dom Detecting DOM changes to apply to Browser DOM

DOM changes to Virtual Dom

Browser Rerenders

Creating ComponentsMain Comparts of React Component:

State, props,render function.

State : a Hash key where all state information about a React component are stored.

Eg { “Props” : { ….},Render(){},

“State” : { “Name” : “tony”, “Team”: “foss” }

}

Props:

List all tag and attributes passed to web component.

Eg. <HelloWorld value=”Hello World”/>

{ “Props” : { “Value” : “Hello World”

}

“State” :{},Render(){}}

Render function: Function return what to output to web browser.

Eg render(){

Return (<div>

<p> Hello World </p></div>)}

Render function is called when state variable is changed by using this.setState method.

Rendering Component for small change with state that has no effect UI is expensive to Avoid this we use function shouldComponentUpdate.More about this will cover in Component Life Cycle.

React Virtual Dom

React is Unidirectional.

If anyone want to modify html element in the browser . It has to be through React Only.

If any modification from outside react will be overwritten by React on Next Dom Modification.

React checks if there any for diff b/w Browser Dom in its Memory and Virtual DOM. Any Changes is applied to browser.

Example

Browser

<ul><li>1</li><li>2</li>

</ul

Virual Dom

<ul><li>1</

li><li>3</li></ul>

Changes applied.

Browser changes Text 2 changed to 3 for 2nd Child of ul element.

Constructor

Constructor to React Class.

Argument for constructor is props

you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.

The constructor is the right place to initialize state. If you don't initialize state and you don't bind methods, you don't need to implement a constructor for your React component.

constructor(props) { super(props); this.state = { color: props.initialColor };}

Component Life Cycle

componentWillMount

componentDidMount

componentWillRecieveProps

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

componentWillUnmount

ComponentWillMount

This function is invoked before initial render.

If setState is used in this function . Render function execute with new state.

ComponentDidMount

Called after initial render.

At this state all the reference to component can be set properly.

Integration to Other JS Library is done here with timeout functions.

ComponentWillReceiveProps

This function is called whenever Props to component is changed.

setState will create additional render in this function.

Argument newProps

ShouldComponentUpdate

Decision to re render or not ?

Returns Boolean

True : Component re render.

False: component skip render.

Effective for state change which does not involve UI changes

Argument to this newState,newProps

ComponentWillUpdate

Preparing Component For updating.

Argument newState, newProps

componentDidUpdate

Called After re render.

Similar to componentDidMount.

Argument oldState, oldProps

ComponentWillUnmount

Called before component gets removed from Dom

Cleaning reference and changes done by external Library in componentDidUpdate and componentDidMount

Class Property

defaultProps

defaultProps = { name : “g”}

propTypes

propTypes = { name : React.PropTypes.string }