Skip to main content

​
All Course Sections

This index lists all 34 sections from the React - The Complete Guide course. Each section contains multiple code snapshots representing different stages of development covered in the lectures.
Click on any accordion to see the available snapshots for that section. To use a snapshot, navigate to its folder and run npm install followed by npm run dev.
Path: code/01 Getting Started/Available snapshots:
  • edited-first-app - Modified version of the first React application
  • react-vs-vanilla-js-example - Comparison between React and vanilla JavaScript
This section introduces React basics and sets up your development environment.
Path: code/02 JS Refresher/Available snapshots:
  • code - JavaScript fundamentals and ES6+ features
Covers modern JavaScript features essential for React development: arrow functions, destructuring, spread operator, and more.
Path: code/03 React Essentials/Multiple progressive snapshots covering:
  • 01-starting-project - Initial setup
  • 02-creating-using-first-component - Component basics
  • 03-using-outputting-dynamic-values - Dynamic content
  • Additional snapshots for props, state, and event handling
Core React concepts: components, JSX, props, state, and events.
Path: code/04 Essentials Deep Dive/Progressive snapshots including:
  • 01-starting-project - Starting point
  • 02-fragments - Using React fragments
  • 03-splitting-components - Component composition
  • Additional advanced patterns
Advanced component patterns, composition, and best practices.
Path: code/05 Essentials Practice/Practice-focused snapshots:
  • 01-starting-project - Practice project starter
  • 02-user-input-two-way-binding - Form handling
  • 03-lifting-state-up - State management patterns
  • Additional exercises
Hands-on practice applying React essentials to a real project.
Path: code/06 Debugging/Snapshots:
  • 01-starting-project - Project with bugs
  • 02-error-messages - Understanding errors
  • 03-finished - Debugged version
Learn to use React DevTools, read error messages, and debug common issues.
Path: code/07 Styling/Multiple styling approaches:
  • 01-starting-project - Unstyled starting point
  • 02-dynamic-conditional-inline-styles - Inline styles
  • 03-dynamic-conditional-css-classes - CSS classes
  • Additional styling techniques
Covers CSS modules, styled-components, inline styles, and dynamic styling.
Path: code/08 Refs Portals/Snapshots covering:
  • 01-starting-project - Initial setup
  • 02-user-input-with-state - Traditional state approach
  • 03-introducing-refs-connecting-elements - useRef basics
  • Portal examples
Learn refs for DOM access and portals for rendering outside the component tree.
Path: code/09 Practice Project - Project Management/Progressive build snapshots:
  • 01-starting-project - Empty starter
  • 02-styling-sidebar - Sidebar component
  • 03-styling-buttons-inputs - UI components
  • Multiple intermediate stages
  • Final completed project
Build a complete project management app using all concepts learned so far.
Path: code/10 Advanced State Management with Context useReducer/Snapshots:
  • 01-starting-project - Starting code
  • 02-prop-drilling-cmp-composition - Prop drilling problem
  • 03-creating-providing-context - Context API introduction
  • useReducer examples
Master Context API and useReducer for complex state management scenarios.
Path: code/11 Side Effects useEffect/Snapshots:
  • 01-starting-project - Before useEffect
  • 02-using-useeffect - useEffect basics
  • 03-useeffect-not-needed - When to avoid useEffect
  • Dependencies and cleanup examples
Understand side effects, useEffect hook, dependencies, and cleanup functions.
Path: code/12 Behind the Scenes/Performance optimization snapshots:
  • 01-starting-project - Unoptimized code
  • 02-avoiding-cmp-execution-with-memo - React.memo
  • 03-usememo - useMemo hook
  • useCallback examples
Learn how React works internally and optimize performance with memo, useMemo, and useCallback.
Path: code/13 Demo Project - React Quiz/Complete quiz app build:
  • 01-starting-project - Initial setup
  • 02-first-cmp-some-state - Basic structure
  • Progressive feature additions
  • Final quiz application
Build a complete quiz application with timers, scoring, and state management.
Path: code/14 Class-based Components/Legacy component patterns:
  • Class component syntax
  • Lifecycle methods
  • Converting between class and functional components
Understand class-based components for maintaining legacy code.
Path: code/15 HTTP Requests/Async operations snapshots:
  • Fetching data with useEffect
  • Loading and error states
  • POST, PUT, DELETE requests
  • Error handling
Master data fetching, loading states, error handling, and API integration.
Path: code/16 Custom Hooks/Reusable logic snapshots:
  • Creating custom hooks
  • Sharing stateful logic
  • Custom hooks for HTTP, form handling, and more
Learn to extract and reuse component logic with custom hooks.
Path: code/17 Forms User Input/Form handling snapshots:
  • Controlled components
  • Form validation
  • Multi-step forms
  • Form submission
Master form handling, validation, and user input management.
Path: code/17b Form Actions/Modern form handling:
  • React 19+ form actions
  • Server-side form handling
  • Progressive enhancement
Explore modern form handling approaches with React 19 features.
Path: code/18 Practice Project - Food Order/Complete e-commerce-style app:
  • Product listing
  • Shopping cart
  • Checkout flow
  • HTTP requests
  • Form handling
Build a complete food ordering application combining all learned concepts.
Path: code/19 Redux Basics/Redux fundamentals:
  • Redux store setup
  • Actions and reducers
  • Connecting React to Redux
  • Redux DevTools
Learn Redux for application-wide state management.
Path: code/20 Advanced Redux/Advanced Redux patterns:
  • Async actions with thunks
  • Redux Toolkit
  • Side effects in Redux
  • Best practices
Master advanced Redux patterns, middleware, and Redux Toolkit.
Path: code/21 Routing/React Router snapshots:
  • Setting up React Router
  • Route parameters
  • Nested routes
  • Navigation and links
  • Programmatic navigation
Build multi-page applications with React Router.
Path: code/22 Authentication/Auth implementation:
  • Login/signup flows
  • Token management
  • Protected routes
  • Auth context
Implement user authentication and authorization in React apps.
Path: code/23 Deployment/Production deployment:
  • Build optimization
  • Deployment strategies
  • Environment variables
  • Hosting platforms
Learn to deploy React applications to production environments.
Path: code/24 React Query/Data fetching library:
  • React Query setup
  • Queries and mutations
  • Caching strategies
  • Optimistic updates
Master React Query (TanStack Query) for powerful data synchronization.
Path: code/25 NextJS App Router Introduction/Next.js App Router:
  • App directory structure
  • File-based routing
  • Layouts and templates
  • Server and client components
Introduction to Next.js 13+ App Router architecture.
Path: code/25 NextJS Introduction/Next.js fundamentals:
  • Pages directory
  • SSR and SSG
  • API routes
  • Image optimization
Learn Next.js framework for production-ready React applications.
Path: code/25b RSC, Suspense, Server Actions/Modern Next.js features:
  • React Server Components
  • Suspense boundaries
  • Server Actions
  • Streaming
Explore cutting-edge React and Next.js features for modern web apps.
Path: code/26 Animations/Animation techniques:
  • CSS transitions
  • CSS animations
  • Animation libraries
  • Framer Motion
Add smooth animations and transitions to React applications.
Path: code/27 Patterns/React design patterns:
  • Render props
  • Higher-order components
  • Compound components
  • Other advanced patterns
Learn advanced React design patterns for scalable applications.
Path: code/27 Replacing Redux with Hooks/Alternative state management:
  • Context + useReducer
  • Custom state management
  • When to use Redux vs hooks
Explore alternatives to Redux using React hooks for state management.
Path: code/28 Testing/Testing React apps:
  • Jest setup
  • React Testing Library
  • Unit tests
  • Integration tests
  • Mocking
Write comprehensive tests for React components and applications.
Path: code/29 React TypeScript/TypeScript integration:
  • TypeScript setup
  • Typing components
  • Props and state types
  • Generic components
Add type safety to React applications with TypeScript.
Path: code/30 React Summary/Course wrap-up:
  • Key concepts review
  • Best practices summary
  • Next steps
Review all major concepts covered throughout the course.

​
Quick Reference

Total Sections

34 comprehensive sections covering React from basics to advanced topics

Repository Location

All snapshots located in /code/ directory of the course repository

Run Any Snapshot

cd code/[section-name]/[snapshot-name]
npm install
npm run dev

Compare Your Code

Use snapshots to verify your implementation matches the course videos

​
Finding Specific Topics

Looking for something specific? Here’s a quick topic guide:
  • Components: Sections 3, 4
  • State & Props: Sections 3, 4, 5
  • Events: Section 3
  • Forms: Sections 17, 17b
  • Styling: Section 7
Need help using these snapshots? Check out the How to Use Code Snapshots guide.

Build docs developers (and LLMs) love

Get started for freeTalk to us