SlideShare a Scribd company logo
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Agenda
 What Is Artificial Intelligence ?
 What Is Machine Learning ?
 Limitations Of Machine Learning
 Deep Learning To The Rescue
 What Is Deep Learning ?
 Deep Learning Applications
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
ReactJS Applications5
Virtual DOM4
Why ReactJS?2
Agenda
JavaScript1
What Is ReactJS?3
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
JavaScript
What is JavaScript?
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
JavaScript
➢ Dynamic programming language
➢ It manipulates both the CSS styles and HTML attributes of a page
➢ It can also change the content and the way things look in a web page when a user interacts with it
Hello
World
Hello
World
HTML HTML + CSS HTML + CSS + JS
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Advantages of JavaScript Frameworks
With well-structured prebuilt patterns and functions, the projects can be developed faster
without much effort.
Efficiency
Security Cost
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Advantages of JavaScript Frameworks
Top JavaScript frameworks are generally supported by large communities where members
and users act as testers thus providing firm security.
Security
CostEfficiency
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Advantages of JavaScript Frameworks
The ultimate price for web application is lower  as most frameworks are open sourced and
free which help the programmers to build custom solutions faster.
Cost
Efficiency Security
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
JavaScript Frameworks
Vue.jsAngularJS
ReactJS
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Why ReactJS?
Now, let’s find out why we need ReactJS.
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Why ReactJS?
Dispatcher
Initial Data
Real Time
Data
User Input
Store
View
➢ Explicit data binding
➢ Uses DOM
➢ Memory Wastage
➢ Slow Performance
Other Frameworks
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
DOM Manipulation
DOM
DOM
DOM
DOM
DOM Manipulation was very expensive
Browser Real DOM
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
DOM Manipulation With ReactJS
DOM
With ReactJS, whenever there is a change in the state it will automatically handle the visual changes via Virtual DOM
Browser Virtual DOM Real DOM
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
What Is ReactJS?
Let’s now see what is ReactJS.
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
What Is ReactJS?
Frontend JavaScript library developed by facebook which
is used to develop interactive, web as well as mobile UI’s.
JavaScript HTML ReactJS
Template syntax like HTML, but provides
full power of JavaScript.
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
What Is ReactJS?
Virtual DOM Real DOM
Virtual DOM
One Way Binding
Server-side Rendering
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
What Is ReactJS?
Action Dispatcher Store View
Action
Virtual DOM
One Way Binding
Server-side Rendering
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
What Is ReactJS?
Virtual DOM
One Way Binding
Server-side Rendering
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Virtual DOM
Let’s now see what is Virtual DOM in ReactJS.
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Virtual DOM
Model gives data to View which in turn creates a DOM for it
Model View
User:max
Id:101
Loc: USA
User:max
Id:101
Loc: USA
DOM
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Virtual DOM
Model View
User: Alen
Id:101
Loc: USA
User:Alen
Id:101
Loc: USA
User:max
Id:101
Loc: USA
DOM
Now each time data was updated by the Model, View had to create a new DOM for it
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Virtual DOM
Model View
User: Alen
Id:101
Loc: UK
User:Alen
Id:101
Loc: UK
User:Alen
Id:101
Loc: USA
User:max
Id:101
Loc: USA
DOM
This puts heavy load on View and makes our processing slower
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Virtual DOM
With ReactJS, when Model gives data to View if the DOM is empty, React will create a DOM
for it
Model View
User:max
Id:101
Loc: USA
Real
DOM
User:Max
Id:101
Loc: USA
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Virtual DOM
Now whenever the data updates, React will create a virtual DOM for it and compare the
current DOM with the previous one
Model View
User:Alen
Id:101
Loc: USA
User:Alen
Id:101
Loc: USA
Real
DOMVirtual
DOM
User:Max
Id:101
Loc: USA
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Virtual DOM
Once the changes are calculated, it will update the Real DOM with only the elements that
have actually changed
Model View
User:Alen
Id:101
Loc: USA
User:Alen
Id:101
Loc: USA
Real
DOM
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
ReactJS Applications
Where is ReactJS used?
Copyright © 2017, edureka and/or its affiliates. All rights reserved.
ReactJS Applications
Copyright © 2017, edureka and/or its affiliates. All rights reserved.

More Related Content

What's hot (20)

[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
洪 鹏发
 
React js basics
React js basicsReact js basics
React js basics
Maulik Shah
 
React js - The Core Concepts
React js - The Core ConceptsReact js - The Core Concepts
React js - The Core Concepts
Divyang Bhambhani
 
Dockers and containers basics
Dockers and containers basicsDockers and containers basics
Dockers and containers basics
Sourabh Saxena
 
React JS: A Secret Preview
React JS: A Secret PreviewReact JS: A Secret Preview
React JS: A Secret Preview
valuebound
 
ReactJS presentation.pptx
ReactJS presentation.pptxReactJS presentation.pptx
ReactJS presentation.pptx
DivyanshGupta922023
 
Docker Registry V2
Docker Registry V2Docker Registry V2
Docker Registry V2
Docker, Inc.
 
NET MAUI for .NET 7 for iOS, Android app development
 NET MAUI for .NET 7 for iOS, Android app development  NET MAUI for .NET 7 for iOS, Android app development
NET MAUI for .NET 7 for iOS, Android app development
Shotaro Suzuki
 
Rest api with Python
Rest api with PythonRest api with Python
Rest api with Python
Santosh Ghimire
 
Docker Swarm for Beginner
Docker Swarm for BeginnerDocker Swarm for Beginner
Docker Swarm for Beginner
Shahzad Masud
 
Problem solving
Problem solvingProblem solving
Problem solving
ho94949
 
Kubernetes for Beginners: An Introductory Guide
Kubernetes for Beginners: An Introductory GuideKubernetes for Beginners: An Introductory Guide
Kubernetes for Beginners: An Introductory Guide
Bytemark
 
Documenting your REST API with Swagger - JOIN 2014
Documenting your REST API with Swagger - JOIN 2014Documenting your REST API with Swagger - JOIN 2014
Documenting your REST API with Swagger - JOIN 2014
JWORKS powered by Ordina
 
React Interview Questions and Answers | React Tutorial | React Redux Online T...
React Interview Questions and Answers | React Tutorial | React Redux Online T...React Interview Questions and Answers | React Tutorial | React Redux Online T...
React Interview Questions and Answers | React Tutorial | React Redux Online T...
Edureka!
 
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
Tariqul islam
 
reactJS
reactJSreactJS
reactJS
Syam Santhosh
 
Docker Introduction
Docker IntroductionDocker Introduction
Docker Introduction
Jeffrey Ellin
 
Dockerfile
Dockerfile Dockerfile
Dockerfile
Jeffrey Ellin
 
Clean Architecture
Clean ArchitectureClean Architecture
Clean Architecture
Badoo
 
React js use contexts and useContext hook
React js use contexts and useContext hookReact js use contexts and useContext hook
React js use contexts and useContext hook
Piyush Jamwal
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
洪 鹏发
 
React js - The Core Concepts
React js - The Core ConceptsReact js - The Core Concepts
React js - The Core Concepts
Divyang Bhambhani
 
Dockers and containers basics
Dockers and containers basicsDockers and containers basics
Dockers and containers basics
Sourabh Saxena
 
React JS: A Secret Preview
React JS: A Secret PreviewReact JS: A Secret Preview
React JS: A Secret Preview
valuebound
 
Docker Registry V2
Docker Registry V2Docker Registry V2
Docker Registry V2
Docker, Inc.
 
NET MAUI for .NET 7 for iOS, Android app development
 NET MAUI for .NET 7 for iOS, Android app development  NET MAUI for .NET 7 for iOS, Android app development
NET MAUI for .NET 7 for iOS, Android app development
Shotaro Suzuki
 
Docker Swarm for Beginner
Docker Swarm for BeginnerDocker Swarm for Beginner
Docker Swarm for Beginner
Shahzad Masud
 
Problem solving
Problem solvingProblem solving
Problem solving
ho94949
 
Kubernetes for Beginners: An Introductory Guide
Kubernetes for Beginners: An Introductory GuideKubernetes for Beginners: An Introductory Guide
Kubernetes for Beginners: An Introductory Guide
Bytemark
 
Documenting your REST API with Swagger - JOIN 2014
Documenting your REST API with Swagger - JOIN 2014Documenting your REST API with Swagger - JOIN 2014
Documenting your REST API with Swagger - JOIN 2014
JWORKS powered by Ordina
 
React Interview Questions and Answers | React Tutorial | React Redux Online T...
React Interview Questions and Answers | React Tutorial | React Redux Online T...React Interview Questions and Answers | React Tutorial | React Redux Online T...
React Interview Questions and Answers | React Tutorial | React Redux Online T...
Edureka!
 
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
Tariqul islam
 
Clean Architecture
Clean ArchitectureClean Architecture
Clean Architecture
Badoo
 
React js use contexts and useContext hook
React js use contexts and useContext hookReact js use contexts and useContext hook
React js use contexts and useContext hook
Piyush Jamwal
 

Similar to What Is React | ReactJS Tutorial for Beginners | ReactJS Training | Edureka (20)

ReactJS Tutorial For Beginners | ReactJS Redux Training For Beginners | React...
ReactJS Tutorial For Beginners | ReactJS Redux Training For Beginners | React...ReactJS Tutorial For Beginners | ReactJS Redux Training For Beginners | React...
ReactJS Tutorial For Beginners | ReactJS Redux Training For Beginners | React...
Edureka!
 
Reactjs notes.pptx for web development- tutorial and theory
Reactjs  notes.pptx for web development- tutorial and theoryReactjs  notes.pptx for web development- tutorial and theory
Reactjs notes.pptx for web development- tutorial and theory
jobinThomas54
 
Tech Talk on ReactJS
Tech Talk on ReactJSTech Talk on ReactJS
Tech Talk on ReactJS
Atlogys Technical Consulting
 
REACTJS1.ppsx
REACTJS1.ppsxREACTJS1.ppsx
REACTJS1.ppsx
IshwarSingh501217
 
Introduction to ReactJS
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJS
Hoang Long
 
React_Complete.pptx
React_Complete.pptxReact_Complete.pptx
React_Complete.pptx
kamalakantas
 
What is ReactJS?
What is ReactJS?What is ReactJS?
What is ReactJS?
Albiorix Technology
 
Introduction to React JS.pptx
Introduction to React JS.pptxIntroduction to React JS.pptx
Introduction to React JS.pptx
SHAIKIRFAN715544
 
Introduction to ReactJS UI Web Dev .pptx
Introduction to ReactJS UI Web Dev .pptxIntroduction to ReactJS UI Web Dev .pptx
Introduction to ReactJS UI Web Dev .pptx
SHAIKIRFAN715544
 
Intro to react_v2
Intro to react_v2Intro to react_v2
Intro to react_v2
Feather Knee
 
Why should you use react js for web app development
Why should you use react js for web app developmentWhy should you use react js for web app development
Why should you use react js for web app development
ReactJS
 
Maximize Development Efficiency with ReactJS.pdf
Maximize Development Efficiency with ReactJS.pdfMaximize Development Efficiency with ReactJS.pdf
Maximize Development Efficiency with ReactJS.pdf
BOSC Tech Labs
 
ReactJS - Re-rendering pages in the age of the mutable DOM
ReactJS - Re-rendering pages in the age of the mutable DOMReactJS - Re-rendering pages in the age of the mutable DOM
ReactJS - Re-rendering pages in the age of the mutable DOM
Marc Cyr
 
ReactJS Code Impact
ReactJS Code ImpactReactJS Code Impact
ReactJS Code Impact
Raymond McDermott
 
The Benefits of Using React JS for Web Development!
The Benefits of Using React JS for Web Development!The Benefits of Using React JS for Web Development!
The Benefits of Using React JS for Web Development!
Baharika Sopori
 
Review on React JS
Review on React JSReview on React JS
Review on React JS
ijtsrd
 
React JS Interview Questions PDF By ScholarHat
React JS Interview Questions PDF By ScholarHatReact JS Interview Questions PDF By ScholarHat
React JS Interview Questions PDF By ScholarHat
Scholarhat
 
React js Rahil Memon
React js Rahil MemonReact js Rahil Memon
React js Rahil Memon
RahilMemon5
 
FRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JSFRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JS
IRJET Journal
 
React Tech Salon
React Tech SalonReact Tech Salon
React Tech Salon
Chenguang ZHANG
 
ReactJS Tutorial For Beginners | ReactJS Redux Training For Beginners | React...
ReactJS Tutorial For Beginners | ReactJS Redux Training For Beginners | React...ReactJS Tutorial For Beginners | ReactJS Redux Training For Beginners | React...
ReactJS Tutorial For Beginners | ReactJS Redux Training For Beginners | React...
Edureka!
 
Reactjs notes.pptx for web development- tutorial and theory
Reactjs  notes.pptx for web development- tutorial and theoryReactjs  notes.pptx for web development- tutorial and theory
Reactjs notes.pptx for web development- tutorial and theory
jobinThomas54
 
Introduction to ReactJS
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJS
Hoang Long
 
React_Complete.pptx
React_Complete.pptxReact_Complete.pptx
React_Complete.pptx
kamalakantas
 
Introduction to React JS.pptx
Introduction to React JS.pptxIntroduction to React JS.pptx
Introduction to React JS.pptx
SHAIKIRFAN715544
 
Introduction to ReactJS UI Web Dev .pptx
Introduction to ReactJS UI Web Dev .pptxIntroduction to ReactJS UI Web Dev .pptx
Introduction to ReactJS UI Web Dev .pptx
SHAIKIRFAN715544
 
Why should you use react js for web app development
Why should you use react js for web app developmentWhy should you use react js for web app development
Why should you use react js for web app development
ReactJS
 
Maximize Development Efficiency with ReactJS.pdf
Maximize Development Efficiency with ReactJS.pdfMaximize Development Efficiency with ReactJS.pdf
Maximize Development Efficiency with ReactJS.pdf
BOSC Tech Labs
 
ReactJS - Re-rendering pages in the age of the mutable DOM
ReactJS - Re-rendering pages in the age of the mutable DOMReactJS - Re-rendering pages in the age of the mutable DOM
ReactJS - Re-rendering pages in the age of the mutable DOM
Marc Cyr
 
The Benefits of Using React JS for Web Development!
The Benefits of Using React JS for Web Development!The Benefits of Using React JS for Web Development!
The Benefits of Using React JS for Web Development!
Baharika Sopori
 
Review on React JS
Review on React JSReview on React JS
Review on React JS
ijtsrd
 
React JS Interview Questions PDF By ScholarHat
React JS Interview Questions PDF By ScholarHatReact JS Interview Questions PDF By ScholarHat
React JS Interview Questions PDF By ScholarHat
Scholarhat
 
React js Rahil Memon
React js Rahil MemonReact js Rahil Memon
React js Rahil Memon
RahilMemon5
 
FRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JSFRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JS
IRJET Journal
 
Ad

More from Edureka! (20)

What to learn during the 21 days Lockdown | Edureka
What to learn during the 21 days Lockdown | EdurekaWhat to learn during the 21 days Lockdown | Edureka
What to learn during the 21 days Lockdown | Edureka
Edureka!
 
Top 10 Dying Programming Languages in 2020 | Edureka
Top 10 Dying Programming Languages in 2020 | EdurekaTop 10 Dying Programming Languages in 2020 | Edureka
Top 10 Dying Programming Languages in 2020 | Edureka
Edureka!
 
Top 5 Trending Business Intelligence Tools | Edureka
Top 5 Trending Business Intelligence Tools | EdurekaTop 5 Trending Business Intelligence Tools | Edureka
Top 5 Trending Business Intelligence Tools | Edureka
Edureka!
 
Tableau Tutorial for Data Science | Edureka
Tableau Tutorial for Data Science | EdurekaTableau Tutorial for Data Science | Edureka
Tableau Tutorial for Data Science | Edureka
Edureka!
 
Python Programming Tutorial | Edureka
Python Programming Tutorial | EdurekaPython Programming Tutorial | Edureka
Python Programming Tutorial | Edureka
Edureka!
 
Top 5 PMP Certifications | Edureka
Top 5 PMP Certifications | EdurekaTop 5 PMP Certifications | Edureka
Top 5 PMP Certifications | Edureka
Edureka!
 
Top Maven Interview Questions in 2020 | Edureka
Top Maven Interview Questions in 2020 | EdurekaTop Maven Interview Questions in 2020 | Edureka
Top Maven Interview Questions in 2020 | Edureka
Edureka!
 
Linux Mint Tutorial | Edureka
Linux Mint Tutorial | EdurekaLinux Mint Tutorial | Edureka
Linux Mint Tutorial | Edureka
Edureka!
 
How to Deploy Java Web App in AWS| Edureka
How to Deploy Java Web App in AWS| EdurekaHow to Deploy Java Web App in AWS| Edureka
How to Deploy Java Web App in AWS| Edureka
Edureka!
 
Importance of Digital Marketing | Edureka
Importance of Digital Marketing | EdurekaImportance of Digital Marketing | Edureka
Importance of Digital Marketing | Edureka
Edureka!
 
RPA in 2020 | Edureka
RPA in 2020 | EdurekaRPA in 2020 | Edureka
RPA in 2020 | Edureka
Edureka!
 
Email Notifications in Jenkins | Edureka
Email Notifications in Jenkins | EdurekaEmail Notifications in Jenkins | Edureka
Email Notifications in Jenkins | Edureka
Edureka!
 
EA Algorithm in Machine Learning | Edureka
EA Algorithm in Machine Learning | EdurekaEA Algorithm in Machine Learning | Edureka
EA Algorithm in Machine Learning | Edureka
Edureka!
 
Cognitive AI Tutorial | Edureka
Cognitive AI Tutorial | EdurekaCognitive AI Tutorial | Edureka
Cognitive AI Tutorial | Edureka
Edureka!
 
AWS Cloud Practitioner Tutorial | Edureka
AWS Cloud Practitioner Tutorial | EdurekaAWS Cloud Practitioner Tutorial | Edureka
AWS Cloud Practitioner Tutorial | Edureka
Edureka!
 
Blue Prism Top Interview Questions | Edureka
Blue Prism Top Interview Questions | EdurekaBlue Prism Top Interview Questions | Edureka
Blue Prism Top Interview Questions | Edureka
Edureka!
 
Big Data on AWS Tutorial | Edureka
Big Data on AWS Tutorial | Edureka Big Data on AWS Tutorial | Edureka
Big Data on AWS Tutorial | Edureka
Edureka!
 
A star algorithm | A* Algorithm in Artificial Intelligence | Edureka
A star algorithm | A* Algorithm in Artificial Intelligence | EdurekaA star algorithm | A* Algorithm in Artificial Intelligence | Edureka
A star algorithm | A* Algorithm in Artificial Intelligence | Edureka
Edureka!
 
Kubernetes Installation on Ubuntu | Edureka
Kubernetes Installation on Ubuntu | EdurekaKubernetes Installation on Ubuntu | Edureka
Kubernetes Installation on Ubuntu | Edureka
Edureka!
 
Introduction to DevOps | Edureka
Introduction to DevOps | EdurekaIntroduction to DevOps | Edureka
Introduction to DevOps | Edureka
Edureka!
 
What to learn during the 21 days Lockdown | Edureka
What to learn during the 21 days Lockdown | EdurekaWhat to learn during the 21 days Lockdown | Edureka
What to learn during the 21 days Lockdown | Edureka
Edureka!
 
Top 10 Dying Programming Languages in 2020 | Edureka
Top 10 Dying Programming Languages in 2020 | EdurekaTop 10 Dying Programming Languages in 2020 | Edureka
Top 10 Dying Programming Languages in 2020 | Edureka
Edureka!
 
Top 5 Trending Business Intelligence Tools | Edureka
Top 5 Trending Business Intelligence Tools | EdurekaTop 5 Trending Business Intelligence Tools | Edureka
Top 5 Trending Business Intelligence Tools | Edureka
Edureka!
 
Tableau Tutorial for Data Science | Edureka
Tableau Tutorial for Data Science | EdurekaTableau Tutorial for Data Science | Edureka
Tableau Tutorial for Data Science | Edureka
Edureka!
 
Python Programming Tutorial | Edureka
Python Programming Tutorial | EdurekaPython Programming Tutorial | Edureka
Python Programming Tutorial | Edureka
Edureka!
 
Top 5 PMP Certifications | Edureka
Top 5 PMP Certifications | EdurekaTop 5 PMP Certifications | Edureka
Top 5 PMP Certifications | Edureka
Edureka!
 
Top Maven Interview Questions in 2020 | Edureka
Top Maven Interview Questions in 2020 | EdurekaTop Maven Interview Questions in 2020 | Edureka
Top Maven Interview Questions in 2020 | Edureka
Edureka!
 
Linux Mint Tutorial | Edureka
Linux Mint Tutorial | EdurekaLinux Mint Tutorial | Edureka
Linux Mint Tutorial | Edureka
Edureka!
 
How to Deploy Java Web App in AWS| Edureka
How to Deploy Java Web App in AWS| EdurekaHow to Deploy Java Web App in AWS| Edureka
How to Deploy Java Web App in AWS| Edureka
Edureka!
 
Importance of Digital Marketing | Edureka
Importance of Digital Marketing | EdurekaImportance of Digital Marketing | Edureka
Importance of Digital Marketing | Edureka
Edureka!
 
RPA in 2020 | Edureka
RPA in 2020 | EdurekaRPA in 2020 | Edureka
RPA in 2020 | Edureka
Edureka!
 
Email Notifications in Jenkins | Edureka
Email Notifications in Jenkins | EdurekaEmail Notifications in Jenkins | Edureka
Email Notifications in Jenkins | Edureka
Edureka!
 
EA Algorithm in Machine Learning | Edureka
EA Algorithm in Machine Learning | EdurekaEA Algorithm in Machine Learning | Edureka
EA Algorithm in Machine Learning | Edureka
Edureka!
 
Cognitive AI Tutorial | Edureka
Cognitive AI Tutorial | EdurekaCognitive AI Tutorial | Edureka
Cognitive AI Tutorial | Edureka
Edureka!
 
AWS Cloud Practitioner Tutorial | Edureka
AWS Cloud Practitioner Tutorial | EdurekaAWS Cloud Practitioner Tutorial | Edureka
AWS Cloud Practitioner Tutorial | Edureka
Edureka!
 
Blue Prism Top Interview Questions | Edureka
Blue Prism Top Interview Questions | EdurekaBlue Prism Top Interview Questions | Edureka
Blue Prism Top Interview Questions | Edureka
Edureka!
 
Big Data on AWS Tutorial | Edureka
Big Data on AWS Tutorial | Edureka Big Data on AWS Tutorial | Edureka
Big Data on AWS Tutorial | Edureka
Edureka!
 
A star algorithm | A* Algorithm in Artificial Intelligence | Edureka
A star algorithm | A* Algorithm in Artificial Intelligence | EdurekaA star algorithm | A* Algorithm in Artificial Intelligence | Edureka
A star algorithm | A* Algorithm in Artificial Intelligence | Edureka
Edureka!
 
Kubernetes Installation on Ubuntu | Edureka
Kubernetes Installation on Ubuntu | EdurekaKubernetes Installation on Ubuntu | Edureka
Kubernetes Installation on Ubuntu | Edureka
Edureka!
 
Introduction to DevOps | Edureka
Introduction to DevOps | EdurekaIntroduction to DevOps | Edureka
Introduction to DevOps | Edureka
Edureka!
 
Ad

Recently uploaded (20)

Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training RoadblocksDown the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training Roadblocks
Rustici Software
 
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Shashikant Jagtap
 
Viral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Viral>Wondershare Filmora 14.5.18.12900 Crack Free DownloadViral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Viral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Puppy jhon
 
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
Edge AI and Vision Alliance
 
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdfHow Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
Rejig Digital
 
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data ResilienceFloods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Safe Software
 
Secure Access with Azure Active Directory
Secure Access with Azure Active DirectorySecure Access with Azure Active Directory
Secure Access with Azure Active Directory
VICTOR MAESTRE RAMIREZ
 
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und AnwendungsfälleDomino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
panagenda
 
Enabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FMEEnabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FME
Safe Software
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean accountYour startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
Oracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization ProgramOracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization Program
VICTOR MAESTRE RAMIREZ
 
Developing Schemas with FME and Excel - Peak of Data & AI 2025
Developing Schemas with FME and Excel - Peak of Data & AI 2025Developing Schemas with FME and Excel - Peak of Data & AI 2025
Developing Schemas with FME and Excel - Peak of Data & AI 2025
Safe Software
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Introduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUEIntroduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUE
Google Developer Group On Campus European Universities in Egypt
 
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely
 
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Impelsys Inc.
 
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
NTT DATA Technology & Innovation
 
Kubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too LateKubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too Late
Michael Furman
 
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven InfrastructureNo-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
Safe Software
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training RoadblocksDown the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training Roadblocks
Rustici Software
 
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Shashikant Jagtap
 
Viral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Viral>Wondershare Filmora 14.5.18.12900 Crack Free DownloadViral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Viral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Puppy jhon
 
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
Edge AI and Vision Alliance
 
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdfHow Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
Rejig Digital
 
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data ResilienceFloods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Safe Software
 
Secure Access with Azure Active Directory
Secure Access with Azure Active DirectorySecure Access with Azure Active Directory
Secure Access with Azure Active Directory
VICTOR MAESTRE RAMIREZ
 
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und AnwendungsfälleDomino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
panagenda
 
Enabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FMEEnabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FME
Safe Software
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean accountYour startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
Oracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization ProgramOracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization Program
VICTOR MAESTRE RAMIREZ
 
Developing Schemas with FME and Excel - Peak of Data & AI 2025
Developing Schemas with FME and Excel - Peak of Data & AI 2025Developing Schemas with FME and Excel - Peak of Data & AI 2025
Developing Schemas with FME and Excel - Peak of Data & AI 2025
Safe Software
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely
 
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Impelsys Inc.
 
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
NTT DATA Technology & Innovation
 
Kubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too LateKubernetes Security Act Now Before It’s Too Late
Kubernetes Security Act Now Before It’s Too Late
Michael Furman
 
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven InfrastructureNo-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
Safe Software
 

What Is React | ReactJS Tutorial for Beginners | ReactJS Training | Edureka

  • 1. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Agenda  What Is Artificial Intelligence ?  What Is Machine Learning ?  Limitations Of Machine Learning  Deep Learning To The Rescue  What Is Deep Learning ?  Deep Learning Applications
  • 2. Copyright © 2017, edureka and/or its affiliates. All rights reserved. ReactJS Applications5 Virtual DOM4 Why ReactJS?2 Agenda JavaScript1 What Is ReactJS?3
  • 3. Copyright © 2017, edureka and/or its affiliates. All rights reserved. JavaScript What is JavaScript?
  • 4. Copyright © 2017, edureka and/or its affiliates. All rights reserved. JavaScript ➢ Dynamic programming language ➢ It manipulates both the CSS styles and HTML attributes of a page ➢ It can also change the content and the way things look in a web page when a user interacts with it Hello World Hello World HTML HTML + CSS HTML + CSS + JS
  • 5. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Advantages of JavaScript Frameworks With well-structured prebuilt patterns and functions, the projects can be developed faster without much effort. Efficiency Security Cost
  • 6. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Advantages of JavaScript Frameworks Top JavaScript frameworks are generally supported by large communities where members and users act as testers thus providing firm security. Security CostEfficiency
  • 7. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Advantages of JavaScript Frameworks The ultimate price for web application is lower  as most frameworks are open sourced and free which help the programmers to build custom solutions faster. Cost Efficiency Security
  • 8. Copyright © 2017, edureka and/or its affiliates. All rights reserved. JavaScript Frameworks Vue.jsAngularJS ReactJS
  • 9. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Why ReactJS? Now, let’s find out why we need ReactJS.
  • 10. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Why ReactJS? Dispatcher Initial Data Real Time Data User Input Store View ➢ Explicit data binding ➢ Uses DOM ➢ Memory Wastage ➢ Slow Performance Other Frameworks
  • 11. Copyright © 2017, edureka and/or its affiliates. All rights reserved. DOM Manipulation DOM DOM DOM DOM DOM Manipulation was very expensive Browser Real DOM
  • 12. Copyright © 2017, edureka and/or its affiliates. All rights reserved. DOM Manipulation With ReactJS DOM With ReactJS, whenever there is a change in the state it will automatically handle the visual changes via Virtual DOM Browser Virtual DOM Real DOM
  • 13. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What Is ReactJS? Let’s now see what is ReactJS.
  • 14. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What Is ReactJS? Frontend JavaScript library developed by facebook which is used to develop interactive, web as well as mobile UI’s. JavaScript HTML ReactJS Template syntax like HTML, but provides full power of JavaScript.
  • 15. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What Is ReactJS? Virtual DOM Real DOM Virtual DOM One Way Binding Server-side Rendering
  • 16. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What Is ReactJS? Action Dispatcher Store View Action Virtual DOM One Way Binding Server-side Rendering
  • 17. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What Is ReactJS? Virtual DOM One Way Binding Server-side Rendering
  • 18. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Virtual DOM Let’s now see what is Virtual DOM in ReactJS.
  • 19. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Virtual DOM Model gives data to View which in turn creates a DOM for it Model View User:max Id:101 Loc: USA User:max Id:101 Loc: USA DOM
  • 20. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Virtual DOM Model View User: Alen Id:101 Loc: USA User:Alen Id:101 Loc: USA User:max Id:101 Loc: USA DOM Now each time data was updated by the Model, View had to create a new DOM for it
  • 21. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Virtual DOM Model View User: Alen Id:101 Loc: UK User:Alen Id:101 Loc: UK User:Alen Id:101 Loc: USA User:max Id:101 Loc: USA DOM This puts heavy load on View and makes our processing slower
  • 22. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Virtual DOM With ReactJS, when Model gives data to View if the DOM is empty, React will create a DOM for it Model View User:max Id:101 Loc: USA Real DOM User:Max Id:101 Loc: USA
  • 23. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Virtual DOM Now whenever the data updates, React will create a virtual DOM for it and compare the current DOM with the previous one Model View User:Alen Id:101 Loc: USA User:Alen Id:101 Loc: USA Real DOMVirtual DOM User:Max Id:101 Loc: USA
  • 24. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Virtual DOM Once the changes are calculated, it will update the Real DOM with only the elements that have actually changed Model View User:Alen Id:101 Loc: USA User:Alen Id:101 Loc: USA Real DOM
  • 25. Copyright © 2017, edureka and/or its affiliates. All rights reserved. ReactJS Applications Where is ReactJS used?
  • 26. Copyright © 2017, edureka and/or its affiliates. All rights reserved. ReactJS Applications
  • 27. Copyright © 2017, edureka and/or its affiliates. All rights reserved.