Introduction of React.js

•

0 likes•755 views

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.

Software

Introduction of React
http://jyaasa.comCopyright 2016. Jyaasa Technologies.

Hello !
I am Nikesh Suwal
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
Sr.Front End Engineer
Jyaasa Technologies

http://jyaasa.comCopyright 2016. Jyaasa Technologies.
A JavaScript library for building User Interface
ReactJs

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

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

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

http://jyaasa.comCopyright 2016. Jyaasa Technologies.
Component
● Created using React.createClass()
● The only required method is render()
● Inserted into DOM using ReactDOM.render

http://jyaasa.comCopyright 2016. Jyaasa Technologies.
Props
● Passed down to component from parent component and
represents data for the component
● accessed via this.props

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

http://jyaasa.comCopyright 2016. Jyaasa Technologies.
JSX
● XML-like syntax for generating component’s HTML
● Easier to read and understand large DOM trees

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

Thank you!
Any Queries?
facebook.com/nikesh.suwal
github.com/nikeshsuwal
http://jyaasa.comCopyright 2015. Jyaasa Technologies.Copyright 2016. Jyaasa Technologies. http://jyaasa.com

What's hot

Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"Lviv Startup Club

A tour of React NativeTadeu Zagallo

GWTcon 2015 - Beyond GWT 3.0 PanicCristiano Costantini

Java Intro: Unit1. Hello WorldYakov Fain

Spring IO '15 - Developing microservices, Spring Boot or Grails?Fátima Casaú Pérez

Web worker in your angular applicationSuresh Patidar

Muhammad azamuddin introduction-to-reactjsPHP Indonesia

Internal workshop react-js-mruizMiguel Ruiz Rodriguez

Web Performance & Latest in ReactTalentica Software

React NativeCraig Jolicoeur

"Applied Enterprise Metaprogramming in JavaScript", Vladyslav DukhinFwdays

JavaFX JumpStart @JavaOne 2016Hendrik Ebbers

ComponenKit and React NativeStanfy

React nativeMohammed El Rafie Tarabay

Starting with ReactjsThinh VoXuan

Developing high performance and responsive web apps using web workerSuresh Patidar

Philip Shurpik "Architecting React Native app"Fwdays

Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - DOSUG February 2016Matt Raible

Overview of React.JS - Internship Presentation - Week 5Devang Garach

Vuejs getting-started - Extended VersionMurat Doğan

What's hot (20)

Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"

A tour of React Native

GWTcon 2015 - Beyond GWT 3.0 Panic

Java Intro: Unit1. Hello World

Spring IO '15 - Developing microservices, Spring Boot or Grails?

Web worker in your angular application

Muhammad azamuddin introduction-to-reactjs

Internal workshop react-js-mruiz

Web Performance & Latest in React

React Native

"Applied Enterprise Metaprogramming in JavaScript", Vladyslav Dukhin

JavaFX JumpStart @JavaOne 2016

ComponenKit and React Native

React native

Starting with Reactjs

Developing high performance and responsive web apps using web worker

Philip Shurpik "Architecting React Native app"

Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - DOSUG February 2016

Overview of React.JS - Internship Presentation - Week 5

Vuejs getting-started - Extended Version

Viewers also liked

Command Pattern in RubyJyaasa Technologies

What is detailingAshish Jaju

Sala idealValerie Valdez Fernández

A maior descoberta do home mpptxFer Nanda

Arqueologia industrialmarcos diaz

dataWa GiBson

Teacher and Action projectkryan19

CatedralPaola Valer

Predstavitev informativni dan lesarski tehnik ssi 2016ŠC NOVO MESTO - SGLVŠ

RESUMEChloe De Leon

Fibra ópticalaura jimena piamba gonzalez

Viewers also liked (11)

Command Pattern in Ruby

What is detailing

Sala ideal

A maior descoberta do home mpptx

Arqueologia industrial

data

Teacher and Action project

Catedral

Predstavitev informativni dan lesarski tehnik ssi 2016

RESUME

Fibra óptica

Similar to Introduction of React.js

Front-end for Java developers Devoxx France 2018Deepu K Sasidharan

Introduzione a React Native - Facebook Developer Circle RomeMatteo Manchi

AngularJS workshop for beginners.Magizharasu Thirunavukkarasu

Efficient HTTP applications on the JVM with Ratpack - JDD 2015Alvaro Sanchez-Mariscal

JDD2015: In English Efficient HTTP applications on the JVM with Ratpack - Álv...PROIDEA

Top 10 PWA Frameworks in 2020Devathon

Top 10 Best PWA Development Tools and Technologies to Use.pdfGroovy Web

Across the spectrum different approaches to progressively decoupled drupal (...Acquia

Matteo Manchi - React Native for multi-platform mobile applications - Codemot...Codemotion

React vs angular what to choose for your appConcetto Labs

Top 10 java script frameworks for 2020Mantha Phani Satya Anirudh

Is Vue catching up with React.pdfMindfire LLC

data science course in bangalore|data analyst course in bangaloreEsgbnmkPhcm

react js training in mumbai|react js training onlineEsgbnmkPhcm

Frontend War: Angular vs React vs VueMarudi Subakti

QCObjects 2020 OverviewJean Machuca

The Best Guide to Know What, Why, When to Use Is ReactJSWeblineIndia

BelTech 2017 - Building Quality in the BrowserEamonn Boyle

Web summit.pptx171SagnikRoy

Best React js Training course in BangaloreAvinash Kumar

Similar to Introduction of React.js (20)

Front-end for Java developers Devoxx France 2018

Introduzione a React Native - Facebook Developer Circle Rome

AngularJS workshop for beginners.

Efficient HTTP applications on the JVM with Ratpack - JDD 2015

JDD2015: In English Efficient HTTP applications on the JVM with Ratpack - Álv...

Top 10 PWA Frameworks in 2020

Top 10 Best PWA Development Tools and Technologies to Use.pdf

Across the spectrum different approaches to progressively decoupled drupal (...

Matteo Manchi - React Native for multi-platform mobile applications - Codemot...

React vs angular what to choose for your app

Top 10 java script frameworks for 2020

Is Vue catching up with React.pdf

data science course in bangalore|data analyst course in bangalore

react js training in mumbai|react js training online

Frontend War: Angular vs React vs Vue

QCObjects 2020 Overview

The Best Guide to Know What, Why, When to Use Is ReactJS

BelTech 2017 - Building Quality in the Browser

Web summit.pptx

Best React js Training course in Bangalore

Recently uploaded

Cyber security and its impact on E commercemanigoyal112

Innovate and Collaborate- Harnessing the Power of Open Source Software.pdfYashikaSharma391629

Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...Cizo Technology Services

What is Advanced Excel and what are some best practices for designing and cre...Technogeeks

Post Quantum Cryptography – The Impact on Identityteam-WIBU

Powering Real-Time Decisions with Continuous Data StreamsSafe Software

Unveiling the Future: Sylius 2.0 New FeaturesŁukasz Chruściel

Real-time Tracking and Monitoring with Cargo Cloud Solutions.pptxRTS corp

Simplifying Microservices & Apps - The art of effortless development - Meetup...Rob Geurden

Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...OnePlan Solutions

Precise and Complete Requirements? An Elusive GoalLionel Briand

Machine Learning Software Engineering Patterns and Their EngineeringHironori Washizaki

Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...Matt Ray

Xen Safety Embedded OSS Summit April 2024 v4.pdfStefano Stabellini

UI5ers live - Custom Controls wrapping 3rd-party libs.pptxAndreas Kunz

VK Business Profile - provides IT solutions and Web Developmentvyaparkranti

Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...OnePlan Solutions

Odoo 14 - eLearning Module In Odoo 14 Enterprisepreethippts

Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)jennyeacort

SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte GermanyChristoph Pohl

Recently uploaded (20)

Cyber security and its impact on E commerce

Innovate and Collaborate- Harnessing the Power of Open Source Software.pdf

Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...

What is Advanced Excel and what are some best practices for designing and cre...

Post Quantum Cryptography – The Impact on Identity

Powering Real-Time Decisions with Continuous Data Streams

Unveiling the Future: Sylius 2.0 New Features

Real-time Tracking and Monitoring with Cargo Cloud Solutions.pptx

Simplifying Microservices & Apps - The art of effortless development - Meetup...

Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...

Precise and Complete Requirements? An Elusive Goal

Machine Learning Software Engineering Patterns and Their Engineering

Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...

Xen Safety Embedded OSS Summit April 2024 v4.pdf

UI5ers live - Custom Controls wrapping 3rd-party libs.pptx

VK Business Profile - provides IT solutions and Web Development

Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...

Odoo 14 - eLearning Module In Odoo 14 Enterprise

Call Us🔝>༒+91-9711147426⇛Call In girls karol bagh (Delhi)

SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte Germany

Introduction of React.js

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

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

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

Introduction of React.js

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (11)

Similar to Introduction of React.js

Similar to Introduction of React.js (20)

More from Jyaasa Technologies

More from Jyaasa Technologies (20)

Recently uploaded

Recently uploaded (20)

Introduction of React.js