What is React?
React is a popular JavaScript library used for building user interfaces (UI), especially for
web applications.
It helps developers create:
• Interactive websites
• Dynamic web pages
• Single Page Applications (SPA)
• Mobile applications (using React Native)
React was developed by Meta (formerly Facebook).
Definition of React
React is an open-source JavaScript library used to build fast, interactive, and reusable user
interface components for web applications.
Why React is Used?
Before React, websites were built using normal JavaScript and HTML, which became
difficult to manage for large applications.
React solves this problem by:
• Breaking UI into small reusable components
• Updating only changed parts of the page
• Making development faster and easier
Features of React
1. Component-Based Architecture
React applications are made using components.
A component is a reusable piece of UI.
Example:
• Header
• Navbar
• Footer
• Login Form
Each can be a separate component.
2. Virtual DOM
React uses a Virtual DOM to improve speed.
DOM
DOM = Document Object Model
It represents the webpage structure.
Virtual DOM
React creates a virtual copy of the real DOM.
When data changes:
• React compares changes
• Updates only necessary parts
• Makes applications faster
3. JSX
React uses JSX (JavaScript XML).
JSX allows writing HTML inside JavaScript.
Example:
const element = <h1>Hello React</h1>;
4. Reusable Components
A component can be reused multiple times.
Example:
<Button />
<Button />
<Button />
This reduces code repetition.
5. Fast Performance
React updates only changed data instead of reloading the entire page.
6. One-Way Data Binding
Data flows in one direction, making applications easier to manage and debug.
Basic Structure of React
Example:
function App() {
return (
<h1>Hello World</h1>
);
}
export default App;
Only updated elements change in browser.
Advantages of React
Advantage Explanation
Fast Uses Virtual DOM
Reusable Components Less repeated code
Easy to Learn Simple syntax
SEO Friendly Better search engine support
Large Community Many tutorials and libraries
Disadvantages of React
Disadvantage Explanation
Only UI Library Needs extra libraries for routing/state
Frequent Updates Technology changes quickly
JSX Confusion Mixing HTML and JS can confuse beginners
Applications Built with React
Many famous websites use React:
• Facebook
• Instagram
• Netflix
• WhatsApp Web
Real-Life Example
Think of React like LEGO blocks.
Instead of building everything from scratch:
• You create small pieces (components)
• Reuse them again and again
• Combine them to make a full application
3. Expressions in JSX
Expressions are JavaScript code written inside { }.
Syntax
{ JavaScript Expression }
Example 1: Variable Expression
function App() {
const name = "Eman";
return (
<h1>Hello {name}</h1>
);
}
export default App;
Output
Hello Eman
Example 2: Mathematical Expression
function App() {
return (
<h1>Sum = {5 + 10}</h1>
);
}
export default App;
Output
Sum = 15
Example 3: Conditional Expression
function App() {
const isLogin = true;
return (
<h1>
{isLogin ? "Welcome User" : "Please Login"}
</h1>
);
}
export default App;
4. Motivation About React-Based Web
Application Development
React became popular because traditional web development had many problems.
Problems in Traditional Development
• Large code became difficult
• Slow page loading
• Repeated code
• Difficult maintenance
• Poor user experience
Why React is Important?
React solves these problems.
Advantages of React
Feature Benefit
Components Reusable code
Virtual DOM Faster performance
JSX Easy UI design
One-way Data Flow Better debugging
Reusability Less coding effort
Real-Life Use of React
Many famous companies use React:
• Facebook
• Instagram
• Netflix
• WhatsApp Web
5. Tools Used for React Development
1. [Link]
[Link] is required to run React applications.
It provides JavaScript runtime environment.
2. npm
npm stands for:
Node Package Manager
It installs libraries and packages.
Example:
npm install
3. VS Code
Visual Studio Code is the most popular code editor for React development.
Features:
• Syntax highlighting
• Extensions
• Auto completion
• Debugging
4. Create React App
Used to quickly create React projects.
Command:
npx create-react-app my-app
5. Browser
Common browsers:
• Chrome
• Edge
• Firefox
Used to run React applications.
6. Setting Up Environment for React
Development
Step 1: Install [Link]
Download from:
[Link] Official Website
After installation check version:
node -v
Step 2: Create React App
Open terminal and write:
npx create-react-app my-app
Step 3: Move into Project Folder
cd my-app
Step 4: Run React App
npm start
React application will open in browser automatically.
7. Understanding File Structure of React
App
When React app is created, many folders appear.
Main File Structure
my-app
│
├── node_modules
├── public
├── src
├── [Link]
└── [Link]
Important Folders and Files
1. node_modules
Contains installed packages and libraries.
Automatically created.
2. public Folder
Contains public files.
Important file:
[Link]
Main HTML page.
3. src Folder
Most important folder.
Contains React code.
Files inside:
[Link]
[Link]
[Link]
4. [Link]
Contains project information and dependencies.
5. [Link]
Project documentation file.
8. Run the App and Understand Basic
Working
Start app using:
npm start
What Happens Internally?
1. React server starts
2. Browser opens localhost
3. [Link] loads [Link]
4. App component displays UI
Flow of React Application
[Link] → [Link] → Browser Screen
9. Understanding Basic Code of Created
App
[Link]
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = [Link](
[Link]('root')
);
[Link](
<App />
);
Explanation
Code Purpose
import React Imports React
import App Imports App component
createRoot Creates React root
render() Displays app
[Link]
function App() {
return (
<div>
<h1>Hello React</h1>
<p>Welcome to Web Development</p>
</div>
);
}
export default App;