Introduction of React.js
0 likes766 views
The document introduces React, a JavaScript library for building user interfaces originally developed by Facebook and Instagram. It highlights key concepts such as components, props, state, JSX, and the virtual DOM, emphasizing the framework's declarative nature and efficiency in re-rendering. Popular companies using React include Netflix, Airbnb, and GitHub.
Introduction of React.js
- 1. Introduction of React http://jyaasa.comCopyright 2016. Jyaasa Technologies.
- 2. Hello ! I am Nikesh Suwal http://jyaasa.comCopyright 2016. Jyaasa Technologies. Sr.Front End Engineer Jyaasa Technologies
- 3. http://jyaasa.comCopyright 2016. Jyaasa Technologies. A JavaScript library for building User Interface ReactJs
- 4. http://jyaasa.comCopyright 2016. Jyaasa Technologies. ● Originated at Facebook and Instagram. ● A declarative View library, the V in MVC ● Can be used in any framework as the view Component About React
- 5. http://jyaasa.comCopyright 2016. Jyaasa Technologies. Who’s using it? ● Facebook and Instagram ● Netflix ● AirBnB ● Atlassian (HipChat) ● Yahoo (mail) ● Dropbox ● BBC ● Github ● CodeAcademy ● PayPal ● Reddit ● Imgur
- 6. http://jyaasa.comCopyright 2016. Jyaasa Technologies. ● Fundamental building block of React ● Maps to element in your DOM ● Composable units to structure your app React Component
- 7. http://jyaasa.comCopyright 2016. Jyaasa Technologies. Component ● Created using React.createClass() ● The only required method is render() ● Inserted into DOM using ReactDOM.render
- 8. http://jyaasa.comCopyright 2016. Jyaasa Technologies. Props ● Passed down to component from parent component and represents data for the component ● accessed via this.props
- 9. http://jyaasa.comCopyright 2016. Jyaasa Technologies. State ● Represents internal state of the component ● Accessed via this.state ● When a component's state data changes, the rendered markup will be updated by re-invoking render() method
- 10. http://jyaasa.comCopyright 2016. Jyaasa Technologies. JSX ● XML-like syntax for generating component’s HTML ● Easier to read and understand large DOM trees
- 11. http://jyaasa.comCopyright 2016. Jyaasa Technologies. Virtual DOM ● The virtual DOM is used for efficient re-rendering of the DOM ● React aims to re-render the virtual tree only when the state changes ● Uses 2 virtual trees (new and previous) to find differences and batch update real DOM ● Observes data changes (setState) and does dirty-checking to know when to re-render component
- 12. Thank you! Any Queries? facebook.com/nikesh.suwal github.com/nikeshsuwal http://jyaasa.comCopyright 2015. Jyaasa Technologies.Copyright 2016. Jyaasa Technologies. http://jyaasa.com