SlideShare a Scribd company logo

reactJS

•Download as PPTX, PDF•
•
Syam Santhosh
Syam Santhosh

This document provides an introduction to React.js, including: - React is a JavaScript library for building user interfaces and was developed by Facebook. It is the VIEW component in MVC architecture. - Key features and benefits of React include being fast, modular, scalable, flexible, and popular due to its employability. Large companies like Facebook use React. - Core concepts of React include JSX, components, unidirectional data flow, and the virtual DOM which improves performance compared to traditional frameworks. Components are reusable pieces that make up the entire application.

Related slideshows

React js
React jsReact js
React js
 
React workshop presentation
React workshop presentationReact workshop presentation
React workshop presentation
 
Introduction to React JS for beginners
Introduction to React JS for beginners Introduction to React JS for beginners
Introduction to React JS for beginners
 
1 of 30
Introduction to React
reactJS
reactJS
What is React.js? • A JavaScript library for building user interfaces. • Developed by Facebook • React is VIEW in MVC • Suitable for dynamic websites
Fast Apps are made in React can handle complex updates and still feel quick responsive Modular Instead of writing large, dense files of code,you can write many smaller,reusable file.React’s modularity can be a beautiful solution to javascript maintability problems Scalable Large programs that display a lot of changing data are where react perform best Popular While this reason has admittedly little to do with reacts quality the truth is that understanding react will make you more employable Flexible You can use React for interesting projects that have nothing to do with making web apps Here are just few of the reason why people choose to program with react
Who is using React?
reactJS
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 • Coding is simpler because of JSX • Reactjs own debugger • React Native is going to be next big thing • Big minds are backing Reactjs
ReactJs is V in MVC Controller Model Model Model View
Core Concepts
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.
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
Components In Reactjs the whole application is break into the components. Components are interactive, reusable and stageful too.
Unidirectional Data Flow - As compare to other MVC frameworks/Library Reactjs use the concept of 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
reactJS
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
Traditional Web App React Web App
On Every Update… • React builds a new virtual DOM subtree • Diff it with the old one • Computes the minimal set of DOM mutations and puts them in a queue • Batch executes all updates
Lets Start • Download react • Download JSX • Install React debugger tool (Chrome)
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.
reactJS
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
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
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}
Events • Reactjs has the events that are attached with the components as the props of the components and can trigger methods.
We have created a custom method clickCount and onClick of the button we are calling it onClick = {this.clickCount}
Angular Backbone React Type MV* MVC V Technology HTML/CSS/JS/A ngular HTML/CSS/JS/b ackbone 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
Sources •facebook.github.io/react •Google •Scotch.io •Opensourceforu.org •edX.org
THANK YOU

More Related Content

reactJS

  • 4. What is React.js? • A JavaScript library for building user interfaces. • Developed by Facebook • React is VIEW in MVC • Suitable for dynamic websites
  • 5. Fast Apps are made in React can handle complex updates and still feel quick responsive Modular Instead of writing large, dense files of code,you can write many smaller,reusable file.React’s modularity can be a beautiful solution to javascript maintability problems Scalable Large programs that display a lot of changing data are where react perform best Popular While this reason has admittedly little to do with reacts quality the truth is that understanding react will make you more employable Flexible You can use React for interesting projects that have nothing to do with making web apps Here are just few of the reason why people choose to program with react
  • 6. Who is using React?
  • 9. • 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 • Coding is simpler because of JSX • Reactjs own debugger • React Native is going to be next big thing • Big minds are backing Reactjs
  • 10. ReactJs is V in MVC Controller Model Model Model View
  • 12. 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.
  • 13. 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
  • 14. Components In Reactjs the whole application is break into the components. Components are interactive, reusable and stageful too.
  • 15. Unidirectional Data Flow - As compare to other MVC frameworks/Library Reactjs use the concept of 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
  • 17. 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
  • 19. On Every Update… • React builds a new virtual DOM subtree • Diff it with the old one • Computes the minimal set of DOM mutations and puts them in a queue • Batch executes all updates
  • 20. Lets Start • Download react • Download JSX • Install React debugger tool (Chrome)
  • 21. 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.
  • 23. 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
  • 24. 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
  • 25. 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}
  • 26. Events • Reactjs has the events that are attached with the components as the props of the components and can trigger methods.
  • 27. We have created a custom method clickCount and onClick of the button we are calling it onClick = {this.clickCount}
  • 28. Angular Backbone React Type MV* MVC V Technology HTML/CSS/JS/A ngular HTML/CSS/JS/b ackbone 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