Skip to content
C Codeloom

Topics / React

React

Component-driven UI. Hooks, state, and modern React patterns.

Browse 20 tutorials → Other topics

Why learn React?

  • The most widely-used UI library on the web.

  • Component thinking transfers to Vue, Svelte, Solid, and React Native.

  • The job market is enormous and stable.

  • A vast ecosystem of libraries — routing, data fetching, forms, animation.

What you can build with React

Single-page web apps Dashboards and admin panels Mobile apps via React Native Composable design systems

React tutorials

20 articles

Hand-written tutorials, ordered as a recommended learning path.

  1. 01 What is React? A clear, professional introduction to React — what it is, the problem it solves, how it compares to vanilla JavaScript, and what you can build with it as a beginner.
  2. 02 Setup with Vite A practical walkthrough for creating your first React 19 project with Vite — installing Node.js, scaffolding the app, understanding the file layout, and running the dev server.
  3. 03 Components & JSX A thorough beginner's guide to React components and JSX — how JSX compiles, the rules that catch beginners, composition, conditional rendering, and rendering lists with keys.
  4. 04 Props & State A practical beginner's guide to React props and state — how data flows down through props, how state holds data that changes over time, and the rules that keep your UI predictable.
  5. 05 useState & useEffect A focused beginner's guide to React's two essential hooks — useState for component state and useEffect for side effects like data fetching, subscriptions, and timers.
  6. 06 Conditional Rendering A practical guide to conditional rendering in React — early returns, ternaries, the && shortcut and its zero pitfall, component maps, and the loading/error/empty pattern.
  7. 07 Lists & Keys A practical guide to rendering lists in React with .map() — why the key prop matters, the difference between stable and index keys, and the bugs that come from getting keys wrong.
  8. 08 Forms A complete guide to controlled forms in React — the value/onChange pattern, handling many fields with one handler, submit handling, basic validation, and textarea and select.
  9. 09 What Is Next.js? A clear introduction to Next.js — what it is, why it exists on top of React, what the App Router and Server Components actually do, and where it fits compared to plain React, Astro, and Remix.
  10. 10 Context API A practical guide to React's Context API — createContext, Provider, and useContext — with the cases it solves cleanly and the cases where you should reach for a state library instead.
  11. 11 Custom Hooks Extract stateful logic into reusable custom hooks. The use-prefix rule, three examples (useLocalStorage, useDebounce, useToggle), tuple vs object return values, and how to test them.
  12. 12 TanStack Query Learn how TanStack Query replaces useEffect-based data fetching with caching, background refetching, and request deduplication that scales to real apps.
  13. 13 Zustand Skip the reducer boilerplate. Zustand gives React apps a tiny global store with hooks, selectors, and middleware in fewer than 100 lines of API.
  14. 14 Error Boundaries Build a class-based React error boundary, understand getDerivedStateFromError and componentDidCatch, design fallback UI, and learn why async errors need different handling.
  15. 15 Performance A practical playbook for React performance. Profile with React DevTools, apply React.memo deliberately, fix key issues, virtualize long lists, and avoid premature optimization.
  16. 16 React Router Learn React Router's modern data APIs. Install, create a browser router, define routes, navigate with Link and useNavigate, and use loaders and actions for data.
  17. 17 Suspense & Lazy Use React.lazy and Suspense to code-split a React app, design fallback UI, place boundaries thoughtfully, and understand how Suspense extends to data fetching.
  18. 18 useMemo & useCallback A practical guide to React's useMemo and useCallback hooks, covering referential equality, when memoization helps performance, when it backfires, and how to profile first.
  19. 19 useReducer Understand React's useReducer hook, its signature, action shape, when to migrate from useState, and how to build a small state machine pattern for predictable UI logic.
  20. 20 Server Components A clear, practical explanation of React Server Components: the runtime model, the boundary between server and client, data fetching, and the tradeoffs.