SlideShare a Scribd company logo
2
Most read
3
Most read
5
Most read
Presented By:
Naresh T (22384117)
Msc. Computer Science
Pondicherry University
React is a JavaScript library for building User Interfaces.
It was created by Jordan Walke, a software engineer at Facebook, in
2011.
Officially open-sourced by Meta (formerly Facebook) in 2013.
It is used for creating reusable UI components.
Based on a component-based architecture
INTRODUCTION TO REACT
HOW DOES REACT WORK?
React operates by creating an in-memory Virtual DOM rather than directly
manipulating the browser’s DOM
It performs necessary manipulations within this virtual representation before applying
changes to the actual browser DOM.
React uses a Virtual DOM to optimize UI rendering. Instead of updating the entire real DOM directly.
React follows a component-based approach, where the UI is broken down into reusable components. These
components can be functional or class-based and these components manage data using props (for passing data)
and state (for internal dynamic data).
React uses JSX (JavaScript XML) a syntax extension that allows developers to write HTML inside JavaScript.
React uses One-Way Data Binding, meaning data flows in a single direction from parent components to child
components via props.
React Hooks allow functional components to use state and lifecycle features without needing class components.
React provides React Router for managing navigation in single-page applications (SPAs). It enables dynamic
routing without requiring full-page reloads.
FEATURES OF REACT
ADVANTAGES:
Component-based architecture (reusable code)
Virtual DOM for better performance
SEO-friendly with server-side rendering
Strong community support and ecosystem
Cross-platform development with React Native
DISADVANTAGES:
Fast-paced updates make it hard to keep up
Requires additional libraries for state management (Redux, Context API)
JSX syntax may be complex for beginners
Documentation can sometimes be inconsistent
REACT ENVIRONMENT SETUP
1. Install Node.js
 Verify installation: node --version
2. Create React App
 Run this Command in the Terminal:
npx create-react-app <<name>>
cd <<name>>
npm start
REACT.JS VS OTHER FRAMEWORKS
Feature React.js Angular Vue.js
Architecture Component-Based MVC Component-Based
Language JavaScript, JSX TypeScript JavaScript
Learning Curve Moderate Steep Easy
Performance High (Virtual DOM) Moderate High
TOP COMPANIES USING REACT
 React.js is widely used in modern web development.
 It provides a powerful and flexible way to build user interfaces.
 Understanding components, state, and hooks is essential for React development.
 Fundamental knowledge of HTML, CSS, and JavaScript is important before learning
React.js.
Learn Once, Write
CONCLUSION
THANK YOU!
Learn Once, Write

More Related Content

PPTX
React intro
PDF
What is React programming used for_ .pdf
PDF
React.js: Building Dynamic User Interfaces
PDF
Tech Talk on ReactJS
PDF
a-detailed-guide-everything-you-need-to-know-about-reactjs.pdf
PPTX
React-JS.pptx
PDF
All about React Js
PPTX
React JS - A quick introduction tutorial
React intro
What is React programming used for_ .pdf
React.js: Building Dynamic User Interfaces
Tech Talk on ReactJS
a-detailed-guide-everything-you-need-to-know-about-reactjs.pdf
React-JS.pptx
All about React Js
React JS - A quick introduction tutorial

Similar to React ppt (20)

PDF
React Js Simplified
PDF
React.js vs node.js
PDF
Mastering-Reactjs-Your-Path-to-Web-Development.pdf
PDF
React Interview Question & Answers PDF By ScholarHat
PDF
Angular vs React Choosing the Best Framework in 2025
PPTX
What is ReactJS?
PDF
ReactJS Development_ Everything You Need to Know.pdf
PPTX
React Native’s New Architecture Decoded: How to Migrate & Benefits?
PDF
learning react
DOCX
React JS Components & Its Importance.docx
DOCX
Skill practical javascript diy projects
PPTX
React js introduction about it's features
DOCX
React Components and Its Importance.docx
PDF
Review on React JS
PDF
Learning React js Learn React JS From Scratch with Hands On Projects 2nd Edit...
PDF
Introduction to React - Blockchain UNN.pdf
PDF
Introduction to React - Blockchain UNN.pdf
PDF
100 React Interview questions 2024.pptx.pdf
PDF
Top 10 Differences Between React and JavaScript: A Detailed Comparison
PDF
Maximize Development Efficiency with ReactJS.pdf
React Js Simplified
React.js vs node.js
Mastering-Reactjs-Your-Path-to-Web-Development.pdf
React Interview Question & Answers PDF By ScholarHat
Angular vs React Choosing the Best Framework in 2025
What is ReactJS?
ReactJS Development_ Everything You Need to Know.pdf
React Native’s New Architecture Decoded: How to Migrate & Benefits?
learning react
React JS Components & Its Importance.docx
Skill practical javascript diy projects
React js introduction about it's features
React Components and Its Importance.docx
Review on React JS
Learning React js Learn React JS From Scratch with Hands On Projects 2nd Edit...
Introduction to React - Blockchain UNN.pdf
Introduction to React - Blockchain UNN.pdf
100 React Interview questions 2024.pptx.pdf
Top 10 Differences Between React and JavaScript: A Detailed Comparison
Maximize Development Efficiency with ReactJS.pdf
Ad

Recently uploaded (20)

PDF
O7-L3 Supply Chain Operations - ICLT Program
PDF
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
PPTX
Pharmacology of Heart Failure /Pharmacotherapy of CHF
PPTX
Introduction and Scope of Bichemistry.pptx
PPTX
Open Quiz Monsoon Mind Game Prelims.pptx
PPTX
human mycosis Human fungal infections are called human mycosis..pptx
PDF
Open folder Downloads.pdf yes yes ges yes
PDF
Origin of periodic table-Mendeleev’s Periodic-Modern Periodic table
PPTX
Onica Farming 24rsclub profitable farm business
PDF
BÀI TẬP BỔ TRỢ 4 KỸ NĂNG TIẾNG ANH 9 GLOBAL SUCCESS - CẢ NĂM - BÁM SÁT FORM Đ...
PDF
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
PPTX
Cell Structure & Organelles in detailed.
PDF
Anesthesia in Laparoscopic Surgery in India
PPTX
Cardiovascular Pharmacology for pharmacy students.pptx
PDF
From loneliness to social connection charting
PDF
English Language Teaching from Post-.pdf
PPTX
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
PDF
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
PDF
O5-L3 Freight Transport Ops (International) V1.pdf
PDF
STATICS OF THE RIGID BODIES Hibbelers.pdf
O7-L3 Supply Chain Operations - ICLT Program
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
Pharmacology of Heart Failure /Pharmacotherapy of CHF
Introduction and Scope of Bichemistry.pptx
Open Quiz Monsoon Mind Game Prelims.pptx
human mycosis Human fungal infections are called human mycosis..pptx
Open folder Downloads.pdf yes yes ges yes
Origin of periodic table-Mendeleev’s Periodic-Modern Periodic table
Onica Farming 24rsclub profitable farm business
BÀI TẬP BỔ TRỢ 4 KỸ NĂNG TIẾNG ANH 9 GLOBAL SUCCESS - CẢ NĂM - BÁM SÁT FORM Đ...
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
Cell Structure & Organelles in detailed.
Anesthesia in Laparoscopic Surgery in India
Cardiovascular Pharmacology for pharmacy students.pptx
From loneliness to social connection charting
English Language Teaching from Post-.pdf
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
O5-L3 Freight Transport Ops (International) V1.pdf
STATICS OF THE RIGID BODIES Hibbelers.pdf
Ad

React ppt

  • 1. Presented By: Naresh T (22384117) Msc. Computer Science Pondicherry University
  • 2. React is a JavaScript library for building User Interfaces. It was created by Jordan Walke, a software engineer at Facebook, in 2011. Officially open-sourced by Meta (formerly Facebook) in 2013. It is used for creating reusable UI components. Based on a component-based architecture INTRODUCTION TO REACT
  • 3. HOW DOES REACT WORK? React operates by creating an in-memory Virtual DOM rather than directly manipulating the browser’s DOM It performs necessary manipulations within this virtual representation before applying changes to the actual browser DOM.
  • 4. React uses a Virtual DOM to optimize UI rendering. Instead of updating the entire real DOM directly. React follows a component-based approach, where the UI is broken down into reusable components. These components can be functional or class-based and these components manage data using props (for passing data) and state (for internal dynamic data). React uses JSX (JavaScript XML) a syntax extension that allows developers to write HTML inside JavaScript. React uses One-Way Data Binding, meaning data flows in a single direction from parent components to child components via props. React Hooks allow functional components to use state and lifecycle features without needing class components. React provides React Router for managing navigation in single-page applications (SPAs). It enables dynamic routing without requiring full-page reloads. FEATURES OF REACT
  • 5. ADVANTAGES: Component-based architecture (reusable code) Virtual DOM for better performance SEO-friendly with server-side rendering Strong community support and ecosystem Cross-platform development with React Native DISADVANTAGES: Fast-paced updates make it hard to keep up Requires additional libraries for state management (Redux, Context API) JSX syntax may be complex for beginners Documentation can sometimes be inconsistent
  • 6. REACT ENVIRONMENT SETUP 1. Install Node.js  Verify installation: node --version 2. Create React App  Run this Command in the Terminal: npx create-react-app <<name>> cd <<name>> npm start
  • 7. REACT.JS VS OTHER FRAMEWORKS Feature React.js Angular Vue.js Architecture Component-Based MVC Component-Based Language JavaScript, JSX TypeScript JavaScript Learning Curve Moderate Steep Easy Performance High (Virtual DOM) Moderate High
  • 9.  React.js is widely used in modern web development.  It provides a powerful and flexible way to build user interfaces.  Understanding components, state, and hooks is essential for React development.  Fundamental knowledge of HTML, CSS, and JavaScript is important before learning React.js. Learn Once, Write CONCLUSION