React Playground — Learn React Visually, 68 Lessons Free

Most people trying to learn React hit a wall before writing their first component — Node.js installation, npm commands, Vite setup, a terminal, a code editor. This React Playground removes every barrier. Open it in your browser and start writing JSX immediately. React 18 and Babel compile your code right there in the tab, with a live preview that updates as you type.

The playground covers 68 lessons across 26 chapters — a complete curriculum from absolute beginner through production-level React.

Beginner (27 lessons) — JSX basics, function components, props and children, useState with strings and objects, click events, form handling, controlled and uncontrolled inputs, rendering lists, conditional rendering, dynamic lists, keys, useEffect with cleanup, useRef, custom hooks, styling approaches (inline, className, Tailwind), loading states, debugging techniques, and common beginner bugs.

Intermediate (29 lessons) — Lifting state up, component composition, data fetching with loading/error/success states, useMemo, useCallback, React.memo, useContext, useReducer, useId, useDeferredValue, optimistic updates, portals and modals, Suspense and lazy loading, useTransition, error boundaries, accessibility patterns, skeleton loading, responsive patterns, real-world API patterns with AbortController and pagination, and state management at scale (Zustand pattern).

Pro (12 lessons) — Compound components, render props, higher-order components, state machines with useReducer, React DevTools profiling, TypeScript prop types, advanced TypeScript patterns (discriminated unions and generic components), testing strategy (unit and component tests), internationalisation with Intl formatters, and GSAP animations in React (tweens, timelines, ScrollTrigger).

The code editor has JSX syntax highlighting — keywords, hooks, HTML tags, and React component names each appear in a distinct colour, exactly as in VS Code. A draggable handle lets you resize the editor and preview panes to your preferred ratio. Key lessons end with a Quick Check multiple-choice challenge to test recall — active retrieval has been shown to double long-term retention compared to passive reading alone. A console panel below the preview captures console.log, console.warn, and console.error output so you can inspect values without opening browser DevTools.

Progress saves automatically to your browser's localStorage. Close the tab, come back tomorrow, come back in three weeks — your completed lessons and current position are exactly where you left them. No account, no login, no email address required. Every lesson is free, every chapter is free, and the playground will always be free.

Once you are comfortable with React, the JavaScript Playground covers the underlying language in 60 lessons, and the TypeScript Playground adds static typing in 32 lessons — both are free with no install. If you are a freelance React developer, the Freelance Rate Calculator helps you price React projects correctly, and the Freelance Invoice Generator handles client billing — both run entirely in your browser with no sign-up.

The Main Purpose of React — Why It's Used

The main purpose of React is to simplify the development of dynamic, fast, and interactive user interfaces, primarily for single-page web applications. It achieves this by shifting developers away from manual, complex DOM manipulation toward a predictable, state-driven model — you describe what the UI should look like for a given state, and React figures out the minimum set of DOM updates needed to get there.

Core Technical Pillars

Component-Based Architecture — React breaks the UI into modular, self-contained, and reusable code blocks called components. A navigation bar, a button, a form field, a data table — each is a component that can be developed, tested, and reused independently across the application. This composability is why large React codebases stay manageable at scale: each component has a single responsibility and a clear interface (props).

Declarative UI Model — Developers describe how the UI should look for any given state instead of writing manual execution steps. In traditional JavaScript you write imperative instructions: find the element, change its text, toggle a class. In React you write a render function that says "given this data, this is what the UI looks like" — and React handles the how. This makes UI code dramatically easier to reason about, debug, and test.

Virtual DOM — React maintains an in-memory UI representation called the virtual DOM. When state changes, React calculates the difference between the previous and next virtual DOM trees and updates only the changed browser DOM elements. Direct DOM manipulation is one of the slowest operations in a browser — the virtual DOM reconciliation engine minimises it, which is why React UIs feel fast even with frequent state changes.

Unidirectional Data Flow — Data passes exclusively downward from parent to child components via props. This one-way data flow establishes predictable application behaviour: you always know where a piece of data comes from and which components it can reach. Debugging state bugs is far simpler when data cannot flow in arbitrary directions.

Key Benefits

Code Reusability — Component architecture speeds up development cycles by eliminating repeated interface code. A Button component, a Modal, a DataTable — write once, use everywhere, style consistently.

High Performance — The virtual DOM reconciliation engine minimises slow direct browser DOM interactions. React batches updates, defers non-urgent renders with useTransition, and allows fine-grained memoisation with useMemo and React.memo so components only re-render when their data actually changes.

Target Flexibility — Skills transfer cleanly from building web apps with ReactDOM to crafting native mobile applications using React Native. The same component model, the same hooks API, the same mental model — applied to iOS and Android instead of the browser. React has also expanded to server rendering (Next.js), desktop (Electron with React), and even terminal UIs (Ink).

React Hooks Explained — With Live Examples

React hooks are functions that let you use state and other React features inside function components. The playground covers every hook in the standard library with working, editable examples.

useState is the first hook every React developer learns. It adds a piece of state to a component and returns the current value plus a setter function. When you call the setter, React re-renders the component with the new value. The playground teaches useState with three progressive examples: a numeric counter (the simplest case), a controlled text input (string state with immediate feedback), and an object state (showing why you must spread the old state instead of mutating it). You can edit each example live and see precisely what triggers a re-render.

useEffect is one of the most searched React topics — and also one of the most misunderstood. It handles side effects — things that need to happen outside the React render cycle: fetching data, setting up subscriptions, updating the document title, starting timers, and adding event listeners. The dependency array is the key: an empty array runs the effect once on mount, a filled array re-runs it when any dependency changes, and no array runs it after every render. The cleanup function (returned from the effect) runs before the next effect and on unmount, preventing memory leaks. A missing dependency in the array causes stale closures — one of the most common React bugs. Putting a state setter inside the effect with that state in the deps array causes an infinite loop — the effect runs, updates state, which triggers the effect again. The playground shows how to spot and fix both issues. The playground covers useEffect with a real timer cleanup example and a document title tracker — both editable so you can see what happens when you remove the cleanup.

useRef serves two distinct purposes that beginners often confuse. First: accessing a DOM element directly (focus, measure, scroll). Second: storing a mutable value that persists across renders without triggering a re-render — perfect for tracking render counts, animation state, and previous values. The playground shows both uses side by side.

Custom hooks are how React developers share stateful logic between components without duplicating code. A custom hook is just a function that starts with "use" and calls other hooks. The playground shows how to build useCounter (reusable counter logic) and useLocalStorage (persistent state backed by localStorage) — patterns that appear in almost every production React codebase.

useMemo memoises an expensive calculation so it only recomputes when its inputs change. Without it, the calculation runs on every render even if nothing relevant changed. The playground demonstrates filtering a list of items — with useMemo, the filter only runs when the search query or the list changes, not when a completely unrelated state update triggers a re-render. The rule that experienced React developers follow: profile first, add useMemo only when you measure an actual performance problem.

useCallback memoises a function reference so it stays stable across renders. This matters when you pass a callback to a child component wrapped in React.memo — without useCallback, the child re-renders every time the parent renders because a new function object is created each time. The playground demonstrates this with a side-by-side comparison of memoised and non-memoised children to show the exact re-render count difference.

useContext solves prop drilling — the pattern where you pass a value through many component levels just to reach one deeply nested component that needs it. Create a context with createContext, wrap a subtree in the Provider, and call useContext in any descendant to read the current value. The playground covers a theme switcher using context, showing how to change a value at the top of the tree and have it propagate to any depth without manual prop passing.

useReducer is an alternative to useState for complex state logic. Instead of multiple setState calls that can get out of sync, you dispatch action objects and a single reducer function handles all state transitions. The pattern enforces consistency — impossible states become impossible when all transitions go through one function. The playground covers a shopping cart with ADD, REMOVE, and CLEAR actions, showing how reducers make complex state predictable and testable.

React Patterns Every Developer Should Know

Beyond hooks, the playground teaches the component patterns that appear in every serious React codebase.

Getting started with React is easier here than anywhere else — no project setup, no terminal, no package.json. Just open the playground and write your first component in seconds.

Lifting state up is the fundamental React data flow pattern: when two sibling components need to share state, move that state to their closest common parent and pass it down as props. The playground shows a temperature converter where two inputs stay in sync through a shared parent — the canonical React example for this pattern.

Compound components are a pattern for building flexible UI components where the parent and children share implicit state through context. Think of how HTML select and option work together — neither works without the other, but you can arrange options however you like. The playground implements a Tab component using this pattern.

Render props and higher-order components (HOCs) are pre-hooks patterns for sharing component logic that you will still encounter in older codebases and some libraries. The playground covers both with practical examples and explains when to use hooks instead.

Error boundaries are class components that catch JavaScript errors in their child component tree and display a fallback UI instead of crashing the entire app. They are the React equivalent of try/catch for render errors. The playground shows the required getDerivedStateFromError and componentDidCatch lifecycle methods with a realistic error simulation.

React.lazy and Suspense enable code splitting — loading component bundles only when they are needed, reducing the initial bundle size. The playground demonstrates the lazy import pattern and the Suspense fallback prop that shows while the component loads.

React Performance Optimisation

React re-renders a component whenever its state or props change. Understanding when and why components re-render is the key to building fast React applications.

React hooks cheat sheet — all hooks available in the playground as globals: useState, useEffect, useRef, useMemo, useCallback, useContext, useReducer, useId, useTransition, useDeferredValue, useLayoutEffect, useDebugValue, and useSyncExternalStore. Each has at least one dedicated lesson.

React.memo wraps a component to prevent re-renders when its props have not changed. Without it, a child re-renders every time the parent renders. The playground shows the render count difference between a memoised and non-memoised child component — the effect becomes visible when you click a counter in the parent.

useTransition marks a state update as non-urgent, allowing React to defer it while keeping the UI responsive to higher-priority interactions. The playground demonstrates filtering a large list — without useTransition, typing in the search box feels sluggish because React processes both the input update and the expensive filter synchronously. With useTransition, the input updates instantly and the filter catches up.

useDeferredValue is similar to useTransition but works on a value rather than a state update. It is useful when you receive a value from a parent component and want to defer expensive child renders without changing the parent.

Advanced React Hooks

forwardRef lets a parent component pass a ref down through a child component to a DOM element inside it. Without it, refs stop at the component boundary. The playground covers forwardRef with a reusable input component that exposes its underlying DOM node to the parent — a pattern essential for any UI library.

useImperativeHandle (used with forwardRef) lets a child component expose a custom API to its parent via a ref — instead of the raw DOM node, you expose specific methods like focus() and clear(). This gives fine-grained control over what the parent can do with the ref.

useSyncExternalStore safely subscribes React components to external state stores (like Redux, Zustand, or browser APIs) without tearing in concurrent mode. It is the hook that state management libraries use internally. The playground demonstrates building a minimal Zustand-style store with this hook.

useDebugValue adds a label to custom hooks in React DevTools. When you inspect a component using your custom hook, DevTools shows the label next to the hook name — making it easy to see its current state at a glance during debugging. It has no effect in production.

React with TypeScript

TypeScript and React are used together in most modern production projects. TypeScript catches type errors at compile time — wrong prop types, missing required props, incorrect event handler signatures — before they become runtime bugs.

The playground covers TypeScript prop typing with interfaces, event types (React.ChangeEvent, React.FormEvent, React.MouseEvent), and advanced patterns like discriminated unions for state — where the TypeScript type narrows based on a status field so impossible states become type errors. Generic components that work with any data type while staying fully type-safe are also demonstrated with working examples you can edit and run immediately.