React — The Complete Guide

What You'll Learn

Technologies Covered

The complete modern React ecosystem — everything employers expect from a working React developer.

Curriculum — 8 Stages

70+ hours · 728 lectures · 40 chapters organized into 8 progressive stages. Two paths available: complete course or 4-hour fast-track summary.

• 01

  React Foundations

  Why React, project setup, JavaScript refresher, first components and JSX

  ▾

  Before writing a line of React, you need to understand why it exists. Vanilla JavaScript gets slow, complex, and hard to maintain at scale — React solves that with a component-based, declarative model. This stage opens with the "why React" question, walks through setting up your first project with Vite, and covers the JavaScript you actually need for React: arrow functions, destructuring, spread/rest, array methods, modules, classes, and template literals. Then the first real React code: what JSX is, how it compiles, creating functional components, and why React's update model is fundamentally different from direct DOM manipulation. By the end of Stage 1, you'll have a working project and understand the mental model behind it.

  Why React over Vanilla JS Vite project setup Arrow functions & destructuring ES6 modules (import/export) Spread & rest operators Array methods (map, filter, reduce) JSX fundamentals First React components

  React 19 Vite JSX
• 02

  Components, Props, State & Events

  The core React model — building reusable components and making them interactive

  ▾

  This is where React's actual power becomes real. Components are the fundamental unit — you'll learn how to split a UI into isolated, reusable pieces and pass data between them with props. Then state: how React tracks changes and re-renders efficiently, why you can't mutate state directly, and how useState works under the hood. Event handling in React — onClick, onChange, onSubmit, passing handlers through props, and lifting state up when sibling components need to share it. You'll build several interactive mini-projects including a Tic-Tac-Toe game and an investment calculator — cementing every concept through real code. Covers both the "essentials" and a full deep-dive with advanced prop patterns, component composition, and the children prop.

  Custom components & file structure Props & dynamic data binding Component composition (children) Event handling & handlers-as-props useState & state update model Lifting state up Conditional rendering Rendering lists with keys Immutable state updates
• 03

  Styling, Debugging & Refs

  CSS Modules, Tailwind, Styled Components, DevTools, Refs, Portals

  ▾

  Three essential skill areas that most tutorials skip or rush. Styling: React doesn't care how you style — Vanilla CSS (pros and cons), inline styles (good for truly dynamic values, bad for most things), CSS Modules for scoped component styles, Styled Components for CSS-in-JS, and Tailwind CSS for utility-first rapid development. You'll migrate the same demo app through all four approaches to understand the trade-offs firsthand. Debugging: reading React error messages, using browser breakpoints, understanding React's Strict Mode, and working with the React DevTools browser extension. Refs and Portals: useRef for accessing DOM elements and managing timers without re-renders, forwarding refs, useImperativeHandle for exposing component APIs, and Portals for rendering modals outside the component tree.

  CSS Modules (scoped styles) Styled Components Tailwind CSS utilities Dynamic & conditional styling React error messages Browser debugger & breakpoints React DevTools profiler useRef & DOM access Forwarding refs Portals

  CSS Modules Tailwind CSS Styled Components React DevTools
• 04

  Advanced State Management

  Context API, useReducer, React optimization, and performance patterns

  ▾

  When state needs to be shared across many components, prop drilling becomes a problem. React's Context API is the first-party solution — you'll learn to create contexts, provide them at the right level, consume them efficiently, and migrate an entire app from prop drilling to context. Then useReducer: for complex state logic with multiple sub-values, this hook gives you a Redux-style dispatch pattern inside a single component. The optimization deep dive covers React's rendering behavior under the hood, when and why components re-render, memo() for preventing unnecessary re-renders, useCallback and useMemo for stabilizing function and value references, and the Virtual DOM. You'll use the React DevTools Profiler to visualize exactly what's re-rendering and why — then fix it.

  Prop drilling problem React Context API createContext & useContext Context with state useReducer & dispatch memo() for render prevention useCallback & useMemo Virtual DOM & reconciliation Keys for resetting components State scheduling & batching
• 05

  Side Effects, HTTP & Forms

  useEffect, data fetching, custom hooks, form handling, Form Actions, and TanStack Query

  ▾

  Side effects are everything that touches the outside world: timers, event listeners, browser APIs, and most importantly — HTTP requests. useEffect is React's mechanism for synchronizing with those systems safely. This stage covers effect dependencies correctly, cleanup functions, the infinite loop trap, and when not to use useEffect at all. Then HTTP: the right pattern for fetching data (GET), posting data (POST), handling loading and error states, optimistic updates, and DELETE requests. You'll build a custom useFetch hook and see how to make it flexible. Forms in React: controlled inputs via state, refs for uncontrolled inputs, native FormData, reset logic, validation on keystroke/blur/submit, and built-in HTML validation attributes. Modern Form Actions (React 19): useActionState(), useFormStatus(), async actions, and optimistic updating. TanStack Query: cache management, stale data, mutations, query invalidation — and how it eliminates most manual loading state boilerplate.

  useEffect & dependencies Effect cleanup functions GET requests with fetch/axios Loading & error state patterns POST, DELETE requests Optimistic updates Custom hooks Controlled form inputs Form validation strategies React Form Actions (React 19) TanStack Query mutations

  TanStack Query useActionState useFormStatus
• 06

  Redux & Redux Toolkit

  Global state at scale — Redux core, Redux Toolkit, slices, thunks, and async patterns

  ▾

  Context API works well for many cases — but Redux is still the industry standard for large-scale state management in enterprise React apps. This stage explains why Redux exists and when it makes sense over Context. Core Redux concepts: store, reducers, actions, and selectors. Then Redux Toolkit (RTK), which eliminates all the boilerplate: createSlice, configureStore, createAsyncThunk for async logic, and RTK Query as an alternative to TanStack Query. You'll build a full shopping cart feature, migrating first from basic Redux to RTK, then adding side effects with thunks and Firebase as a backend. Advanced Redux covers the cart persistence problem, Immer for immutable updates (RTK does this automatically), and the Redux DevTools for time-travel debugging.

  Redux store & reducers Actions & dispatching createSlice (RTK) configureStore useSelector & useDispatch Multiple state slices createAsyncThunk Redux side effects pattern Redux DevTools

  Redux Toolkit Redux DevTools Immer
• 07

  React Router & Authentication

  Multi-page SPAs, loaders, actions, route protection, and token-based auth

  ▾

  Single-page apps need routing — React Router is the standard. You'll go from defining your first route to advanced data loading and form submission patterns. Nested routes and layouts, NavLink active states, programmatic navigation, dynamic route parameters, and error pages. React Router's data APIs: loader() functions for pre-fetching data before a route renders, action() functions for form submissions, useFetcher() for background actions without navigation, and defer() for streaming responses. Authentication: how token-based auth works in React, protecting routes with loader-based guards, attaching tokens to outgoing requests, logout, updating the UI based on auth status, auto-logout on token expiry, and managing token expiration. You'll also cover lazy loading routes for code splitting and production deployment configuration for SPAs (server-side routing requirements).

  Route definitions & nesting NavLink & active states Dynamic routes & params loader() data fetching action() form submission useFetcher & defer() Error pages & errorElement Token-based authentication Route protection via loaders Lazy loading & code splitting

  React Router v7
• 08

  Next.js, Server Components & Advanced Topics

  Next.js 14+ App/Pages Router, RSC, Server Actions, Framer Motion, TypeScript, and Testing

  ▾

  The final stage goes wide and deep. Next.js 14+ App Router: file-based routing, layouts, reserved filenames, server-side data fetching, the Foodies full-stack app (SQLite backend, image uploads, AWS S3), Server Actions for form handling, ISR and cache revalidation, and dynamic metadata. The Pages Router is also fully covered for working with existing Next.js codebases. React Server Components: when to use Server vs Client components, combining them efficiently, the use() hook, and handling errors. Animations with Framer Motion: variants, staggered lists, shared element transitions, layout animations, scroll-based animations. TypeScript with React: typing components, props, hooks (useRef, useState with generics), context, and function types. Unit Testing: Jest setup, testing user interactions with React Testing Library, mocking, async testing, and test suites. Bonus: advanced patterns like Compound Components and Render Props, replacing Redux with custom hook stores.

  Next.js App Router Next.js Pages Router Server & Client Components Server Actions & useFormStatus ISR & cache revalidation AWS S3 image uploads Framer Motion animations TypeScript with React Jest & React Testing Library Compound Components Render Props pattern

  Next.js 14+ Framer Motion TypeScript Jest RTL

Who This Course Is For

Requirements