SlideShare a Scribd company logo
React/ReactJS/React.js
Module: 4: Fundamentals of React.js
Industry Trends for React/React.js
• React developers earn more money when compared to other web
development technologies.
• Average salary of React developer across the US is $91,000 per
annum.
• Average salary of React developer across in India is 7,25,000 per
annum.
• React is gaining popularity and being adopted by many countries.
• :
Companies using react:
React Pre-requisites
 One should be familiar with programing concepts like function,
arrays, Objects and classes.
 HTML
 CSS
 JavaScript
 Understanding of ES6 (ES6 stands for ECMAScript 6. ECMAScript was
created to standardize JavaScript, and ES6 is the 6th version of
ECMAScript )
React/React.js/ReactJS
- React (also known as React.js or ReactJS) is a free open source java script library for
building fast an interactive front end UI interfaces for web and mobile applications.
- It is used for building user interfaces specifically for single-page applications which
means complete website in single page
- In MVC architecture, react is the view which defines how the app looks and feels like.
- It’s used for handling the view layer for web and mobile apps. React also allows us to
create reusable UI components.
- React is a User Interface (UI) library
- React can be used to develop both web and mobile interfaces.
- It was developed in facebook now meta in 2011.
- React was developed by “Jordon Walke” an engineer in facebook.
- React first deployed on Facebook’s newsfeed in 2011 and on
Instagram.com in 2012
• React allows developers to create large web applications that can change
data, without reloading the page.
• The main purpose of React is to be fast, scalable, and simple.
• It works only on user interfaces in the application.
•
To conclude : we can say…..
 React is a declarative, efficient, and flexible JavaScript library for building
user interfaces. It lets you compose complex UIs from small and isolated
pieces of code called “components”. React has a few different kinds of
components.
Why React is so popular
• Easy creation of dynamic web site.
• Performance enhancement
• Reusable components
• Unidirectional Data flow
• Can be used for mobile apps
• Dedicated tools for debugging
React Compiler: Babel
• Babel is a JavaScript compiler that can translate markup or programming
languages into JavaScript.
• With Babel, you can use the newest features of JavaScript (ES6 -
ECMAScript 2015).
• Babel is available for different conversions. React uses Babel to convert
JSX into JavaScript.
• Please note that <script type="text/babel"> is needed for using Babel.
Reactjs  notes.pptx for web development- tutorial and theory
React Features:
• Currently, ReactJS gaining quick
popularity as the best JavaScript
framework among web developers.
It is playing an essential role in the
front-end ecosystem. The
important features of ReactJS are
as following.
• JSX
• Components
• One-way Data Binding
• Virtual DOM
• Simplicity
• Performance
Features of React : JSX
• JSX stands for JavaScript XML. It is a JavaScript syntax extension. Its an
XML or HTML like syntax used by ReactJS.
• In React, instead of using regular JavaScript for templating, it uses JSX.
• JSX is a simple JavaScript that allows HTML quoting and uses these
HTML tag syntax to render subcomponents.
• HTML syntax is processed into JavaScript calls of React Framework.
• We can also write in pure old JavaScript.
Reactjs  notes.pptx for web development- tutorial and theory
React Components
• ReactJS is all about components. ReactJS application is made up of
multiple components, and each component has its own logic and
controls. These components can be reusable which help you to
maintain the code when working on larger scale projects.
Reactjs  notes.pptx for web development- tutorial and theory
React Components
In ReactJS, a component is a reusable and independent piece of code that
defines a part of a user interface. It can be thought of as a building block
for constructing a larger application.
There are two main types of components in ReactJS:
• Function Components: These are simple and stateless components that
take in props (short for properties) as input and return a React element
(JSX) as output. They are mainly used for rendering static content.
• Class Components: These are more complex and can have state and
lifecycle methods. They extend the React Component class and have a
render() method that returns a React element. They are used for more
complex logic and interaction with the user.
• Overall, components are the building blocks of a ReactJS application and
are used to create reusable UI elements
Example 1
Class Components Function Components
The class component also requires
a render() method, this method returns
HTML.
class Car extends React.Component
{ render()
{ return <h2>Hi, I am a Car!</h2>; }
}
Create a Function component called Car
function Car()
{
return <h2>Hi, I am a Car!</h2>;
}
Example 2
Now your React application has a component called Car, which returns an <h2> element.
To use this component in your application, use similar syntax as normal HTML: <Car />
import React from 'react';
import ReactDOM from 'react-dom/client';
function Car()
{ return <h2>Hi, I am a Car!</h2>;}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car color="red"/>);
output: Hi, I am a Car!
• Multiple Components
Components can be reusable which help you to maintain the code when working on
larger scale projects.
Example 3
import React from 'react';
import ReactDOM from 'react-dom/client';
function Car() {
return <h2>I am a Car!</h2>;
}
function Garage() { return ( <><h1>Who lives in my Garage?</h1>
<Car /> </> );}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render (<Garage />);
output:
Who lives in my Garage?
I am a Car!
Why React is fast ?
What is meant by rendering in react js?
• Rendering in ReactJS refers to the process of displaying or updating the
contents of the user interface based on the current state and props of
the components.
• When a React component is rendered, it generates a virtual DOM
(Document Object Model) which is a lightweight representation of the
actual DOM.
• The virtual DOM is then compared to the previous version of the virtual
DOM, and only the differences are updated in the actual DOM.
Example 4
Here is an example of a simple React component with a render() method:
import React from 'react';
class Greeting extends React.Component {
render() {
return (
<div>
<h1>Hello, {this.props.name}!</h1>
<p>Today is {this.props.day}.</p>
</div>
);
}
} export default Greeting;
Reactjs  notes.pptx for web development- tutorial and theory
Virtual DOM
• The virtual DOM (VDOM) is a programming concept where an ideal,
or “virtual”, representation of a UI is kept in memory and synced
with the “real” DOM by a library such as ReactDOM. This process is
called reconciliation.
• A virtual DOM object is a representation of the original DOM object.
It works like a one-way data binding. Whenever any modifications
happen in the web application, the entire UI is re-rendered in virtual
DOM representation.
• Then it checks the difference between the previous DOM
representation and new DOM. Once it has done, the real DOM will
update only the things that have actually changed.
• This makes the application faster, and there is no wastage of memory.
Below is a visual description of the rendering
process when an application re-renders.
Reactjs  notes.pptx for web development- tutorial and theory
MOST POPULAR COMPONENTS
• GRIDS
• Data Grid
• Pivot Table
• Tree Grid
• Spreadsheet
• CALENDARS
• Scheduler
• Gantt Chart
• Calendar
• DatePicker
• DateRangePi
cker
• DateTime
Picker
• TimePicker
• DATA
VISUALIZATION
• Charts
• Stock Chart
• Circular Gauge
• Linear Gauge
• Diagram
• HeatMap
Chart
• Maps
• Range Selector
• Smith Chart
• Sparkline
Charts
• Barcode
Generator
• TreeMap
• Bullet Chart
• Kanban
• VIEWER
• PDF Viewer
• NAVIGATION
• Accordion
• Breadcrumb
• Context
Menu
• Menu Bar
• Sidebar
• Tabs
• Toolbar
• TreeView
• File Manager
• NOTIFICATION
S
• Badge
• Toast
• Progress Bar
• INPUTS
• TextBox
• Input Mask
• Numeric
Textbox
• Radio
Button
• Checkbox
• Color Picker
• File Upload
• Slider
• Signature P
REVIEW
• Toggle
Switch
Button
• BUTTONS
• Button
• Button
Group
• Dropdown
Menu
• Progress
Button
• Split Button
• Chips
• FORMS
• In-place
Editor
• Query
Builder UI
• EDITORS
• Rich Text
Editor
• Word
Processor
• DROPDOWNS
• AutoComplete
• ListBox
• ComboBox
• Dropdown List
• MultiSelect Dropdown
• Dropdown Tree
• LAYOUT
• Avatar
• Card
• Dialog
• ListView
• Tooltip
• Splitter
• Dashboard Layout

More Related Content

PPTX
Spring Boot Tutorial
PPTX
React Native
PPTX
Reactive Programming In Java Using: Project Reactor
PPTX
PPTX
Spring boot
PDF
PDF
Understanding Reactive Programming
PPTX
Spring Boot Tutorial
React Native
Reactive Programming In Java Using: Project Reactor
Spring boot
Understanding Reactive Programming

What's hot (20)

PDF
React js
PPTX
Spring boot Introduction
PPTX
Spring mvc
PDF
Spring boot introduction
PPTX
React workshop presentation
ODP
Introduction to ReactJS
PPTX
Angular 5 presentation for beginners
PPT
Spring Boot in Action
PPTX
Intro to React
PDF
Nodejs Explained with Examples
PDF
Spring Boot
PPTX
ReactJS presentation.pptx
PPTX
Reactjs
PDF
Introduction to react native
PPTX
Angular tutorial
PDF
ReactJS presentation
PDF
WEB DEVELOPMENT USING REACT JS
PDF
Spring boot
PPTX
PDF
NodeJS for Beginner
React js
Spring boot Introduction
Spring mvc
Spring boot introduction
React workshop presentation
Introduction to ReactJS
Angular 5 presentation for beginners
Spring Boot in Action
Intro to React
Nodejs Explained with Examples
Spring Boot
ReactJS presentation.pptx
Reactjs
Introduction to react native
Angular tutorial
ReactJS presentation
WEB DEVELOPMENT USING REACT JS
Spring boot
NodeJS for Beginner
Ad

Similar to Reactjs notes.pptx for web development- tutorial and theory (20)

PPTX
React_Complete.pptx
PDF
Tech Talk on ReactJS
PDF
Learning React js Learn React JS From Scratch with Hands On Projects 2nd Edit...
PPSX
REACTJS1.ppsx
PDF
Review on React JS
PPTX
React js
PDF
Welcome to React & Flux !
PPTX
Introduction to ReactJS UI Web Dev .pptx
PPTX
Introduction to React JS.pptx
PDF
What is React programming used for_ .pdf
PDF
react hook and wesite making structure ppt
PPTX
React JS - A quick introduction tutorial
PDF
React DOM/Virtual DOM
PPT
Why should you use react js for web app development
PDF
FRONTEND DEVELOPMENT WITH REACT.JS
PDF
Fundamental concepts of react js
PPTX
reactJS
PDF
React in Action ( PDFDrive ).pdf
PPTX
React js - The Core Concepts
React_Complete.pptx
Tech Talk on ReactJS
Learning React js Learn React JS From Scratch with Hands On Projects 2nd Edit...
REACTJS1.ppsx
Review on React JS
React js
Welcome to React & Flux !
Introduction to ReactJS UI Web Dev .pptx
Introduction to React JS.pptx
What is React programming used for_ .pdf
react hook and wesite making structure ppt
React JS - A quick introduction tutorial
React DOM/Virtual DOM
Why should you use react js for web app development
FRONTEND DEVELOPMENT WITH REACT.JS
Fundamental concepts of react js
reactJS
React in Action ( PDFDrive ).pdf
React js - The Core Concepts
Ad

Recently uploaded (20)

PDF
오픈소스 LLM, vLLM으로 Production까지 (Instruct.KR Summer Meetup, 2025)
PDF
Geotechnical Engineering, Soil mechanics- Soil Testing.pdf
PPTX
The-Looming-Shadow-How-AI-Poses-Dangers-to-Humanity.pptx
PPTX
Internship_Presentation_Final engineering.pptx
PDF
Arduino robotics embedded978-1-4302-3184-4.pdf
PPTX
436813905-LNG-Process-Overview-Short.pptx
PDF
July 2025 - Top 10 Read Articles in International Journal of Software Enginee...
PPTX
Engineering Ethics, Safety and Environment [Autosaved] (1).pptx
PDF
Model Code of Practice - Construction Work - 21102022 .pdf
PPT
Chapter 6 Design in software Engineeing.ppt
PPTX
Geodesy 1.pptx...............................................
PPTX
ANIMAL INTERVENTION WARNING SYSTEM (4).pptx
PPTX
24AI201_AI_Unit_4 (1).pptx Artificial intelligence
PDF
SM_6th-Sem__Cse_Internet-of-Things.pdf IOT
PPTX
Unit 5 BSP.pptxytrrftyyydfyujfttyczcgvcd
PPTX
web development for engineering and engineering
PDF
ETO & MEO Certificate of Competency Questions and Answers
PPTX
OOP with Java - Java Introduction (Basics)
PPTX
“Next-Gen AI: Trends Reshaping Our World”
오픈소스 LLM, vLLM으로 Production까지 (Instruct.KR Summer Meetup, 2025)
Geotechnical Engineering, Soil mechanics- Soil Testing.pdf
The-Looming-Shadow-How-AI-Poses-Dangers-to-Humanity.pptx
Internship_Presentation_Final engineering.pptx
Arduino robotics embedded978-1-4302-3184-4.pdf
436813905-LNG-Process-Overview-Short.pptx
July 2025 - Top 10 Read Articles in International Journal of Software Enginee...
Engineering Ethics, Safety and Environment [Autosaved] (1).pptx
Model Code of Practice - Construction Work - 21102022 .pdf
Chapter 6 Design in software Engineeing.ppt
Geodesy 1.pptx...............................................
ANIMAL INTERVENTION WARNING SYSTEM (4).pptx
24AI201_AI_Unit_4 (1).pptx Artificial intelligence
SM_6th-Sem__Cse_Internet-of-Things.pdf IOT
Unit 5 BSP.pptxytrrftyyydfyujfttyczcgvcd
web development for engineering and engineering
ETO & MEO Certificate of Competency Questions and Answers
OOP with Java - Java Introduction (Basics)
“Next-Gen AI: Trends Reshaping Our World”

Reactjs notes.pptx for web development- tutorial and theory

  • 2. Industry Trends for React/React.js • React developers earn more money when compared to other web development technologies. • Average salary of React developer across the US is $91,000 per annum. • Average salary of React developer across in India is 7,25,000 per annum. • React is gaining popularity and being adopted by many countries. • :
  • 4. React Pre-requisites  One should be familiar with programing concepts like function, arrays, Objects and classes.  HTML  CSS  JavaScript  Understanding of ES6 (ES6 stands for ECMAScript 6. ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript )
  • 5. React/React.js/ReactJS - React (also known as React.js or ReactJS) is a free open source java script library for building fast an interactive front end UI interfaces for web and mobile applications. - It is used for building user interfaces specifically for single-page applications which means complete website in single page - In MVC architecture, react is the view which defines how the app looks and feels like. - It’s used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components. - React is a User Interface (UI) library - React can be used to develop both web and mobile interfaces.
  • 6. - It was developed in facebook now meta in 2011. - React was developed by “Jordon Walke” an engineer in facebook. - React first deployed on Facebook’s newsfeed in 2011 and on Instagram.com in 2012 • React allows developers to create large web applications that can change data, without reloading the page. • The main purpose of React is to be fast, scalable, and simple. • It works only on user interfaces in the application. •
  • 7. To conclude : we can say…..  React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. React has a few different kinds of components.
  • 8. Why React is so popular • Easy creation of dynamic web site. • Performance enhancement • Reusable components • Unidirectional Data flow • Can be used for mobile apps • Dedicated tools for debugging
  • 9. React Compiler: Babel • Babel is a JavaScript compiler that can translate markup or programming languages into JavaScript. • With Babel, you can use the newest features of JavaScript (ES6 - ECMAScript 2015). • Babel is available for different conversions. React uses Babel to convert JSX into JavaScript. • Please note that <script type="text/babel"> is needed for using Babel.
  • 11. React Features: • Currently, ReactJS gaining quick popularity as the best JavaScript framework among web developers. It is playing an essential role in the front-end ecosystem. The important features of ReactJS are as following. • JSX • Components • One-way Data Binding • Virtual DOM • Simplicity • Performance
  • 12. Features of React : JSX • JSX stands for JavaScript XML. It is a JavaScript syntax extension. Its an XML or HTML like syntax used by ReactJS. • In React, instead of using regular JavaScript for templating, it uses JSX. • JSX is a simple JavaScript that allows HTML quoting and uses these HTML tag syntax to render subcomponents. • HTML syntax is processed into JavaScript calls of React Framework. • We can also write in pure old JavaScript.
  • 14. React Components • ReactJS is all about components. ReactJS application is made up of multiple components, and each component has its own logic and controls. These components can be reusable which help you to maintain the code when working on larger scale projects.
  • 16. React Components In ReactJS, a component is a reusable and independent piece of code that defines a part of a user interface. It can be thought of as a building block for constructing a larger application. There are two main types of components in ReactJS: • Function Components: These are simple and stateless components that take in props (short for properties) as input and return a React element (JSX) as output. They are mainly used for rendering static content. • Class Components: These are more complex and can have state and lifecycle methods. They extend the React Component class and have a render() method that returns a React element. They are used for more complex logic and interaction with the user. • Overall, components are the building blocks of a ReactJS application and are used to create reusable UI elements
  • 17. Example 1 Class Components Function Components The class component also requires a render() method, this method returns HTML. class Car extends React.Component { render() { return <h2>Hi, I am a Car!</h2>; } } Create a Function component called Car function Car() { return <h2>Hi, I am a Car!</h2>; }
  • 18. Example 2 Now your React application has a component called Car, which returns an <h2> element. To use this component in your application, use similar syntax as normal HTML: <Car /> import React from 'react'; import ReactDOM from 'react-dom/client'; function Car() { return <h2>Hi, I am a Car!</h2>;} const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Car color="red"/>); output: Hi, I am a Car!
  • 19. • Multiple Components Components can be reusable which help you to maintain the code when working on larger scale projects. Example 3 import React from 'react'; import ReactDOM from 'react-dom/client'; function Car() { return <h2>I am a Car!</h2>; } function Garage() { return ( <><h1>Who lives in my Garage?</h1> <Car /> </> );} const root = ReactDOM.createRoot(document.getElementById('root')); root.render (<Garage />); output: Who lives in my Garage? I am a Car!
  • 20. Why React is fast ?
  • 21. What is meant by rendering in react js? • Rendering in ReactJS refers to the process of displaying or updating the contents of the user interface based on the current state and props of the components. • When a React component is rendered, it generates a virtual DOM (Document Object Model) which is a lightweight representation of the actual DOM. • The virtual DOM is then compared to the previous version of the virtual DOM, and only the differences are updated in the actual DOM.
  • 22. Example 4 Here is an example of a simple React component with a render() method: import React from 'react'; class Greeting extends React.Component { render() { return ( <div> <h1>Hello, {this.props.name}!</h1> <p>Today is {this.props.day}.</p> </div> ); } } export default Greeting;
  • 24. Virtual DOM • The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation. • A virtual DOM object is a representation of the original DOM object. It works like a one-way data binding. Whenever any modifications happen in the web application, the entire UI is re-rendered in virtual DOM representation. • Then it checks the difference between the previous DOM representation and new DOM. Once it has done, the real DOM will update only the things that have actually changed. • This makes the application faster, and there is no wastage of memory.
  • 25. Below is a visual description of the rendering process when an application re-renders.
  • 27. MOST POPULAR COMPONENTS • GRIDS • Data Grid • Pivot Table • Tree Grid • Spreadsheet • CALENDARS • Scheduler • Gantt Chart • Calendar • DatePicker • DateRangePi cker • DateTime Picker • TimePicker • DATA VISUALIZATION • Charts • Stock Chart • Circular Gauge • Linear Gauge • Diagram • HeatMap Chart • Maps • Range Selector • Smith Chart • Sparkline Charts • Barcode Generator • TreeMap • Bullet Chart • Kanban • VIEWER • PDF Viewer • NAVIGATION • Accordion • Breadcrumb • Context Menu • Menu Bar • Sidebar • Tabs • Toolbar • TreeView • File Manager • NOTIFICATION S • Badge • Toast • Progress Bar • INPUTS • TextBox • Input Mask • Numeric Textbox • Radio Button • Checkbox • Color Picker • File Upload • Slider • Signature P REVIEW • Toggle Switch Button • BUTTONS • Button • Button Group • Dropdown Menu • Progress Button • Split Button • Chips • FORMS • In-place Editor • Query Builder UI • EDITORS • Rich Text Editor • Word Processor
  • 28. • DROPDOWNS • AutoComplete • ListBox • ComboBox • Dropdown List • MultiSelect Dropdown • Dropdown Tree • LAYOUT • Avatar • Card • Dialog • ListView • Tooltip • Splitter • Dashboard Layout

Editor's Notes

  • #6: MVC (Model-View-Controller) is a pattern in software design commonly used to implement user interfaces, data, and controlling logic. It emphasizes a separation between the software's business logic and display