Upload
george-tony
View
106
Download
8
Embed Size (px)
Citation preview
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 }