React is a UI library developed at Facebook to facilitate the creation of interactive, stateful & reusable UI components. It is used at Facebook in production, and Instagram.com is written entirely in React.

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