ReactJS (1)
Download as pptx, pdf1 like145 views
ReactJS is a JavaScript library for building user interfaces. It uses a virtual DOM to detect changes and efficiently update the real DOM. Key features include: - Using JSX syntax and ES6 features like classes - Creating reusable UI components - Unidirectional data flow from parent to child components - Handling events and managing local component state
More Related Content
What's hot (20)
Viewers also liked (13)
Similar to ReactJS (1) (20)
ReactJS (1)
- 1. ReactJS A Web Library for web development By George Tony
- 2. 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 )
- 3. 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.
- 4. 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.
- 5. 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 })}/>
- 6. 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 }
- 7. 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 <ul className=”list” ref=”listItem”> <li key=1 style={style1}> 1 </li> <li key=2 style={style2}> 2 </li> </ul>
- 8. 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
- 9. Creating Components Main Comparts of React Component: State, props,render function.
- 10. State : a Hash key where all state information about a React component are stored. Eg { “Props” : { ….}, Render(){}, “State” : { “Name” : “tony”, “Team”: “foss” } }
- 11. Props: List all tag and attributes passed to web component. Eg. <HelloWorld value=”Hello World”/> { “Props” : { “Value” : “Hello World” } “State” :{}, Render(){} }
- 12. 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.
- 13. 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.
- 14. 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.
- 15. 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
- 17. ComponentWillMount This function is invoked before initial render. If setState is used in this function . Render function execute with new state.
- 18. 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.
- 19. ComponentWillReceiveProps This function is called whenever Props to component is changed. setState will create additional render in this function. Argument newProps
- 20. 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
- 21. ComponentWillUpdate Preparing Component For updating. Argument newState, newProps
- 22. componentDidUpdate Called After re render. Similar to componentDidMount. Argument oldState, oldProps
- 23. ComponentWillUnmount Called before component gets removed from Dom Cleaning reference and changes done by external Library in componentDidUpdate and componentDidMount
- 24. Class Property defaultProps defaultProps = { name : “g”} propTypes propTypes = { name : React.PropTypes.string }