React.js • 60 Chapters
Complete React.js Course
Complete React.js course with 60 chapters covering components, JSX, state, hooks, performance, React 19.3 features, routing, testing, TypeScript, accessibility, server rendering, deployment, and application architecture.
Chapter 1: React Overview and Modern Project Setup
What React Is, How React Updates a User Interface, React 19.3 and Modern Features, Choosing a Framework or Build Tool, Creating and Running a React Project
Open chapterChapter 2: JavaScript Essentials for React
Variables Objects and Arrays, Functions Arrow Functions and Closures, Destructuring and Spread, Array map filter and reduce, Modules Promises and async await
Open chapterChapter 3: JSX Fundamentals
What JSX Represents, Embedding JavaScript Expressions, JSX Attributes and className, Fragments and Multiple Elements, JSX Rules and Common Syntax Errors
Open chapterChapter 4: Components and Component Trees
Function Components, Nesting Components, Component Naming Rules, Component Purity, Designing a Component Tree
Open chapterChapter 5: Props and Data Flow
Passing Props, Reading Props, Default Values and Optional Props, Passing Objects Arrays and Functions, One-Way Data Flow
Open chapterChapter 6: State with useState
What State Represents, Creating State with useState, Updating from the Previous Value, Objects and Arrays in State, Choosing the Right State Shape
Open chapterChapter 7: Events and User Interaction
Click Events, Input and Change Events, Passing Event Handlers, Event Propagation, Preventing Default Browser Behavior
Open chapterChapter 8: Conditional Rendering
if Statements in Components, Ternary Expressions, Logical AND Rendering, Returning null, Keeping Conditions Readable
Open chapterChapter 9: Rendering Lists and Choosing Keys
Rendering Arrays with map, Stable Keys, Why Array Index Keys Can Fail, Filtering Before Rendering, Updating Items in a List
Open chapterChapter 10: Forms and Controlled Inputs
Controlled Text Inputs, Checkboxes and Radio Buttons, Select Elements, Submitting Forms, Form Validation and Error Messages
Open chapterChapter 11: Sharing State Between Components
Lifting State Up, Single Source of Truth, Passing State Down, Passing Updates Up, Avoiding Duplicate State
Open chapterChapter 12: Component Composition
Using children, Wrapper Components, Slots with Named Props, Composition vs Configuration, Reusable Layout Patterns
Open chapterChapter 13: Thinking in React
Breaking a Screen into Components, Building a Static Version First, Identifying Minimal State, Finding State Ownership, Adding Inverse Data Flow
Open chapterChapter 14: Effects with useEffect
When an Effect Is Appropriate, Connecting to External Systems, Effect Dependencies, Cleanup Functions, Avoiding Unnecessary Effects
Open chapterChapter 15: Effect Dependencies and Synchronization
Reactive Values, Dependency Arrays, Stale Closures, Separating Independent Effects, Removing Effect Dependencies Safely
Open chapterChapter 16: Refs with useRef
Persistent Mutable Values, Reading DOM Nodes, Refs vs State, Avoiding Render-Time Ref Reads, Common Ref Patterns
Open chapterChapter 17: DOM Interaction and Ref Callbacks
Focusing Elements, Measuring DOM Elements, Scrolling Elements into View, Callback Refs, Managing Lists of Refs
Open chapterChapter 18: Reducers with useReducer
Reducer Fundamentals, Action Objects, Immutable State Updates, Dispatching Actions, Reducer Design for Complex State
Open chapterChapter 19: Context
Creating Context, Providing Context Values, Reading Context, Combining Context with Reducers, Avoiding Overuse of Context
Open chapterChapter 20: Custom Hooks
What a Custom Hook Is, Extracting Reusable State Logic, Hook Naming and Rules, Custom Hooks with Effects, Designing Clear Hook APIs
Open chapterChapter 21: Memoization with useMemo
What useMemo Does, Memoizing Expensive Calculations, Dependencies and Recalculation, When useMemo Does Not Help, Measuring Before Memoizing
Open chapterChapter 22: Stable Callbacks with useCallback
What useCallback Does, Function Identity, Callbacks Passed to Memoized Children, Dependencies, When to Remove useCallback
Open chapterChapter 23: React memo and Render Optimization
What React memo Does, Prop Equality, Stable Props, Avoiding Premature Memoization, Diagnosing Re-Renders
Open chapterChapter 24: Transitions with useTransition
Urgent vs Non-Urgent Updates, Starting a Transition, Pending UI, Transitions and Navigation, Avoiding Incorrect Transition Usage
Open chapterChapter 25: Deferred Rendering with useDeferredValue
What a Deferred Value Is, Keeping Inputs Responsive, Showing Stale Content, Deferred Values vs Debouncing, Combining Deferred Values with Memoization
Open chapterChapter 26: Suspense Fundamentals
What Suspense Coordinates, Suspense Boundaries, Fallback UI, Nested Suspense, Designing Reveal Sequences
Open chapterChapter 27: Error Boundaries
What Error Boundaries Catch, Creating an Error Boundary, Fallback Interfaces, Reset and Recovery Patterns, Errors Outside Error Boundaries
Open chapterChapter 28: Portals
What a Portal Does, Rendering Modal Content, Event Behavior Through Portals, Accessible Dialog Structure, Choosing a Portal Container
Open chapterChapter 29: Fragments and Fragment Refs
Why Fragments Exist, Keyed Fragments, Fragment Refs in React 19.3, Grouping DOM Interactions, When a Wrapper Element Is Better
Open chapterChapter 30: View Transitions in React 19.3
ViewTransition Component, Animating Enter and Exit, Animating Reordering, Naming View Transitions, Accessibility and Reduced Motion
Open chapterChapter 31: React Compiler
What React Compiler Optimizes, Compiler-Assisted Memoization, Writing Compiler-Friendly Components, Linting and Compiler Diagnostics, When Manual Memoization Still Matters
Open chapterChapter 32: Actions and useActionState
What an Action Is, useActionState Fundamentals, Pending State, Returning Action Results, Handling Action Errors
Open chapterChapter 33: Optimistic Interfaces with useOptimistic
What Optimistic UI Means, Adding Optimistic Items, Reconciling Server Results, Rolling Back Failures, Choosing Safe Optimistic Operations
Open chapterChapter 34: The use API
Reading a Promise with use, Reading Context with use, Suspense Integration, Promise Identity, Where use Differs from Hooks
Open chapterChapter 35: Form Actions and Progressive Enhancement
Form action Functions, FormData, Pending Form State, Resetting Forms, Server-Action Concepts
Open chapterChapter 36: Data Fetching Patterns
Fetching in an Effect, Loading Error and Empty States, Avoiding Race Conditions, Caching Concepts, Framework Data Loading
Open chapterChapter 37: HTTP APIs and Async User Interfaces
GET Requests, POST and Mutation Requests, AbortController, Retry Decisions, Normalizing API Errors
Open chapterChapter 38: Routing Concepts
Client-Side Routing, Route Parameters, Nested Routes, Navigation Links, 404 and Error Routes
Open chapterChapter 39: React Router Applications
Creating a Router, Route Configuration, Loaders and Actions, Nested Layouts, Navigation State
Open chapterChapter 40: External Stores and State Architecture
useSyncExternalStore, Local State vs Shared State, Store Subscriptions, Selectors and Derived Data, Choosing a State Management Strategy
Open chapterChapter 41: Accessibility in React
Semantic HTML, Labels and Form Controls, Keyboard Interaction, Focus Management, ARIA When Native HTML Is Not Enough
Open chapterChapter 42: Styling React Interfaces
Plain CSS, Inline Styles, Conditional Class Names, CSS Custom Properties, Organizing Component Styles
Open chapterChapter 43: CSS Modules and Design Systems
CSS Module Basics, Scoped Class Names, Design Tokens, Reusable UI Primitives, Theme Architecture
Open chapterChapter 44: Component Testing
Testing Behavior, Rendering a Component in Tests, Querying Accessible Elements, Simulating User Interaction, Testing Conditional UI
Open chapterChapter 45: Integration Testing
Testing Multiple Components Together, Mocking Network Boundaries, Testing Routing, Testing Forms, Avoiding Fragile Implementation Tests
Open chapterChapter 46: TypeScript with React
Typing Component Props, Typing State, Typing Events, Typing Refs, Reusable Generic Components
Open chapterChapter 47: Performance Profiling
React DevTools Profiler, Profiler Component, Finding Expensive Renders, Measuring Interaction Cost, Validating an Optimization
Open chapterChapter 48: Code Splitting and Lazy Loading
React lazy, Suspense for Lazy Components, Route-Level Splitting, Preloading Concepts, Handling Lazy-Load Failures
Open chapterChapter 49: Security in React Applications
Escaped Text Rendering, dangerouslySetInnerHTML Risks, URL and Link Validation, Protecting Tokens, Client Security vs Server Security
Open chapterChapter 50: Authentication Interfaces
Representing Authentication State, Protected UI, Login and Logout Flows, Permission-Based Rendering, Session Expiration UX
Open chapterChapter 51: Internationalization and RTL Layouts
Language Selection, Formatting Dates and Numbers, Translation Message Design, Arabic and Persian RTL, Keeping Code and Math LTR
Open chapterChapter 52: Responsive React Interfaces
Mobile-First Layouts, Responsive Component Patterns, Container Queries Concepts, Responsive Navigation, Preventing Horizontal Overflow
Open chapterChapter 53: Animation and Motion
CSS Transitions, State-Driven Animation, Enter and Exit Patterns, Coordinating Motion with Transitions, Reduced-Motion Preferences
Open chapterChapter 54: Server Rendering and Hydration
Why Server Rendering Is Used, Rendering HTML on the Server, hydrateRoot, Hydration Mismatches, Streaming and Suspense
Open chapterChapter 55: Server Components Concepts
What Server Components Are, Server vs Client Components, use client Boundaries, Data Access on the Server, Serialization Boundaries
Open chapterChapter 56: Framework Integration and Full-Stack React
Why React Recommends Frameworks, Client Rendering, Server Rendering, Static Generation, Choosing Rendering Per Route
Open chapterChapter 57: Deployment and Production Builds
Creating a Production Build, Static Hosting, Environment Configuration, Caching Static Assets, Deployment Verification
Open chapterChapter 58: Monitoring and Error Reporting
Capturing Runtime Errors, User-Facing Error Recovery, Performance Metrics, Logging Client Context, Release Tracking
Open chapterChapter 59: Application Architecture and Maintainability
Feature-Based Folders, Component Boundaries, State Boundaries, Dependency Direction, Refactoring Without Breaking Behavior
Open chapterChapter 60: Capstone Projects and Production Checklist
Planning a Complete React App, Building a Data-Driven Dashboard, Building an Accessible Form Workflow, Building a Routed Multi-Page Experience, Production Review Checklist
Open chapter