React

Full React course — 127 topics from the basics to advanced use.

Lessons

• What Is React? Components, Elements, and Declarative UI
• Setting Up a Modern React + TypeScript Project with Vite
• Building Your First Component Tree: App, Header, Main, WelcomeCard, Footer
• JSX and TSX: Syntax, Expressions, Attributes, and Composition
• Components: Building Blocks of a React UI
• Props in Depth: Types, Children, and Spreading
• Composing UIs with Children, Layouts, and Slots
• State in Depth: useState, Updates, and Batching
• Handling Events in React
• Conditional Rendering Patterns
• Rendering Lists and Understanding Keys
• Building Forms in React
• useRef: DOM Access and Mutable Values
• Callback Refs, Ref Forwarding, and Imperative Handles
• Effects: Dependencies and Cleanup
• Effects: When Not to Use One
• memo, useMemo, and useCallback: Deliberate Memoization
• The Rules of Hooks and Why They Exist
• Building Custom Hooks to Share Logic
• Context: Providers, Performance, and When Not to Use It
• useReducer: Actions, Dispatch, and Predictable State Transitions
• State Architecture: A Decision Framework for Where State Belongs
• Client-Side Routing with React Router
• Fetching Data in React: Loading, Error, and Server State
• Structuring an API Layer: From Component to Backend
• A Complete Error-Handling Strategy for React Apps
• Catching Render Errors with Error Boundaries
• The Render Phase, the Commit Phase, and Fiber
• The Reconciliation Algorithm: Type, Keys, and Identity
• Strict Mode and Double-Invoked Effects
• Portals: Rendering Outside the Parent DOM Hierarchy
• Lazy Loading Components with lazy() and Code Splitting
• Suspense Architecture: Boundaries, Nesting, and What It Waits For
• Concurrent Rendering: Transitions, Scheduling, and Responsiveness
• Actions, useActionState, and useOptimistic
• React API Reference: Top-Level and Component APIs
• React API Reference: Hooks Reference
• The use() API: Reading Promises and Context
• Server and Client Components
• CSR, SSR, SSG, and Hybrid Rendering Strategies
• Hydration: How It Works and How to Debug Mismatches
• React + TypeScript: The Complete Typing Surface
• Typing Components That Wrap Native HTML Elements
• Generic Components: Tables, Selects, and Forms
• Polymorphic Components: One Component, Many Tags
• Component Design Patterns: Composition, Compound Components, Render Props, and Headless UI
• React Architecture: Scaling from a Small Project to a Feature-Based Codebase
• The State Management Ecosystem: Categories, Libraries, and When You Actually Need One (ECOSYSTEM)
• Redux Toolkit Awareness: Store, Slices, Thunks, and RTK Query (ECOSYSTEM, optional)
• Managing Server State: Caching, Freshness, and Mutations
• The Forms Ecosystem: From Native Inputs to Schema Validation
• Authentication Fundamentals: Login, Sessions, and Secure Logout
• Authorization: Roles, Permissions, and the Real Security Boundary
• Accessibility in React: Semantics, Focus, and ARIA
• SEO in a React App: Metadata, Crawlability, and the CSR Limitation
• Styling Approaches in React: Choosing the Right Tool
• Typing Styles in React: className, CSS Modules, and CSSProperties
• Building Responsive Layouts: Mobile-First, Flexbox, Grid, and Fluid Sizing
• Internationalizing a React App: Locale, Translation, Formatting, and RTL
• Wrapping Browser APIs in Typed Custom Hooks: Storage, URL, Observers, and More
• WebSockets and Real-Time UI
• Files and Uploads
• Web Workers
• Service Workers and Progressive Web Apps
• Performance: Render Cost, Re-renders, Memoization & Bundle Size
• Performance: Core Web Vitals & Large-Scale UI Architecture
• React Profiling: Finding and Diagnosing Real Bottlenecks
• Mastering React DevTools: Components, Profiler, and Re-render Investigation
• A Systematic React Debugging Flow: Console, Breakpoints, Network, and Common Bug Categories
• Debugging Hydration Mismatches and React Concurrency Issues
• Testing Fundamentals: Why We Test and How Tests Are Organized
• Testing TypeScript React Code with Vitest
• Testing React Components with React Testing Library
• End-to-End Testing React Apps with Playwright
• Testing Loading, Success, Error, and Race-Condition States
• Mocking Functions, Modules, APIs, and Browser Behavior Without Over-Mocking
• XSS, Injection, and Unsafe HTML
• Cookies, CSRF, Secrets, and Supply-Chain Risk
• dangerouslySetInnerHTML in Depth
• CORS and the Same-Origin Policy
• Environment Variables in React Apps
• Managing Dependencies in a React Project
• Code Quality with ESLint and Prettier
• Git Workflow for a React Project
• Continuous Integration and Deployment for React Apps
• Build and Bundling: How Your React App Becomes a Website
• Vite in Depth: Configuring the Dev Server and Build
• Path Aliases: Clean Imports with @/
• Monorepos: Sharing Code Across Multiple Apps and Packages (Advanced, Optional)
• Design Systems: Tokens, Components, and Governance
• Form & Input Components: Button, Input, Select, Checkbox
• Overlay, Navigation & Feedback Components
• Headless Components: Behavior Without Presentation
• Building Generic, High-Performance Data Tables
• Debounced Search: Requests, Races, and URL State
• Pagination Strategies and Infinite Scroll with IntersectionObserver
• Building Accessible Drag-and-Drop Interfaces
• Animating React Interfaces: Transitions, State, and Motion
• Advanced Performance Architecture in React Applications
• Finding and Fixing Memory Leaks in React
• Race Conditions in Async React Code
• Building Offline-First React Applications
• Designing Real-Time Data Flow: WebSockets, Hooks, and State
• Clean Code in React and TypeScript
• SOLID Principles Applied to React and TypeScript
• Practical Design Patterns for React + TypeScript
• Modeling UI with State Machines and Discriminated Unions
• Functional Programming Foundations for React
• Immutability in React State
• The Browser Rendering Pipeline
• Networking Fundamentals for React Developers
• HTTP Status Codes: What Your React App Sees From Every Response
• API Design for Frontend Developers: REST, Pagination, and Contracts
• GraphQL Awareness: An Ecosystem Overview for React Developers
• Runtime Data Validation: Trusting Data You Didn't Type-Check
• Observability: Seeing What Your React App Is Actually Doing in Production
• Production Readiness: The Pre-Launch Checklist
• Deploying a React Application
• Reading Legacy React: Class Components and Pre-Hooks Patterns
• React's State of the Art: Stable, Experimental, and Deprecated APIs
• Building the Task Manager: Architecture, Typed Models & the useTasks Hook
• Building the API Dashboard: Typed Client, Debounced Search & Cancellation
• Building the EngiLipi Learning Dashboard: Data Model, Routing & Progress Tracking
• Building a Real-Time Engineering Monitor with WebSockets
• Building an E-Commerce Application: Catalog, Cart, Auth, and Checkout
• Building a Production Admin Dashboard: RBAC, Data Tables, and Theming
• The Capstone: Assembling a Production EngiLipi Application From Everything You've Learned