ReactJs
•Download as PPTX, PDF•
1 like•524 views
This Presentation is a short tutorial on the technology of ReactJs. ReactJs is a front end technology which helps in building faster and efficient UI.
Report
Share
More Related Content
What's hot
What's hot (20)
Similar to ReactJs
Similar to ReactJs (20)
Recently uploaded
Recently uploaded (20)
ReactJs
- 1. By Sahana Banerjee REACT JS
- 2. WHAT IS REACT.JS? A JavaScript library for building user interfaces. Reactjs is created by the Facebook for the V of MVC by reusable and interactive UI components.
- 3. WHO IS USING REACTJS? Facebook – Partial Instagram Netflix Paypal…etc
- 4. WHY REACT.JS? V(view) of MVC - Solution of View in MVC Virtual DOM - Reactjs use the concept of virtual DOM which helps in the performance Unidirectional Data Flow - Compare to the 2 way data binding. Reactjs use the concept of Unidirectional data flow which improve the over all performance. UI Components - Reusable and interactive components SEO Friendly - Components are client side as well as server side render hence they are SEO friendly and no 3rd party plugin required Coding is simpler because of JSX Reactjs own debugger React Native is going to be next big thing Big minds are backing Reactjs
- 5. CORE CONCEPT OF REACTJS Unidirectional Data Flow ComponentsJSX Virtual DOM
- 6. JSX JSX - javascript XML syntax transform. It helps in making our writing code easier and faster. JSX lets us writeHTML (not 100%) with XML based object representation.
- 7. Line 8-19 : Telling browser the code between the script block is JSX and not normal JavaScript. Line no 12 : This is how we write the HTML in JSX
- 8. COMPONENTS In Reactjs the whole application is break into the components. Components are interactive, reusable and stateful too.
- 9. If you don’t want to use JSX, you can still work in react however the code would be like the above as compare to the last slide without JSX
- 10. Line 9 : We are creating our component with name MyApp Line 18 : We are calling/rendering our component in the content div on the HTML page
- 11. LETS START For a simple React program: Download react Download JSX Install React debugger tool (Chrome) For building React Apps : Gulp Browserify Node js, etc …
- 13. COMPONENTS Everything in reactjs is components. The core building blocks of React application is components only. Components interact with each other and maintain the state too. In Reactjs whole application is need to be break into the component only.
- 15. PROPS In Reactjs props are like the HTML Properties. They are used to pass the data between the components or via the states. In Reactjs the props can be accessed by this.props.propsname Props can be define by name=“value”. To access this we have to call this.props.name
- 16. React.render(<MyComponent name=“Neha” />) : name is the one of the props of the component MyComponent . To access the value of the props in the react we use {this.props.name}.
- 17. STATES • Every component has a State object. Can be set by using setState. • setState triggers UI updates and to get the initial state before the setState : • getInitialState • getDefaultProps
- 18. Reactjs maintained the state – getIntialState, setState, getDefaultProps. In the above example we are getting the count variable to 5 and accessing it by {this.state.count}
- 19. COMPONENT LIFECYCLE componentWillMount – Client and server side componenet Will Occur only once (before) componentDidMount – Only once (after) shouldComponentUpdate – Return value determines weather component should update componentWillUnmount – Before unmounting component
- 21. EVENTS Reactjs has the events that are attached with the components as the props of the components and can trigger methods.
- 22. We have created a custom method clickCount and onClick of the button we are calling it onClick = {this.clickCount}
- 23. UNIDRIECTIONAL DATA FLOW In reactjs, application data flows unidirectional via the state and props not like angular js where we have 2-way data binding. Which means in multiple component hierarchy , a common parent component should manage the state and pass it down the chain by props. setState - state should be updated by setState to ensure UI will refresh/update this.props – to pass the value to the child components
- 24. UNIDIRECTIONAL DATA FLOW - In Reactjs application the data flow from the parent to the children component by the state and the props. - Only one parent is responsible to update the states and passing the value to the children components via props. - setState is used to update/refresh the UI when the state change and the value can be pass to the children component by the this.props
- 26. VIRTUAL VIRTUAL DOM Reactjs uses the concept of the virtual DOM. It selectively render the subtree of DOM elements into the rendering of the DOM on state change Use different algorithm with the browser DOM tree to identify the changes Instead of creating new object, Reactjs just identify what change is took place and once identify update that state. This way it is creating a virtual DOM and improving the performance too Can be render on server and sync on Local
- 27. Angular Backbone React Type MV* MVC V Technology HTML/CSS/JS/Ang ular HTML/CSS/JS/back bone JSX Core MVC MVC Components View HTML HTML Virtual DOM Data Flowing 2 way binding - Unidirectional Creator Google - FB* & Instagram Architchure - - React Native & Flux SEO Support Phantom js - SEO friendly