Choose React after learning HTML, CSS, and JavaScript.We'll build toward a small shopping app as we learn.
28th August, 2026
React is an open-source JavaScript library used for building interactive and dynamic user interfaces (UIs), especially for web applications. It was originally developed by Facebook (now Meta) and is widely used for creating single-page applications (SPAs).
Note: React is technically a JavaScript library, not a complete framework. However, it is often referred to as a framework in general discussion
Key Features of React
- --Component-Based: Applications are divided into small, reusable components.
- --Declarative: You describe what the UI should look like, and React handles updating it.
- --Virtual DOM: React efficiently updates the parts of the page that have changed.
- --JSX: Allows you to write HTML-like syntax directly inside JavaScript.
- --Reusable Components: Components can be reused throughout an application.
- --One-Way Data Flow: Data generally flows from parent components to child components, making applications easier to understand.
- --Large Ecosystem: React has a large ecosystem of libraries and tools for routing, state management, forms, testing, and more.
1. Components 🧩
What are components?
A component is a reusable part of a webpage.
Examples in an online store
Example
function ProductCard() {
return (
<div>
<h2>Headphones</h2>
<p>₹999</p>
<button>Buy Now</button>
</div>
);
}
function App() {
return (
<div>
<ProductCard />
<ProductCard />
<ProductCard />
</div>
);
}🎯 Practice
Create a StudentCard component displaying:
Name: Rahul, Course: React, Age: 21
2. Props 📦
Components are reusable, but we don't want every product card to show the same product. That's where props come in.
Pizza → Table 1
Burger → Table 2
Pasta → Table 3Example
function ProductCard(props) {
return (
<div>
<h2>{props.name}</h2>
<p>₹{props.price}</p>
</div>
);
}
function App() {
return (
<div>
<ProductCard name="Headphones" price="999" />
<ProductCard name="Keyboard" price="1499" />
<ProductCard name="Mouse" price="599" />
</div>
);
}Cleaner syntax
function ProductCard({ name, price }) {
return (
<div>
<h2>{name}</h2>
<p>₹{price}</p>
</div>
);
}🎯 Practice
Create a StudentCard that accepts
name, course, and
age, and display three different students.
3. State 🔄
State is information that can change.
In React, we commonly use useState.
Example: Counter
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>{count}</h2>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}count
Current value
setCount
Function that changes it
0
Starting value
🎯 Practice
Create a counter with: 0 [ − ] [ + ]
4. Events 🖱️
Events happen when users interact with your website.
Example
function App() {
function sayHello() {
alert("Hello!");
}
return (
<button onClick={sayHello}>
Click Me
</button>
);
}
When the button is clicked, sayHello() runs.
🎯 Practice
Create a button that displays Welcome to React! when clicked.
5. Forms 📝
Forms allow users to enter information.
Example
import { useState } from "react";
function Login() {
const [email, setEmail] = useState("");
return (
<form>
<input
type="email"
placeholder="Enter email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<button type="submit">Login</button>
</form>
);
}When the user types, the state changes.
User types:
rahul@gmail.com
State:
email = "rahul@gmail.com"🎯 Practice
Create a form with:
- Name
- Password
- Submit button
Store the name and email using state.
6. Routing 🛣️
Routing lets users move between different pages in your application.
Home
Products
About
Contact
Home → Products → Product Details
↓
CartA popular library for React routing is React Router.
Example
import { BrowserRouter, Routes, Route } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/products" element={<Products />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}| Path | Page |
|---|---|
| / | Home |
| /products | Products |
| /about | About |
Navigation
import { Link } from "react-router-dom";
function Navbar() {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/products">Products</Link>
<Link to="/about">About</Link>
</nav>
);
}🎯 Practice
Create three pages: Home, About, Contact, and a navbar that lets you navigate between them.
7. API Integration 🌐
An API allows your React application to get data from another server.
React → API → Server
React ← API ← ServerExample using fetch
import { useEffect, useState } from "react";
function Products() {
const [products, setProducts] = useState([]);
useEffect(() => {
fetch("https://example.com/api/products")
.then((response) => response.json())
.then((data) => setProducts(data));
}, []);
return (
<div>
{products.map((product) => (
<h2 key={product.id}>
{product.name}
</h2>
))}
</div>
);
}What's happening?
1. fetch(...)
Asks the server for data.
2. response.json()
Converts the response into JavaScript data.
3. setProducts(data)
Stores the data in React state.
4. products.map(...)
Displays the products.
🎯 Practice
Build a page that gets a list of products from an API and displays:
- Product name
- Price
- Image
8. State Management 🧠
Small applications might have state like:
App
├── Products
├── Cart
└── NavbarBut imagine your shopping cart needs to be accessed by many components. State management helps organize shared application data.
Shopping List
/ | \
Mom Dad BrotherReact state management tools
Example
import { createContext, useContext, useState } from "react";
const CartContext = createContext();
function CartProvider({ children }) {
const [cart, setCart] = useState([]);
return (
<CartContext.Provider value={{ cart, setCart }}>
{children}
</CartContext.Provider>
);
}
function Cart() {
const { cart } = useContext(CartContext);
return <h2>Items: {cart.length}</h2>;
}🎯 Practice
Create a simple cart system where: Product → Add to Cart → Cart count increases
9. Building Reusable Components ♻️
This is where everything comes together.
Suppose your website has 20 buttons.
<button>Login</button>
<button>Signup</button>
<button>Buy</button>
<button>Checkout</button>Instead, you can create one reusable component.
Example
function Button({ text, color }) {
return (
<button style={{ backgroundColor: color }}>
{text}
</button>
);
}Many uses
<Button text="Login" color="blue" />
<Button text="Signup" color="green" />
<Button text="Buy Now" color="orange" />🏗️ Your Final React Project
After completing these topics, build a Mini E-Commerce Website.
- Home
- Products
- Product Details
- Cart
- Login
- Navbar
- ProductCard
- Button
- SearchBar
- Footer
- CartItem
- Display products
- Search products
- Product details
- Add to cart
- Remove from cart
- Cart item count
- Login form
- Multiple pages
- API integration
Skills you'll use
HTML/CSS
↓
JavaScript
↓
React
↓
Components
↓
Props
↓
State
↓
Events & Forms
↓
Routing
↓
API
↓
State Management
↓
Reusable Components
↓
🚀 Real React Project