Skip to content
Codeloom

Topics / React

React

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

Browse 65 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

65 articles · page 1 of 4

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 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.
  10. 10 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.
  11. 11 TanStack Query Learn how TanStack Query replaces useEffect-based data fetching with caching, background refetching, and request deduplication that scales to real apps.
  12. 12 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.
  13. 13 Custom Hooks Patterns Master React custom hooks with practical patterns for data fetching, form handling, debouncing, and more. Learn when and how to extract reusable logic.
  14. 14 Form Handling Master React forms with controlled and uncontrolled inputs, validation patterns, and React Hook Form. Build accessible, performant forms step by step.
  15. 15 Performance Guide Optimize React performance with React.memo, useMemo, and useCallback. Learn when to use each, how to profile, and avoid common pitfalls.
  16. 16 Portals & Modals Build accessible modals, tooltips, and dropdowns with React Portals. Learn focus trapping, keyboard handling, and reusable modal patterns.
  17. 17 State Management Compare React state management solutions: Context API, Redux Toolkit, and Zustand. Learn when to use each with practical examples and trade-offs.
  18. 18 Suspense & Transitions Learn how to use React Suspense and useTransition to build smooth async UIs. Master concurrent rendering, loading states, and transition patterns.
  19. 19 Testing Library Guide Learn to test React components with React Testing Library. Covers rendering, user events, async testing, mocking, and accessibility-driven queries.
  20. 20 React vs Vue vs Svelte Compare React, Vue, and Svelte across performance, developer experience, ecosystem, and hiring. Find the right frontend framework for your next project.