React Basics

A hands-on course from zero to building real components

📚 Beginner Friendly
🧩 Interactive Lessons
45 min / session
Browse sessions
Session 01

How React Works

What React is, the Virtual DOM, project structure, JSX, components, props, and state — your first working React code.

⏱ 45 min 🟢 Available
Session 02

Events, Conditional Rendering & Lists

Handling user events, conditional rendering with if/ternary, rendering lists with map, and managing keys in React.

⏱ 45 min 🟢 Available
Session 03

useEffect, Fetching Data & Error Handling

How useEffect works, controlling when effects run, fetching data from an API, loading states, error handling, and cleanup.

⏱ 45 min 🟢 Available
Session 04

Forms, Validation & React Router

Controlled inputs, form submission, validation, and navigating between pages with React Router.

⏱ 45 min 🟢 Available
Session 05

Final Project: Build a Complete React App

Put it all together — build a Movie Search App from scratch using components, state, effects, the API, and deploy it.

⏱ 45 min 🏁 Final Project
Session 07

CSS Grid & Flexbox

Master 1D and 2D layouts — then build a fully interactive, color-coded Periodic Table of Elements with CSS Grid and make it responsive.

⏱ 60 min 📐 Layout 🟢 Available
Session 08

Media Queries & Responsiveness

Write layouts that adapt to any screen — mobile-first strategy, breakpoints, fluid typography with clamp(), responsive images, and container queries.

⏱ 60 min 📱 Responsive 🟢 Available
Session 09

Context & State Management

From prop drilling to global state — useContext, useReducer, and the Context + useReducer pattern. Build a live shopping cart with zero prop drilling.

⏱ 60 min 🔗 Context API 🟢 Available
Session 10

useMemo & useCallback

Why components re-render, React.memo, and memoizing values and functions with useMemo and useCallback — with live render-counter demos.

⏱ 60 min ⚡ Performance 🟢 Available
Session 11

Custom Hooks

Extract and reuse stateful logic with custom hooks — build useCounter, useLocalStorage, useDebounce, and useFetch with live interactive demos.

⏱ 60 min 🪝 Reusable Logic 🟢 Available