React tutorial

Build fast, interactive user interfaces with React and TypeScript, one component at a time.

Course contents

Introduction to React — What React is and why developers use it, its main features, React versus plain JavaScript, Single Page Applications, the Virtual DOM, the React ecosystem, how an app is put together, and how to install Node.js, create a Vite project, read its files and run it.
TSX Fundamentals — What TSX is and why React uses it, TSX syntax, the rules every TSX element follows, putting values inside { }, comments, rendering elements to the page, and Fragments.
Components — What components are, functional components, creating and typing components with props, rendering, composition, reusable components, importing and exporting, naming rules, smart vs presentational components, and folder structure.

Props — What props are, passing one or many props, destructuring, typing props with an interface, optional and default props, and passing objects, functions and children as props.
State — Local component state with useState: state vs props, reading and updating state, state-driven rendering, updating from the previous value, common state values, immutable updates of objects and arrays, and when to use state.

Event Handling — Events and event handlers, synthetic events and the event object, click, mouse and keyboard events, passing values to handlers, typing handlers, preventDefault and event propagation.
Conditional Rendering — Showing different things based on a condition: if statements, the ternary operator, the && operator, rendering based on state, and loading and error states.
List Rendering — Rendering lists with map(), showing arrays of objects, filtering, what keys are and why they matter, and nested lists.

Form Handling — Controlled components, text, textarea, select, checkbox, radio and special inputs, handling input, many inputs with one handler, form state, submission and resetting.
Form Validation — Required fields, email and password checks, custom rules, validating on submit or in real time, and writing clear error messages.

Understanding Hooks — What hooks are, their benefits and rules, when to use them, the five groups of built-in hooks, a tour of useState, useEffect, useRef, useContext, useReducer, useMemo and useCallback, and how to choose the right one.
Custom Hooks — What custom hooks are and why to use them, reusing logic across components, creating and naming hooks, using built-in hooks inside them, and useToggle and useForm examples.
Component Lifecycle — Mounting, updating and unmounting, how rendering and effects fit together, managing the lifecycle with useEffect, effect dependencies and dependency arrays, cleanup functions, and avoiding infinite effect loops.

Application State Management — Shared state, state ownership, lifting state up, managing shared state, keeping parent and child in sync, where to place state, local vs global state, and choosing an approach.
Context API — Why context exists, prop drilling, creating context, Providers, reading with useContext, sharing state across components, when to use context, global state basics, a theme example and performance tips.

Client-Side Routing — Routing with React Router: BrowserRouter, Routes and Route, Link and NavLink, useNavigate, route and query parameters, nested and index routes, layouts and a Not Found page.
User Access Control — Authentication and authorization with JWT: the login flow, user identity and roles, role-based access control, protected routes and guards, an auth context and auth service, login state, logout and best practices.

Client-Side Rendering — What rendering is, how client-side rendering works, CSR architecture and startup, initial render, re-rendering and the render cycle, the Virtual DOM and diffing, rendering triggers, and a Product Catalog capstone.
Server-Side Rendering — How SSR works: the server rendering process, request-response lifecycle, HTML generation, hydration, server-side data fetching, SSR pros and cons, and a Blog Portal capstone to download.
Static Site Generation — How SSG works: build-time rendering, static HTML generation, the build process, build-time data fetching, dynamic routes, deployment to a CDN, SSG pros and cons, and a Documentation Website capstone to download.
Incremental Static Generation — How ISG works: static generation with revalidation, stale-while-revalidate, background regeneration, on-demand revalidation, caching and consistency, ISG pros and cons, and a News Portal capstone to download.

API Integration — What an API is, async code, the Fetch API, GET, POST, PUT and DELETE requests, typing and handling API data, loading and error states, a service layer, and environment variables.

Styling Components — CSS in React: importing CSS files, className, multiple classes, inline styles, dynamic and conditional styling, and CSS Modules with scoped class names.
Error Handling — React errors, try/catch with async code, API error handling, friendly error messages, error boundaries, fallback UI, debugging and React Developer Tools.
Performance Optimization — Why performance matters, how React renders, avoiding extra re-renders, memoization with React.memo, useMemo and useCallback, lazy loading, code splitting and best practices.

Capstone - Task Management — Build a complete Task Manager app step by step: setup, reusable components, routing, shared state with context and a reducer, validated forms, an API service, error handling and performance.

Cheat Sheet — A quick reference for the whole course: TSX, components, props and state, events, forms, hooks, context, state management, routing, authentication, API integration and performance.