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

PDF
What is React programming used for_ .pdf
DOCX
Skill practical javascript diy projects
PPTX
React js
PPTX
reacts js with basic details Detailed_ReactJS_Presentation.pptx
PDF
Introduction to React JS
PDF
FRONTEND DEVELOPMENT WITH REACT.JS
PPTX
React_Complete.pptx
PDF
React in Action ( PDFDrive ).pdf
What is React programming used for_ .pdf
Skill practical javascript diy projects
React js
reacts js with basic details Detailed_ReactJS_Presentation.pptx
Introduction to React JS
FRONTEND DEVELOPMENT WITH REACT.JS
React_Complete.pptx
React in Action ( PDFDrive ).pdf

Similar to React ppt (20)

PPSX
REACTJS1.ppsx
PDF
Basic React Knowledge.
PDF
reactjs-vs-angularjs-which-is-the-best-framework-for-you.pdf
PDF
Review on React JS
PPTX
What is ReactJS?
PPTX
Basic React Knowledge.
PDF
Why is React Development so in demand.pdf
PPTX
Software Development: Mastering React.js and JavaScript.pptx
PPTX
intro to react| React: dynamic UIs, component-based, virtual DOM, JSX, effici...
PDF
React Js Simplified
PPTX
React JS - A quick introduction tutorial
PPTX
INTRODUCTION TO REACT JAVASCRIPT FOR BEGINNERS.pptx
PPTX
Reactjs notes.pptx for web development- tutorial and theory
PDF
Tech Talk on ReactJS
PDF
Top Reasons to Use ReactJS for Web Development
PDF
learning react
PDF
How Can the Hermes Engine Help React Native Apps.docx.pdf
PPTX
PPTX
Mastering React: Building Modern and Interactive User Interfaces
PDF
Why Use React Js A Complete Guide (1).pdf
REACTJS1.ppsx
Basic React Knowledge.
reactjs-vs-angularjs-which-is-the-best-framework-for-you.pdf
Review on React JS
What is ReactJS?
Basic React Knowledge.
Why is React Development so in demand.pdf
Software Development: Mastering React.js and JavaScript.pptx
intro to react| React: dynamic UIs, component-based, virtual DOM, JSX, effici...
React Js Simplified
React JS - A quick introduction tutorial
INTRODUCTION TO REACT JAVASCRIPT FOR BEGINNERS.pptx
Reactjs notes.pptx for web development- tutorial and theory
Tech Talk on ReactJS
Top Reasons to Use ReactJS for Web Development
learning react
How Can the Hermes Engine Help React Native Apps.docx.pdf
Mastering React: Building Modern and Interactive User Interfaces
Why Use React Js A Complete Guide (1).pdf
Ad

Recently uploaded (20)

PDF
O7-L3 Supply Chain Operations - ICLT Program
PDF
Business Ethics Teaching Materials for college
PDF
Complications of Minimal Access Surgery at WLH
PDF
FourierSeries-QuestionsWithAnswers(Part-A).pdf
PPTX
Microbial diseases, their pathogenesis and prophylaxis
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
Abdominal Access Techniques with Prof. Dr. R K Mishra
PDF
Classroom Observation Tools for Teachers
PDF
2.FourierTransform-ShortQuestionswithAnswers.pdf
PPTX
human mycosis Human fungal infections are called human mycosis..pptx
PDF
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
PPTX
PPH.pptx obstetrics and gynecology in nursing
PPTX
Pharma ospi slides which help in ospi learning
PDF
Insiders guide to clinical Medicine.pdf
PPTX
BOWEL ELIMINATION FACTORS AFFECTING AND TYPES
PDF
RMMM.pdf make it easy to upload and study
PPTX
The Healthy Child – Unit II | Child Health Nursing I | B.Sc Nursing 5th Semester
PDF
Origin of periodic table-Mendeleev’s Periodic-Modern Periodic table
PPTX
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
PDF
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
O7-L3 Supply Chain Operations - ICLT Program
Business Ethics Teaching Materials for college
Complications of Minimal Access Surgery at WLH
FourierSeries-QuestionsWithAnswers(Part-A).pdf
Microbial diseases, their pathogenesis and prophylaxis
BÀI TẬP BỔ TRỢ 4 KỸ NĂNG TIẾNG ANH 9 GLOBAL SUCCESS - CẢ NĂM - BÁM SÁT FORM Đ...
Abdominal Access Techniques with Prof. Dr. R K Mishra
Classroom Observation Tools for Teachers
2.FourierTransform-ShortQuestionswithAnswers.pdf
human mycosis Human fungal infections are called human mycosis..pptx
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
PPH.pptx obstetrics and gynecology in nursing
Pharma ospi slides which help in ospi learning
Insiders guide to clinical Medicine.pdf
BOWEL ELIMINATION FACTORS AFFECTING AND TYPES
RMMM.pdf make it easy to upload and study
The Healthy Child – Unit II | Child Health Nursing I | B.Sc Nursing 5th Semester
Origin of periodic table-Mendeleev’s Periodic-Modern Periodic table
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
Saundersa Comprehensive Review for the NCLEX-RN Examination.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