React Tutorials
Learn React from scratch to Staff Engineer level. Progressive tutorials designed to build your skills step by step.
Beginner
12 tutorialsJavaScript Fundamentals: Getting Started
Learn the fundamentals of JavaScript - variables, data types, operators, and basic syntax. Essential foundation for React development.
Prerequisites:
Basic HTML & CSS knowledge
JavaScript Functions and Scope
Master JavaScript functions - function declarations, expressions, arrow functions, parameters, and scope. Essential for understanding React components.
Prerequisites:
JavaScript Fundamentals: Getting Started
JavaScript Arrays and Objects
Master JavaScript arrays and objects - the primary data structures used in React. Learn array methods, object manipulation, and destructuring.
Prerequisites:
JavaScript Functions and Scope
Asynchronous JavaScript: Promises and async/await
Master asynchronous JavaScript with Promises and async/await. Essential for API calls, data fetching, and React applications.
Prerequisites:
JavaScript Arrays and Objects
ES6+ JavaScript Features for React
Learn modern JavaScript features essential for React: arrow functions, template literals, modules, and more. These features are used throughout React code.
Prerequisites:
JavaScript Functions and Scope
Introduction to React: Your First Component
Learn the fundamentals of React - what it is, why it exists, and how to create your very first component.
Prerequisites:
Basic JavaScript knowledge, HTML & CSS basics
Understanding Props: Passing Data to Components
Learn how to pass data between components using props and create dynamic, reusable components.
Prerequisites:
Introduction to React
Managing State with useState
Learn how to add interactivity to your components by managing state with the useState hook.
Prerequisites:
Understanding Props
Conditional Rendering and Lists
Learn how to conditionally render content and render lists of items in React.
Prerequisites:
Understanding Props
TypeScript Basics for React Developers
Learn TypeScript fundamentals specifically for React development. Understand type annotations, interfaces, and how to add type safety to your React components.
Prerequisites:
Introduction to React: Your First Component, Basic JavaScript knowledge
Conditional Rendering and Lists in React
Learn how to conditionally render components and display lists of data efficiently in React applications.
Prerequisites:
Understanding Props, Managing State with useState
Event Handling in React
Learn how to handle user interactions like clicks, form submissions, and keyboard events in React components.
Prerequisites:
Understanding Props, Managing State with useState
Intermediate
17 tutorialsJavaScript Closures and Scope Deep Dive
Master JavaScript closures, lexical scope, and how they work. Essential for understanding React hooks and advanced JavaScript patterns.
Prerequisites:
JavaScript Functions and Scope
JavaScript Prototypes and Inheritance
Understand JavaScript's prototype-based inheritance system. Learn how objects inherit properties and methods, and how to work with prototypes.
Prerequisites:
JavaScript Arrays and Objects
JavaScript Design Patterns
Learn common JavaScript design patterns: Module, Singleton, Factory, Observer, and more. Essential for writing maintainable, scalable code.
Prerequisites:
JavaScript Closures and Scope Deep Dive
JavaScript Runtime Execution Order: Event Loop Deep Dive
Master JavaScript's execution order: understand how synchronous code, Promises, and setTimeout execute. Learn the event loop, call stack, microtask queue, and macrotask queue.
Prerequisites:
Asynchronous JavaScript: Promises and async/await
Side Effects and useEffect Hook
Master the useEffect hook to handle side effects like data fetching, subscriptions, and DOM manipulation.
Prerequisites:
Managing State with useState
Component Composition and Context
Learn advanced component patterns including composition, context API, and avoiding prop drilling.
Prerequisites:
Side Effects and useEffect Hook
Handling Forms and User Input
Learn how to handle forms, controlled components, validation, and user interactions in React.
Prerequisites:
Managing State with useState
Error Handling and Error Boundaries
Learn comprehensive error handling strategies including error boundaries, error logging, and graceful error recovery in React applications.
Prerequisites:
Handling Forms and User Input
Advanced TypeScript Patterns in React
Learn advanced TypeScript patterns for React: generics, utility types, type guards, and complex component typing.
Prerequisites:
TypeScript Basics for React Developers, Component Composition and Context
Throttling and Debouncing in React
Learn how to optimize event handlers and API calls using throttling and debouncing techniques to improve performance and user experience.
Prerequisites:
Managing State with useState, Understanding useEffect...
Component Composition and Patterns
Learn advanced component composition techniques, children props, render props, and compound components to build flexible, reusable React components.
Prerequisites:
Understanding Props, Managing State with useState...
Building Custom Hooks
Learn how to extract component logic into reusable custom hooks to share stateful logic between components.
Prerequisites:
Managing State with useState, Understanding useEffect...
Error Boundaries in React
Learn how to catch and handle errors in React component trees using Error Boundaries to prevent entire applications from crashing.
Prerequisites:
Understanding Props, Managing State with useState...
React.memo and Performance Optimization
Learn how to optimize React component performance using React.memo, useMemo, useCallback, and other performance optimization techniques.
Prerequisites:
Managing State with useState, Understanding useEffect...
TypeScript Interfaces: Comprehensive Guide
Master TypeScript interfaces - learn how to declare, extend, and use interfaces effectively in React applications for type safety and better code organization.
Prerequisites:
TypeScript Basics for React Developers, Understanding Props
Type Aliases and Advanced Type Declarations
Master TypeScript type aliases, union types, intersection types, and advanced type declaration patterns for flexible and powerful type definitions.
Prerequisites:
TypeScript Basics for React Developers, TypeScript Interfaces: Comprehensive Guide
TypeScript Generics: Creating Functions with Dynamic Typing
Learn how to create functions with dynamic typing using TypeScript generics, similar to createContext. Master generic functions, type inference, and how to build flexible, reusable functions.
Prerequisites:
TypeScript Basics for React Developers, TypeScript Interfaces: Comprehensive Guide
Advanced
7 tutorialsAdvanced JavaScript: Memory Management and Performance
Deep dive into JavaScript memory management, garbage collection, memory leaks, and performance optimization techniques.
Prerequisites:
JavaScript Closures and Scope Deep Dive
Functional Programming in JavaScript
Master functional programming concepts: pure functions, immutability, higher-order functions, and functional composition.
Prerequisites:
JavaScript Functions and Scope
Performance Optimization Techniques
Learn advanced performance optimization including memo, useMemo, useCallback, and React.memo.
Prerequisites:
Component Composition and Context
Building Custom Hooks
Create reusable custom hooks to extract component logic and share it across your application.
Prerequisites:
Performance Optimization Techniques
Code Splitting and Lazy Loading
Optimize your application's load time by splitting code and lazy loading components.
Prerequisites:
Building Custom Hooks
Testing React Components
Learn comprehensive testing strategies for React components using React Testing Library and Jest.
Prerequisites:
Code Splitting and Lazy Loading
TypeScript Generics and Utility Types Deep Dive
Master TypeScript generics, conditional types, mapped types, and advanced utility type patterns for complex React applications.
Prerequisites:
Advanced TypeScript Patterns in React, Performance Optimization Techniques
Expert
10 tutorialsJavaScript Engine Internals: V8 and Execution
Deep dive into JavaScript engine internals: how V8 works, execution context, call stack, event loop, and optimization techniques.
Prerequisites:
Advanced JavaScript: Memory Management and Performance
Concurrent Rendering and Suspense
Deep dive into React's concurrent features, Suspense boundaries, and how React prioritizes updates.
Prerequisites:
Building Custom Hooks
Advanced State Management Patterns
Explore advanced state management techniques including reducer patterns, state machines, and architectural patterns.
Prerequisites:
Concurrent Rendering and Suspense
React 19: Optimistic UI Updates with useOptimistic
Master the useOptimistic hook to create instant, responsive user interfaces with automatic rollback on errors.
Prerequisites:
Advanced State Management Patterns
React 19: Server Actions and useActionState
Learn to build forms with server actions using useActionState, the React 19 replacement for useFormState.
Prerequisites:
React 19: Optimistic UI Updates with useOptimistic
React 19: The use Hook - Reading Promises and Context
Master the use hook to handle promises and context values directly in render functions with Suspense support.
Prerequisites:
React 19: Server Actions and useActionState
React 19: useFormStatus for Form State Access
Learn to use useFormStatus to access form submission status from child components without prop drilling.
Prerequisites:
React 19: The use Hook - Reading Promises and Context
React 19 Server Components and Next.js Integration
Master React Server Components, streaming SSR, and integration with Next.js App Router.
Prerequisites:
Advanced State Management Patterns
Advanced Hooks Patterns and Hook Composition
Explore advanced hook patterns, hook composition, and creating sophisticated custom hooks.
Prerequisites:
React 19 Server Components
Advanced TypeScript: Conditional Types and Type Manipulation
Master TypeScript's most advanced features: recursive conditional types, type-level programming, and building complex type systems for React applications.
Prerequisites:
TypeScript Generics and Utility Types Deep Dive, Creating Your Own React Library
Staff Engineer
7 tutorialsJavaScript Architecture and System Design
Master-level JavaScript architecture: building scalable systems, microservices, design patterns at scale, and architectural decisions.
Prerequisites:
JavaScript Engine Internals: V8 and Execution
React Internals: How React Works Under the Hood
Deep dive into React's internal architecture, reconciliation algorithm, fiber architecture, and rendering pipeline.
Prerequisites:
Advanced State Management Patterns
Building Scalable React Applications: Architecture Patterns
Learn enterprise-level architecture patterns, code organization, and strategies for building maintainable large-scale applications.
Prerequisites:
React Internals: How React Works Under the Hood
Creating Your Own React Library
Build a reusable React library from scratch, including hooks, components, TypeScript types, build configuration, and publishing.
Prerequisites:
Building Scalable React Applications
Performance Optimization at Enterprise Scale
Deep dive into performance optimization strategies, profiling, monitoring, and optimization patterns for large-scale applications.
Prerequisites:
Creating Your Own React Library
Design Systems and Component Libraries
Build comprehensive design systems, component libraries, and documentation systems used by large engineering organizations.
Prerequisites:
Performance Optimization at Enterprise Scale
TypeScript at Scale: Type-Safe Architecture
Design type-safe architectures for large-scale React applications. Learn monorepo type strategies, shared type libraries, API contract types, and enterprise patterns.
Prerequisites:
Advanced TypeScript: Conditional Types and Type Manipulation, Design Systems and Component Libraries