React Complete Foundations

Chapter 0: Prerequisites and Mindset

1. 0.1: Why React
2. 0.2: Essential JavaScript for React
3. 0.3: ES Modules
4. 0.4: Setting Up Your Environment
5. 0.5: TypeScript for React (Quick Start)
6. How to Think Moving Forward
7. Chapter Summary
8. What Comes Next

Chapter 2: Components and JSX

1. 2.1: What is a Component
2. 2.2: Functional Components
3. 2.3: JSX: JavaScript plus XML
4. 2.4: Rules of JSX
5. 2.5: Component Composition
6. Closing Thoughts

Chapter 3: Props & Data Flow

1. 3.1: Passing Props to Components
2. 3.2: Destructuring Props Inline
3. 3.3: The children Prop
4. 3.4: TypeScript for Props
5. 3.5: Unidirectional Data Flow
6. Common Mistakes
7. Summary
8. Looking Ahead

Chapter 4: State and Events

1. 4.1: The useState Hook
2. 4.2: Handling User Events
3. 4.3: State is Immutable
4. 4.4: Functional Updates
5. 4.5: Lifting State Up

Mini Project: Interactive Counter and Todo List

1. Part 1: Interactive Counter
2. Part 2: Todo List (Add and Delete)
3. What You Just Learned
4. Coming Next

Chapter 5: Rendering Lists and Conditional UI

1. 5.1: Rendering Lists with map
2. 5.2: The key Prop
3. 5.3: Conditional Rendering
4. 5.4: Returning null
5. 5.5: Filtering Lists
6. Chapter Summary
7. What comes next

Chapter 6: Side Effects and useEffect

1. 6.1: What are side effects
2. 6.2: The useEffect hook
3. 6.3: Dependency array explained
4. 6.4: Cleanup function
5. 6.5: Common useEffect pitfalls
6. 6.6: Fetching data with useEffect
7. Chapter summary
8. Next chapter preview

Chapter 7: Forms and Refs

1. 7.1: Controlled Components
2. 7.2: Handling Multiple Inputs
3. 7.3: Uncontrolled Components with useRef
4. 7.4: Form Validation Basics
5. 7.5: When to Use Refs vs State

Mini Project: Weather App and Interactive Form

1. Part 1: Weather App
2. Part 2: Interactive Form

New Mini Test: Debug a Broken useEffect

1. Problem 1: Infinite Loop
2. Problem 2: Stale Closure
3. Debugging Mindset

Chapter Summary

Next Chapter Preview

Chapter 8: Context API

1. 8.1: The Problem of Prop Drilling
2. 8.2: What is Context
3. 8.3: Creating a Context
4. 8.4: Provider and Consumer Relationship
5. 8.5: Creating a Custom Context Wrapper
6. 8.6: When Context is Enough
7. 8.7: When Context is Not Enough
8. Chapter Summary
9. Next Chapter Preview

Chapter 9: Reducers & Complex State

1. 9.1: When state becomes complex
2. 9.2: Understanding useReducer
3. 9.3: Actions, Reducers, and Dispatch
4. 9.4: Combining useReducer with Context
5. Mental model summary
6. Next chapter preview: Memoization and performance

Chapter 10: Memoization & Performance

1. 10.1: Why React Re-renders
2. 10.2: React.memo for Component Memoization
3. 10.3: useMemo and useCallback
4. 10.4: When NOT to Use Memoization
5. 10.5: Common Performance Pitfalls
6. 10.6: List Virtualization (Handling Large Lists)
7. Chapter Summary
8. Next Chapter Preview: Chapter 11 – Custom Hooks

Chapter 11: Custom Hooks

1. 11.1: Creating your own hooks
2. 11.2: Rules of hooks inside custom hooks
3. 11.3: Real examples of reusable hooks
4. 11.4: Composing hooks together
5. Key idea to remember
6. Next chapter preview
7. Chapter 12: Testing Components and Hooks

Chapter 12: Testing Components & Hooks

1. 12.1: Why test React code
2. 12.2: Setting up the testing environment
3. 12.3: Testing a component
4. 12.4: Testing custom hooks
5. 12.5: Mocking API calls
6. 12.6: What good tests look like
7. Mini Project: Shopping Cart (Context + useReducer + Tests)
8. Next Chapter Preview: Routing in React

Chapter 13: Routing with React Router v6

1. 13.1: Setting up react-router-dom
2. 13.2: BrowserRouter, Routes, and Route
3. 13.3: Link and NavLink
4. 13.4: Nested Routes and Outlet
5. 13.5: URL Params and Query Strings
6. 13.6: Programmatic Navigation
7. Chapter Summary
8. Next Chapter Preview: State Management (From Local to Global)

Chapter 14: State Management

1. 14.1: When to Use What (Decision Flow for State)
2. 14.2: Local State, Reducers, and Shared State Boundaries
3. 14.3: Context API for Shared State
4. 14.4: Zustand for Practical Global State
5. 14.5: Redux Toolkit for Large-Scale Applications
6. Summary of State Management Strategy
7. Next Chapter Preview: Data Fetching with React Query

Chapter 15: Data Fetching with React Query

1. 15.1: Why React Query Exists
2. 15.2: useQuery Fundamentals
3. 15.3: Query States and Lifecycle
4. 15.4: Caching and Background Refetching
5. 15.5: useMutation for Writes
6. 15.6: Query Invalidation and Synchronization
7. 15.7: When React Query Should Be Used
8. Summary
9. Next Chapter Preview: Chapter 16 - Styling in React

Chapter 16: Styling in React

1. 16.1: Thinking about styling in component-based UI
2. 16.2: CSS Modules for scoped styling
3. 16.3: Styled Components and CSS-in-JS
4. 16.4: Tailwind CSS and utility-first styling
5. 16.5: Component libraries and design systems
6. 16.6: shadcn/ui and modern composable design systems
7. 16.7: Choosing the right styling approach
8. 16.8: Mini architecture summary
9. Chapter 17 Preview: Forms in Depth

Chapter 17: Forms in Depth

1. 17.1: Why forms need a different approach
2. 17.2: The core problem with manual form state
3. 17.3: React Hook Form mental model
4. 17.4: Introducing Zod for validation
5. 17.5: Connecting React Hook Form with Zod
6. 17.6: Data flow in this setup
7. 17.7: Error handling model
8. 17.8: When to use this approach
9. 17.9: Architectural view
10. 17.10: Common mistakes to avoid
11. 17.11: Next chapter preview

Chapter 18: React 18+ Concurrency

1. 18.1: Automatic Batching and Rendering Behavior
2. 18.2: startTransition for Non-Blocking Updates
3. 18.3: useDeferredValue for Smoother UI Updates
4. 18.4: Suspense for Data Loading (Conceptual Introduction)
5. Next Chapter Preview: Chapter 19

Chapter 19: Build Tools & Next.js

1. 19.1: Vite vs Webpack
2. 19.2: Environment Variables
3. 19.3: Introduction to Next.js
4. 19.4: Deployment (Vercel and Netlify)
5. End of Chapter Summary
6. Next Chapter Preview: Chapter 20 – Real World Patterns

Chapter 20: Real-World Patterns

1. 20.1: Error Boundaries
2. 20.2: Lazy Loading and Code Splitting
3. 20.3: Portals for UI Outside the DOM Hierarchy
4. 20.4: Render Props and Higher Order Components
5. Chapter Summary
6. Next Chapter Preview: Chapter 21 – The Final Hero Project

Chapter 21: The Final Project

1. 21.1: What you are building
2. 21.2: High level architecture
3. 21.3: Feature set breakdown
4. 21.4: Implementation approach
5. 21.5: Testing and deployment
6. Closing thoughts