React: The Complete Guide
Components, hooks, state, routing and data fetching.
Taught by Sagar Khadka · Full-Stack Developer
What you'll learn
- Build a React app with Vite from reusable components that use JSX, props and children
- Manage local and shared state with useState, useReducer, context and custom hooks
- Fetch, cache and update server data with useEffect cleanup and TanStack Query
- Handle forms with controlled inputs, React 19 actions, useActionState and useOptimistic
- Add nested routes, URL parameters and data loaders with React Router
- Test components with Vitest and React Testing Library and fix common performance problems
About this course
React is the most widely used library for building user interfaces, and this complete guide teaches it the way it is written in 2026. It is for developers who are comfortable with modern JavaScript and want to build real single-page applications with confidence. You will set up a project with Vite, write components with JSX and props, manage state with useState and useReducer, and learn when useEffect is the right tool and when it is not. You will fetch data with TanStack Query, handle forms with React 19 actions and useActionState, share state with context and custom hooks, and add multi-page navigation with React Router. The course closes with testing in Vitest and React Testing Library and practical performance work, including the React Compiler. Prerequisites: JavaScript fundamentals including arrays, objects, modules and async/await.
Course content
8 lessons- 1Why React, and Setting Up with ViteDeclarative UI, the component model, a Vite project and the rules of JSX.Preview
- 2Components, Props and Rendering ListsPass data with props and children, render lists with stable keys and show content conditionally.
- 3State and Events with useStateMake components interactive with state, update it immutably and lift it up to share it.
- 4Effects and Fetching Server DataSynchronise with the outside world using useEffect, then fetch and cache data with TanStack Query.
- 5Forms in React 19: Controlled Inputs and ActionsControlled inputs, form actions with useActionState, pending states and optimistic updates.
- 6Context, useReducer and Custom HooksShare state without prop drilling, manage complex updates with reducers and reuse logic with custom hooks.
- 7Routing with React RouterAdd pages with nested layouts, URL parameters, loaders, links and a not-found route.
- 8Testing and PerformanceTest components the way users use them with Vitest and Testing Library, then find and fix slow renders.