What You'll Learn in React
Beginner
Introduction
Learn what React is and why it’s used to build UIs.
Setup
Create a new React project with Vite.
JSX
Write UI markup directly in JavaScript with JSX.
Components & Props
Build reusable components and pass data with props.
Rendering Lists & Keys
Render arrays of data and understand the key prop.
Conditional Rendering
Show or hide UI based on conditions.
Handling Events
Respond to clicks, input, and other user interactions.
useState & State
Give components memory with the useState hook.
Forms & Controlled Inputs
Build forms with controlled input elements.
Component Composition
Compose components together using children.
Styling in React
CSS files, CSS Modules, and inline styles.
Fragments & Portals
Group elements without extra DOM nodes, and render outside the tree.
Intermediate
useEffect & Side Effects
Synchronize components with external systems.
Component Lifecycle
Understand mounting, updating, and unmounting.
Lifting State Up
Share state between sibling components.
Context API
Avoid prop drilling with React Context.
useRef & Refs
Access DOM nodes and persist mutable values.
Custom Hooks
Extract and reuse stateful logic across components.
Hooks Overview
The Rules of Hooks and a map of every hook covered here.
useLayoutEffect
Fire an effect synchronously before the browser paints.
useImperativeHandle
Customize the ref instance value exposed by a component.
useReducer
Manage complex state transitions predictably.
useMemo & useCallback
Avoid unnecessary recalculations and re-renders.
useTransition
Mark a state update as low-priority to stay responsive.
useDeferredValue
Defer re-rendering a non-urgent part of the UI.
useId
Generate unique, SSR-safe IDs for accessibility.
useSyncExternalStore
Safely subscribe to a store outside of React.
useDebugValue
Label a custom hook’s value in React DevTools.
Error Boundaries
Catch rendering errors gracefully.
Advanced
The use() Hook
Read Promises and Context conditionally with use().
useOptimistic
Show an expected result before an async action finishes.
useActionState
Track a form Action’s pending state and result.
useFormStatus
Read the pending status of the nearest parent form.
React Router
Add client-side routing to a React app.
Performance Optimization
React.memo, code splitting, and avoiding re-renders.
Suspense & Lazy Loading
Load components and data with Suspense.
Server vs Client Components
Understand the React Server Component model.
Data Fetching Patterns
Fetch, cache, and manage server data.
Testing React Components
Test components with React Testing Library.
React 19 Features
Actions, the use() hook, and other new APIs.
State Management Libraries
When and why to reach for Redux, Zustand, or similar.
Best Practices
Write maintainable, scalable React applications.
Finished Learning React?
Test your knowledge with MCQs, output-based questions, and interview questions.