Introduction of React.js

Introduction of React.js

• 1.
  Introduction of React http://jyaasa.comCopyright2016. Jyaasa Technologies.
• 2.
  Hello ! I amNikesh Suwal http://jyaasa.comCopyright 2016. Jyaasa Technologies. Sr.Front End Engineer Jyaasa Technologies
• 3.
  http://jyaasa.comCopyright 2016. JyaasaTechnologies. A JavaScript library for building User Interface ReactJs
• 4.
  http://jyaasa.comCopyright 2016. JyaasaTechnologies. ● 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. JyaasaTechnologies. 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. JyaasaTechnologies. ● Fundamental building block of React ● Maps to element in your DOM ● Composable units to structure your app React Component
• 7.
  http://jyaasa.comCopyright 2016. JyaasaTechnologies. Component ● Created using React.createClass() ● The only required method is render() ● Inserted into DOM using ReactDOM.render
• 8.
  http://jyaasa.comCopyright 2016. JyaasaTechnologies. Props ● Passed down to component from parent component and represents data for the component ● accessed via this.props
• 9.
  http://jyaasa.comCopyright 2016. JyaasaTechnologies. 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. JyaasaTechnologies. JSX ● XML-like syntax for generating component’s HTML ● Easier to read and understand large DOM trees
• 11.
  http://jyaasa.comCopyright 2016. JyaasaTechnologies. 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.comCopyright2015. Jyaasa Technologies.Copyright 2016. Jyaasa Technologies. http://jyaasa.com