React Course
Learn React from JSX and components to hooks, routing, state management, testing and deployment, with simple examples and practice projects.
32 lessons in 11 categories
React Fundamentals
What Is React?
What React is, why it exists, the difference between a library and a framework, what an SPA is, and where React is used -- in plain language, with no code yet.
Creating a React Application
Node.js and npm, creating a new project with Vite, project structure, package.json, npm run dev, and the difference between development and production.
JSX
What JSX is, how it differs from HTML, embedding JavaScript with curly braces { }, attributes and className, JSX rules, and a quick look at conditional rendering.
Components & Props
Components
What a component is, how to write one as a function, how to use (render) it, the naming rule, and reusability -- with simple examples.
Props
What props are, sending data from parent to child, using multiple props, destructuring, default values, and how props differ from regular function parameters.
Component Composition
The children prop, nesting components, and the difference between composition and inheritance -- with a reusable Card component mini project.
State & Events
Events
React's event system -- onClick, defining event handlers, onChange, onSubmit, and the event object -- with simple examples.
State
What state is, how to define it with useState, how to update it, updating based on the previous state, and state immutability -- with simple examples.
Conditional Rendering
Showing different UI based on a condition with if, a ternary (? :), and the && operator, and returning different components based on a condition -- with simple examples.
Lists & Keys
Rendering a list with map(), what the key prop is, why it matters, and the most common mistake -- using the index as the key -- with simple examples.
Hooks
What Are Hooks?
What a hook is, why hooks exist, the Rules of Hooks, and their relationship to function components -- with simple examples.
useEffect
What a side effect is, how to run one with useEffect, the three uses of the dependency array, the cleanup function, and the common infinite loop mistake -- with simple examples.
useRef
DOM references, persistent values across renders, useRef vs useState, and using useRef together with useEffect -- with simple examples.
useMemo & useCallback
What memoization is, caching a calculation's result and an object reference with useMemo, caching a function reference with useCallback, and when NOT to use them -- with simple examples.
Custom Hooks
What a custom hook is, the use prefix and naming rule, using the same hook more than once, and a useFetch example -- with simple examples.
Forms
Controlled Components
What a controlled component is, binding an input to state with value and onChange, using the same pattern for checkboxes/selects -- with simple examples.
Form Handling
Submitting a form with onSubmit, managing multiple fields with a single state object, validation, and displaying error messages -- with simple examples.
Routing
React Router Basics
Adding page navigation to a React app with react-router -- BrowserRouter, Routes, Route, Link, NavLink, and a Not Found page for undefined URLs, with simple examples.
Route Parameters & Navigation
Putting variable values inside a URL (route parameters), reading them with useParams, building nested routes with Outlet, and programmatic navigation with useNavigate -- with simple examples.
API & Data Fetching
Fetching Data
Fetching and sending data to a server in React with fetch -- GET, POST, PUT, DELETE, loading and error handling, with simple examples.
React + REST API
Connecting React to a REST API -- separating the API layer into an api.js module, managing listing, creating, and deleting together, with simple examples.
State Management
Sharing State
Situations where more than one component needs the same state -- lifting state up and the props drilling problem, with simple examples.
Context API
React's built-in solution to props drilling -- createContext, useContext, Provider, and wrapping context in a custom hook, with simple examples.
Advanced React
React Performance
Preventing unnecessary re-renders with React.memo, useMemo, and useCallback, and measuring render times with React's Profiler component -- with simple examples.
Error Boundaries
Class components that catch errors during rendering in React: getDerivedStateFromError, componentDidCatch, the scope of error boundaries, and what they don't catch, with simple examples.
Lazy Loading & Code Splitting
Loading components later with React.lazy, route-based code splitting, using lazy with named exports, and conditional lazy loading -- with simple examples.
Suspense
Suspense's fallback prop, nested Suspense boundaries, integrating Suspense with React 19's use() hook, and what Suspense doesn't do automatically -- with simple examples.
Portals
Rendering components to a different DOM node with react-dom's createPortal -- modals, event bubbling behavior, and setting up a portal target, with simple examples.
Testing
Component Testing
Setting up Vitest and React Testing Library, your first test with render+screen, querying with getByRole/getByLabelText, jest-dom matchers, and testing conditional rendering -- with simple examples.
User Interaction Testing
Realistic interaction simulation with user-event, testing clicks and typing, verifying form submission with vi.fn(), and testing asynchronous UI updates with findBy* -- with simple examples.
Production
Build & Deployment
Making a production build with npm run build, environment variables in Vite (VITE_ prefix, .env), and deploying a fully static React app to Vercel -- with simple examples.
React + Spring Boot Deployment
Deploying React to Vercel, a real Spring Boot REST API to Render (Docker), managing the backend address with environment variables, and production CORS configuration -- with simple examples.