introduction of react.js

Introduction of React

http://jyaasa.comCopyright 2016. Jyaasa Technologies.

Hello ! I am Nikesh Suwal


Sr.Front End Engineer

Jyaasa Technologies


A JavaScript library for building User Interface

ReactJs


● 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


Who’s using it?● Facebook and Instagram

● Netflix

● AirBnB

● Atlassian (HipChat)

● Yahoo (mail)

● Dropbox

● BBC

● Github

● CodeAcademy

● PayPal

● Reddit

● Imgur


● Fundamental building block of React

● Maps to element in your DOM

● Composable units to structure your app

React Component


Component● Created using React.createClass()● The only required method is render()● Inserted into DOM using ReactDOM.render


Props● Passed down to component from parent component and

represents data for the component● accessed via this.props


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


JSX● XML-like syntax for generating component’s HTML● Easier to read and understand large DOM trees


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

Thank you!

Any Queries?

facebook.com/nikesh.suwalgithub.com/nikeshsuwal

http://jyaasa.comCopyright 2015. Jyaasa Technologies. Copyright 2016. Jyaasa Technologies. http://jyaasa.com

introduction of react.js

Software