React Tutorials

React from the ground up — components, JSX, props, state, hooks, context, routing and performance, every example lifted from a real ordering app.

• React – Interview Questions
  Twenty-four senior-level questions and answers — what actually triggers a re-render, why three setState calls only count once, what breaks when you lie to a dependency array, a five-question section on Context, when memo silently does nothing, what error boundaries do not catch, and how to diagnose a slow page. Grounded in real code.
• React – Sass
  Sass in a Vite project is one dependency and a file rename — no config. Nesting, variables, partials and mixins in a component stylesheet, .module.scss to get scoping and Sass at once, and the one thing Sass still does that plain CSS cannot: recompile Bootstrap itself with your own colours.
• React – Bootstrap
  Two ways to use Bootstrap in React: the plain stylesheet with className, or react-bootstrap's real components. Why you should not load Bootstrap's JavaScript bundle alongside React, controlled modals and offcanvas drawers, and overriding the theme with custom properties instead of fighting specificity.
• React – Styling
  className not class, the inline style object and its camelCased keys, conditional and combined class names, CSS Modules for scoping, importing a stylesheet in the entry file and why import order decides which rule wins. Plus where CSS-in-JS and Tailwind fit, and the case for CSS custom properties.
• React – Code Splitting with lazy and Suspense
  Everything imported at the top of your app ships to every visitor, including the admin screens 99% of them will never open. lazy turns an import into its own bundle fetched on demand, Suspense says what to show while it is in flight, and the route boundary is where to draw the line. With before-and-after bundle numbers.
• React – useMemo, useCallback and memo
  Three tools that all do the same thing — skip work when nothing relevant changed — and are all easy to use wrongly. What each one actually caches, why memo does nothing until the props are stable, the cases that genuinely need them, and why the React Compiler may make all of this optional.
• React – Routing with React Router
  React has no router, so everyone uses this one. BrowserRouter, Routes and Route, Link instead of an anchor tag, URL params and query strings, programmatic navigation with useNavigate, layout routes with Outlet, and a guarded route that bounces signed-out users to the login page and back again.
• React – Error Boundaries
  One thrown error in one component blanks the entire page — React unmounts the whole tree rather than show something broken. An error boundary is the only thing that stops it, it is still the one thing you need a class component for, and it does not catch event handlers or async code. Here is what to do about all three.
• React – Refs
  A ref is a value a component remembers that does not trigger a render when it changes. Reaching a real DOM node to focus, measure or scroll it, holding a timer id between renders, why reading or writing a ref during render is a bug, and how ref differs from state in one table.
• React – The Component Lifecycle with useEffect
  The old three phases map onto one hook. What the dependency array really means, the cleanup function and the requests it cancels, why StrictMode runs your effect twice on purpose, the infinite loop everyone writes once — and the larger point that most effects should not exist at all.
• React – Redux, and Whether You Need It
  Redux Toolkit as it is actually written today — configureStore, createSlice, useSelector, useDispatch — and an honest comparison against the context plus reducer you already know. What Redux gives you that React does not, what it costs, and the question to ask before adding it.
• React – Custom Hooks
  A custom hook is a function whose name starts with use and that calls other hooks. That is the entire specification. Extracting stateful logic so two components can share it, why hooks share logic and never state, the one-line hook that turns a context into a typed API and throws when used outside its provider.
• React – useReducer
  When a component grows six setState calls that must agree with each other, a reducer collapses them into one function you can read top to bottom. Actions, the reducer's purity requirement, typing actions as a discriminated union, and the useReducer + context pairing that gives you Redux's shape without Redux.
• React – Passing Data Deeply with Context
  Prop drilling is passing a value through five components that do not use it. Context is the way out: createContext, a provider component that owns the state, useContext to read it anywhere below. What belongs in context and what does not, why every consumer re-renders when the value changes, and how to keep that from hurting.
• React – Forms and Controlled Inputs
  A controlled input is one whose value comes from state, which is what makes validation, formatting and disabled submit buttons possible at all. value plus onChange, one handler for many fields, checkboxes and selects and radios, submitting without reloading the page, and useId for labels that actually work.
• React – Updating State Correctly
  Setting state does not change the variable you are holding — it schedules a render with a new one. State as a snapshot, why two increments in a row only count once, the updater function that fixes it, and updating objects and arrays without mutating them so React can still tell that something changed.
• React – State with useState
  State is what a component remembers between renders. Why a plain variable will not do, the array destructuring useState returns, the rules that govern where hooks may be called, one state variable versus several, and the moment to stop and lift state up to a shared parent instead.
• React – Handling Events
  onClick takes a function, not a call — the single most common beginner mistake, and why the arrow function fixes it. Passing arguments to a handler, typing the event in TypeScript, preventDefault on form submits, and how event propagation differs from the DOM you already know.
• React – Rendering Lists and Keys
  Rendering an array with map, and the key prop React nags you about. What a key is actually for, why the array index is a bug waiting for the list to reorder, what to use when the items have no id, and why keys must be unique among siblings but not globally.
• React – Conditional Rendering
  Four ways to render something only sometimes — if before the return, the ternary, &&, and returning null — and when each one reads best. Includes the && trap that renders a literal 0 on the page, and the early-return pattern that guards a whole route.
• React – Props
  Props are the arguments a component takes. Destructuring them in the signature, typing them with TypeScript, default values, the children prop, and passing functions down so a child can talk back to its parent. Plus the rule that explains half of all React bugs: props are read-only.
• React – JSX
  JSX is a syntax for calling functions, not a template language, and the differences show. One root element and what fragments are for, className over class, curly braces for values and double braces for objects, why {} renders nothing for false but prints a bare 0, and how to write comments inside markup.
• React – Your First Component
  A component is a function that returns markup — that is the whole idea. Naming and capitalisation rules React enforces, importing and exporting, why components must be declared at the top level, what "keeping a component pure" buys you, and an honest note on the class components you will still meet in older code.
• React – Rendering to the DOM
  How a React app actually starts: one <div id="root"> in the HTML, createRoot in the entry file, and everything else built by React. Why ReactDOM.render is gone, what StrictMode's double render is really telling you, and where providers belong in the tree.
• React – The JavaScript You Need First
  Most of what looks like React syntax is plain modern JavaScript. Destructuring, the spread operator, arrow functions, template strings, optional chaining, modules and array methods — each one shown twice: the language feature on its own, then the line of real component code that depends on it.
• React – Set Up a Project with Vite
  Create React App is retired; Vite is what the React docs point you at now. One command to scaffold a TypeScript project, what each generated file is actually for, why the entry point is a .tsx file and not index.html, and the four scripts you will run every day. Ends with the project layout the rest of this track uses.
• React – Get Started
  Start here. What React is and what problem it solves, the exact versions this track is written against — React 19.2, TypeScript 6, Vite 8 — one command to create a project and see it running, the demo application every example is taken from, and the full lesson index in reading order.