Contents
React
A library for user interfaces: components, JSX, state, effects, routing and talking to a server.
1.Getting started
- What React isWhy React exists, how it differs from changing the DOM by hand and what the course covers.
- Creating a projectA new project with Vite, starting the development server and a tour of the files and folders.
- JSXMarkup inside JavaScript: expressions in curly braces, attributes and differences from HTML.
- ComponentsHow to move part of the interface into its own component, put it in a file and render it on the page.
- PropsHow to pass data into a component with props, set default values and pass numbers and objects.
- Children and compositionThe children prop: wrapper components that can hold any markup.
- Lists and keysHow to render an array of data with map and why every list item needs a key.
- Conditional renderingHow to show different markup depending on data: if, the ternary operator and &&.
2.State and events
- EventsHow to respond to clicks, typing and other user actions with onClick, onChange and the event object.
- State: useStateThe useState hook: how a component remembers data between renders and updates the page when it changes.
- Objects and arrays in stateHow to add, remove and change array items and object fields in state without mutating them.
- Derived valuesWhat to keep in state and what to compute while rendering: counters, filters and totals from data you already have.
- Lifting state upHow a child component changes its parent's state: functions in props and shared state for several components.
- Forms and controlled inputsControlled input fields, submitting a form without reloading the page and a form for adding tasks.
- useReducerThe useReducer hook: all state update logic in one reducer function and actions instead of direct setter calls.
3.Effects and hooks
- Effects: useEffectWhat a side effect is, how to run it after rendering and how the dependency array controls re-runs.
- Effect cleanupThe cleanup function in useEffect: how to stop a timer and remove an event listener when a component goes away.
- Fetching data from an APIAn API request in an effect, loading and error states and protection from stale responses, using a blog as the example.
- useRefThe useRef hook: access to a DOM element, for example to focus a field, and keeping a value without re-rendering.
- ContextcreateContext and useContext: how to pass data to deeply nested components without a chain of props.
- Custom hooksHow to move repeated component logic into your own hook: useFetch for the blog and the rules of hooks.
- useMemo and useCallbackHow to remember a calculation result or a function between renders and when it actually matters.
4.Routing
- React Router: setup and routesSeveral pages in one app: installing React Router, routes, Link and NavLink and a 404 page.
- Route parameters and navigationA post page at /posts/:id, the useParams hook, links to it and navigating from code with useNavigate.
- Nested routes and layoutsA shared page layout with Outlet, index routes and nested addresses like /posts/:id/comments.
5.A real app
- StylingHow to style components: plain CSS files, className, CSS modules, the style attribute and a word on Tailwind.
- Forms with actionsReact 19 features: a function in the form action attribute, the useActionState hook and useFormStatus for the submit button.
- State management librariesWhen useState and context are not enough: an overview of state libraries and a short Zustand example.
- Data fetching librariesWhy libraries for server requests exist and a short TanStack Query example: useQuery, the cache and query keys.
- Performance and memoWhen components re-render, how to find the slow spot with the Profiler and how memo skips unnecessary re-renders.
- Error boundariesHow to keep an error in one component from breaking the whole app: an ErrorBoundary component and a fallback UI.
- TestingComponent tests with Vitest and Testing Library: installing, configuring Vite, checking text and user actions.
- Building and deployingThe npm run build command, the dist folder, Vite environment variables and hosting the app on a static host.