A hands-on, interactive React learning library — from your first Vite + TypeScript setup to hooks, rendering lists, and performance optimization. Learn by seeing working demos, then reading the code.
22 tutorials · beginner → advanced
Showing 22 tutorials
Scaffold a fast, modern React project using Vite and TypeScript in a few minutes — the setup real teams ship with.
JSX, components, props, state, and hooks basics — the whole foundation with interactive examples and copy-paste code.
Pass data into reusable components with props: destructuring, default values, the children prop, and beating prop drilling.
Show and hide UI the React way: &&, ternaries, early returns, and switch — plus the gotchas that render a stray 0 or false.
Build forms the React way: controlled text, checkbox, select, and textarea inputs, multi-field state, submission, and validation.
Wire up onClick, onChange, onSubmit, and keyboard events the React way — synthetic events, passing arguments, preventDefault, and event bubbling explained with live demos.
Give components memory with useState — basics, multiple states, forms, and updating arrays and objects the right way.
Run side effects the React way: dependencies, cleanup, API calls, and timers — with the pitfalls that cause bugs.
Master useState, useEffect, useContext, useReducer, and custom hooks — plus the Rules of Hooks and best practices.
Create a context, provide and consume it, pair it with useState, and share state across unrelated branches of the tree — plus when NOT to reach for it.
Centralize related state transitions with a reducer and dispatch, know when to reach for it over useState, and pair it with context for a mini-Redux pattern.
Access DOM nodes directly, store mutable values that don't trigger re-renders, and track previous state — plus useRef vs useState.
Extract reusable stateful logic into your own hooks: useToggle, useLocalStorage, useDebounce, and useFetch — plus the rules for composing hooks safely.
Cache expensive calculations and stabilize object/array references for React.memo — plus useMemo vs useCallback and when memoizing isn't worth it.
Stop unnecessary re-renders by memoizing functions with useCallback — when it helps, when it hurts, and how to measure.
Skip re-rendering components with unchanged props via shallow comparison, pair it with useCallback and useMemo, and write custom comparison functions.
Shrink your bundle and speed up first load: React.lazy, Suspense fallbacks, route-based splitting, preloading on intent, and error boundaries for failed chunks.
Render, add, remove, filter, and sort lists in React — with proper keys and the mistakes that break re-renders.
Local state, Context, Zustand, or Redux Toolkit? Understand the four kinds of state, the re-render trade-offs, and a decision tree for picking the right tool.
Replace hand-rolled useEffect fetches with TanStack Query: useQuery, query keys, caching, mutations, optimistic updates, and staleTime vs gcTime.
Build multi-page SPAs with React Router: routes, Link and NavLink, dynamic params, nested layouts with Outlet, programmatic navigation, and protected routes.
Test behavior, not implementation: Vitest + React Testing Library setup, queries, userEvent, async UI, mocking with vi.fn(), and testing hooks and context.