Introduction to ReactJS
•
0 likes•161 views
First Project Components React JSX syntactic-sugar for JS State vs. Props Component Events - Mounting Component Events - Updating Component Events - Unmounting Virtual DOM Reconciliation Flux https://www.adroitlogic.com https://developer.adroitlogic.com
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Introduction to ReactJS
Similar to Introduction to ReactJS (20)
More from AdroitLogic
More from AdroitLogic (17)
Recently uploaded
Recently uploaded (20)
Introduction to ReactJS
- 1. ReactJSPresented by Sajith Dilshan
- 2. First Project $ npm install -g create-react-app $ create-react-app hello-world $ cd hello-world $ npm start
- 3. Let’s see how it really works
- 4. Components import React, { Component } from 'react'; class App extends Component { render() { return ( <div className="App"> <h1> Hello World </h1> </div> ); } } export default App;
- 5. 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
- 6. 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
- 7. Component Events - Mounting • constructor() • componentWillMount() • render() • componentDidMount()
- 8. Component Events - Updating • componentWillReceiveProps(nextProps) • shouldComponentUpdate(nextProps,nextState) • componentWillUpdate(nextProps,nextState) • render() • componentDidUpdate(prevProps,prevState)
- 9. Component Events - Unmounting • componentWillUnmount() Instance Properties,API • props • state • setState() • forceUpdate()
- 10. Virtual DOM User’s View (Real DOM) Background JS Process (Virtual DOM) Initial State
- 11. Virtual DOM User’s View (Real DOM) Background JS Process (Virtual DOM) First Render <html> <div> <h1>Sajith</h1> </div> </html>
- 12. Virtual DOM User’s View (Real DOM) Background JS Process (Virtual DOM) Real DOM populated and Virtual DOM cleared <html> <div> <h1>Sajith</h1> </div> </html> <html> <div> <h1>Sajith</h1> </div> </html>
- 13. Virtual DOM User’s View (Real DOM) Background JS Process (Virtual DOM) Click on Change Me <html> <div> <h1>Sajith</h1> </div> </html> <html> <div> <h1>Dilshan</h1> </div> </html>
- 14. Virtual DOM User’s View (Real DOM) Background JS Process (Virtual 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>
- 15. 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
- 20. Let’s see how it used in UltraStudio
- 21. Q&A