SlideShare a Scribd company logo
Group Members
Tambir Azrab 18-Arid-594
Muhammad Sohaib 18-Arid-570
REACT JS
INTRODUCTION
WHAT IS REACT?
• A JavaScript Library For Building User Interfaces.
• Renders your UI and response to events.
• It also uses the concept called Virtual DOM, creates an in-memory data structure cache, enumerates the
resulting differences, and then updates the browser’s displayed DOM efficiently.
• One of the unique features of React.js is not only it can perform on the client side, but it can also be rendered
on the server side, and they can work together interoperable.
02 03
What is REACT? Virtual DOM
Manipulate DOM is high cost
React first assembles the entire structure of your app
in-memory, using those objects. Then, it converts that
structure into actual DOM nodes and inserts them in
your browser’s DOM.
What is REACT? Virtual DOM
<script>
var helloEl = React.createElement (
'div',
{ className: 'hello' },
'Hello, world!‘
);
React.render(helloEl, document.body);
</script>
JSX
JSX = Javascript + XML
const element = <h1> Hello, world! </h1>
Reactjs Introduction - Virtual DOM
COMPONENT
• Components let you split the UI into independent, reusable pieces, and think about each piece
in isolation.
• Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called
"props") and return React elements describing what should appear on the screen.
Reactjs Introduction - Virtual DOM
THE GOOD POINTS: THE BAD:
PROS & COS OF REACT.JS
• It makes writing JavaScript easier
- React.js uses a special syntax called JSX.
• There is a learning curve for
beginners who are new to
web development.
• React.js is only a view layer.
• React.js is extremely efficient. - Virtual DOM
• Componentized UI is the future of web development, and you need to start doing it now.
• Flexible – Develop static sites, SSR, Desktop applications..
• Owned by Facebook, big community.
Why you should use React.js
• Fast performance. React for small and large projects works very quickly
thanks to the Virtual DOM it uses.
Why you should NOT use React.js
TEAMS!

More Related Content

PPTX
Web Performance & Latest in React
Talentica Software
 
PDF
The complete-beginners-guide-to-react dyrr
AfreenK
 
PPTX
React js Demo Explanation
Rama Krishna Vankam
 
PDF
The curious Life of JavaScript - Talk at SI-SE 2015
jbandi
 
PDF
Node, express & sails
Brian Shannon
 
PPTX
React js Online Training
Learntek1
 
PDF
Real World AngularJS recipes: beyond TodoMVC
Carlo Bonamico
 
PDF
Overview of React.JS - Internship Presentation - Week 5
Devang Garach
 
Web Performance & Latest in React
Talentica Software
 
The complete-beginners-guide-to-react dyrr
AfreenK
 
React js Demo Explanation
Rama Krishna Vankam
 
The curious Life of JavaScript - Talk at SI-SE 2015
jbandi
 
Node, express & sails
Brian Shannon
 
React js Online Training
Learntek1
 
Real World AngularJS recipes: beyond TodoMVC
Carlo Bonamico
 
Overview of React.JS - Internship Presentation - Week 5
Devang Garach
 

What's hot (20)

PDF
Design & Development of Web Applications using SpringMVC
Naresh Chintalcheru
 
PDF
Create Restful Web Application With Node.js Express Framework
Edureka!
 
PPTX
Building Reliable Applications Using React, .NET & Azure
Maurice De Beijer [MVP]
 
PPTX
React js, node js &amp; angular js which one is the best for web development
Concetto Labs
 
PPTX
React workshop presentation
Bojan Golubović
 
PPT
Node.js an introduction
Meraj Khattak
 
PDF
From MEAN to the MERN Stack
Troy Miles
 
PDF
Angular 1.x reloaded: improve your app now! and get ready for 2.0
Carlo Bonamico
 
PPT
8 Most Effective Node.js Tools for Developers
iMOBDEV Technologies Pvt. Ltd.
 
PPTX
Reactjs workshop
Ahmed rebai
 
PPTX
learn what React JS is & why we should use React JS .
paradisetechsoftsolutions
 
PDF
learn what React JS is & why we should use React JS .
paradisetechsoftsolutions
 
PPTX
React Vs AnagularJS
deepakpatil84
 
PPTX
Developing dynamic ui using react
sushmita bhor
 
PDF
Introduction to React JS
Bethmi Gunasekara
 
PPTX
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JSFestUA
 
PDF
Node.js with Express
Gergely Németh
 
PPTX
Node js Chapter-2
Talentica Software
 
PDF
Muhammad azamuddin introduction-to-reactjs
PHP Indonesia
 
PPTX
Vuejs getting-started - Extended Version
Murat Doğan
 
Design & Development of Web Applications using SpringMVC
Naresh Chintalcheru
 
Create Restful Web Application With Node.js Express Framework
Edureka!
 
Building Reliable Applications Using React, .NET & Azure
Maurice De Beijer [MVP]
 
React js, node js &amp; angular js which one is the best for web development
Concetto Labs
 
React workshop presentation
Bojan Golubović
 
Node.js an introduction
Meraj Khattak
 
From MEAN to the MERN Stack
Troy Miles
 
Angular 1.x reloaded: improve your app now! and get ready for 2.0
Carlo Bonamico
 
8 Most Effective Node.js Tools for Developers
iMOBDEV Technologies Pvt. Ltd.
 
Reactjs workshop
Ahmed rebai
 
learn what React JS is & why we should use React JS .
paradisetechsoftsolutions
 
learn what React JS is & why we should use React JS .
paradisetechsoftsolutions
 
React Vs AnagularJS
deepakpatil84
 
Developing dynamic ui using react
sushmita bhor
 
Introduction to React JS
Bethmi Gunasekara
 
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JSFestUA
 
Node.js with Express
Gergely Németh
 
Node js Chapter-2
Talentica Software
 
Muhammad azamuddin introduction-to-reactjs
PHP Indonesia
 
Vuejs getting-started - Extended Version
Murat Doğan
 
Ad

Similar to Reactjs Introduction - Virtual DOM (20)

PPSX
REACTJS1.ppsx
IshwarSingh501217
 
PPTX
Reactjs notes.pptx for web development- tutorial and theory
jobinThomas54
 
PPTX
Introduction to ReactJS UI Web Dev .pptx
SHAIKIRFAN715544
 
PPTX
Introduction to React JS.pptx
SHAIKIRFAN715544
 
PPTX
React js
Nikhil Karkra
 
PDF
Introduction Web Development using ReactJS
ssuser8a1f37
 
PPTX
ReactJS presentation.pptx
DivyanshGupta922023
 
PDF
Review on React JS
ijtsrd
 
PPTX
React js - The Core Concepts
Divyang Bhambhani
 
PDF
Tech Talk on ReactJS
Atlogys Technical Consulting
 
PDF
Basic React Knowledge.
jacobryne
 
PPTX
Basic React Knowledge.
jacobryne
 
PPTX
React
manii kanta
 
PPTX
Intro to React.js
Smita Prasad
 
PPTX
[Final] ReactJS presentation
洪 鹏发
 
PDF
What is React programming used for_ .pdf
ayushinwizards
 
PPTX
reacts js with basic details Detailed_ReactJS_Presentation.pptx
harshajajam22
 
PPTX
React_Complete.pptx
kamalakantas
 
PDF
React Introduction
Quang Bửu Lê
 
PDF
React DOM/Virtual DOM
RajasreePothula3
 
REACTJS1.ppsx
IshwarSingh501217
 
Reactjs notes.pptx for web development- tutorial and theory
jobinThomas54
 
Introduction to ReactJS UI Web Dev .pptx
SHAIKIRFAN715544
 
Introduction to React JS.pptx
SHAIKIRFAN715544
 
React js
Nikhil Karkra
 
Introduction Web Development using ReactJS
ssuser8a1f37
 
ReactJS presentation.pptx
DivyanshGupta922023
 
Review on React JS
ijtsrd
 
React js - The Core Concepts
Divyang Bhambhani
 
Tech Talk on ReactJS
Atlogys Technical Consulting
 
Basic React Knowledge.
jacobryne
 
Basic React Knowledge.
jacobryne
 
Intro to React.js
Smita Prasad
 
[Final] ReactJS presentation
洪 鹏发
 
What is React programming used for_ .pdf
ayushinwizards
 
reacts js with basic details Detailed_ReactJS_Presentation.pptx
harshajajam22
 
React_Complete.pptx
kamalakantas
 
React Introduction
Quang Bửu Lê
 
React DOM/Virtual DOM
RajasreePothula3
 
Ad

Recently uploaded (20)

PDF
Using Anchore and DefectDojo to Stand Up Your DevSecOps Function
Anchore
 
PDF
SparkLabs Primer on Artificial Intelligence 2025
SparkLabs Group
 
PDF
Presentation about Hardware and Software in Computer
snehamodhawadiya
 
PDF
The Evolution of KM Roles (Presented at Knowledge Summit Dublin 2025)
Enterprise Knowledge
 
PPTX
Stamford - Community User Group Leaders_ Agentblazer Status, AI Sustainabilit...
Amol Dixit
 
PPT
Coupa-Kickoff-Meeting-Template presentai
annapureddyn
 
PPTX
OA presentation.pptx OA presentation.pptx
pateldhruv002338
 
PDF
Building High-Performance Oracle Teams: Strategic Staffing for Database Manag...
SMACT Works
 
PDF
NewMind AI Weekly Chronicles - July'25 - Week IV
NewMind AI
 
PDF
Cloud-Migration-Best-Practices-A-Practical-Guide-to-AWS-Azure-and-Google-Clou...
Artjoker Software Development Company
 
PPTX
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
PDF
Why Your AI & Cybersecurity Hiring Still Misses the Mark in 2025
Virtual Employee Pvt. Ltd.
 
PPT
L2 Rules of Netiquette in Empowerment technology
Archibal2
 
PDF
REPORT: Heating appliances market in Poland 2024
SPIUG
 
PDF
Accelerating Oracle Database 23ai Troubleshooting with Oracle AHF Fleet Insig...
Sandesh Rao
 
PDF
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
PDF
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
PDF
Revolutionize Operations with Intelligent IoT Monitoring and Control
Rejig Digital
 
PPTX
cloud computing vai.pptx for the project
vaibhavdobariyal79
 
PPTX
Comunidade Salesforce São Paulo - Desmistificando o Omnistudio (Vlocity)
Francisco Vieira Júnior
 
Using Anchore and DefectDojo to Stand Up Your DevSecOps Function
Anchore
 
SparkLabs Primer on Artificial Intelligence 2025
SparkLabs Group
 
Presentation about Hardware and Software in Computer
snehamodhawadiya
 
The Evolution of KM Roles (Presented at Knowledge Summit Dublin 2025)
Enterprise Knowledge
 
Stamford - Community User Group Leaders_ Agentblazer Status, AI Sustainabilit...
Amol Dixit
 
Coupa-Kickoff-Meeting-Template presentai
annapureddyn
 
OA presentation.pptx OA presentation.pptx
pateldhruv002338
 
Building High-Performance Oracle Teams: Strategic Staffing for Database Manag...
SMACT Works
 
NewMind AI Weekly Chronicles - July'25 - Week IV
NewMind AI
 
Cloud-Migration-Best-Practices-A-Practical-Guide-to-AWS-Azure-and-Google-Clou...
Artjoker Software Development Company
 
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
Why Your AI & Cybersecurity Hiring Still Misses the Mark in 2025
Virtual Employee Pvt. Ltd.
 
L2 Rules of Netiquette in Empowerment technology
Archibal2
 
REPORT: Heating appliances market in Poland 2024
SPIUG
 
Accelerating Oracle Database 23ai Troubleshooting with Oracle AHF Fleet Insig...
Sandesh Rao
 
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
Revolutionize Operations with Intelligent IoT Monitoring and Control
Rejig Digital
 
cloud computing vai.pptx for the project
vaibhavdobariyal79
 
Comunidade Salesforce São Paulo - Desmistificando o Omnistudio (Vlocity)
Francisco Vieira Júnior
 

Reactjs Introduction - Virtual DOM

  • 1. Group Members Tambir Azrab 18-Arid-594 Muhammad Sohaib 18-Arid-570
  • 3. WHAT IS REACT? • A JavaScript Library For Building User Interfaces. • Renders your UI and response to events. • It also uses the concept called Virtual DOM, creates an in-memory data structure cache, enumerates the resulting differences, and then updates the browser’s displayed DOM efficiently. • One of the unique features of React.js is not only it can perform on the client side, but it can also be rendered on the server side, and they can work together interoperable.
  • 5. What is REACT? Virtual DOM Manipulate DOM is high cost React first assembles the entire structure of your app in-memory, using those objects. Then, it converts that structure into actual DOM nodes and inserts them in your browser’s DOM.
  • 6. What is REACT? Virtual DOM <script> var helloEl = React.createElement ( 'div', { className: 'hello' }, 'Hello, world!‘ ); React.render(helloEl, document.body); </script>
  • 7. JSX JSX = Javascript + XML const element = <h1> Hello, world! </h1>
  • 9. COMPONENT • Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. • Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
  • 11. THE GOOD POINTS: THE BAD: PROS & COS OF REACT.JS • It makes writing JavaScript easier - React.js uses a special syntax called JSX. • There is a learning curve for beginners who are new to web development. • React.js is only a view layer. • React.js is extremely efficient. - Virtual DOM
  • 12. • Componentized UI is the future of web development, and you need to start doing it now. • Flexible – Develop static sites, SSR, Desktop applications.. • Owned by Facebook, big community. Why you should use React.js • Fast performance. React for small and large projects works very quickly thanks to the Virtual DOM it uses.
  • 13. Why you should NOT use React.js TEAMS!