Download to read offline
Uploaded byGeorge Tony
ReactJS (1)
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
![[Final] ReactJS presentation](https://cdn.slidesharecdn.com/ss_thumbnails/65cfd4f9-740f-4f41-b769-b496b6e60802-170119143904-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
ReactJS (1)
- 1. ReactJS A Web Libraryfor web development By George Tony
- 2. History Created ByJordan 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 SupportsES6(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 JSXis 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 inReact 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 reactComponent 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 Usedto 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 BrowserDom Inter Communicating Components Virtual Dom Detecting DOM changes to apply to Browser DOM DOM changes to Virtual Dom Browser Rerenders
- 9. Creating Components Main Compartsof React Component: State, props,render function.
- 10. State : aHash key where all state information about a React component are stored. Eg { “Props” : { ….}, Render(){}, “State” : { “Name” : “tony”, “Team”: “foss” } }
- 11. Props: List all tagand attributes passed to web component. Eg. <HelloWorld value=”Hello World”/> { “Props” : { “Value” : “Hello World” } “State” :{}, Render(){} }
- 12. Render function: Functionreturn 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 Reactis 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. Browserchanges Text 2 changed to 3 for 2nd Child of ul element.
- 15. Constructor Constructor to ReactClass. 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
- 16.
- 17. ComponentWillMount This function isinvoked before initial render. If setState is used in this function . Render function execute with new state.
- 18. ComponentDidMount Called after initialrender. 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 iscalled whenever Props to component is changed. setState will create additional render in this function. Argument newProps
- 20. ShouldComponentUpdate Decision to rerender 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 Forupdating. Argument newState, newProps
- 22. componentDidUpdate Called After rerender. Similar to componentDidMount. Argument oldState, oldProps
- 23. ComponentWillUnmount Called before componentgets 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 }