Tutorial Series // React

The Complete React Tutorial

Modern UI engineering — hooks, context, performance patterns, and real-world component design. Every topic ships working code.

14 topics ~139 min total read 100% free
  1. 01 Introduction to React & Vite Setup Why components changed frontend forever, how React thinks, and scaffolding a project with Vite. 8 min →
  2. 02 JSX — JavaScript + Markup How JSX really works — expressions in braces, className, fragments, conditional attributes, and the rules that differ from HTML. 9 min →
  3. 03 Components & Props Pass data down with props, destructure them, set defaults, compose with children, and lift shared data up. 10 min →
  4. 04 State with useState The hook that makes UIs interactive — state updates and re-renders, updating objects/arrays immutably, and lifting state up. 11 min →
  5. 05 Events & Forms Handling events the React way, controlled inputs, multi-field forms, checkboxes/selects, and submit handling. 10 min →
  6. 06 Conditional Rendering & Lists Render different UI per state with && and ternaries, map data to components, and understand why keys matter. 9 min →
  7. 07 useEffect — Side Effects & Data Fetching Synchronise with the outside world — the dependency array, cleanup functions, fetching with abort, and effect mistakes to avoid. 12 min →
  8. 08 Custom Hooks — Reusable Logic Extract stateful logic into useLocalStorage, useFetch, useDebounce — composition for behaviour, not just UI. 9 min →
  9. 09 Context — Sharing State Without Prop Drilling createContext, Provider, useContext — build a ThemeContext and an AuthContext, and know when context is the wrong tool. 10 min →
  10. 10 useReducer & State Architecture Manage complex state transitions with reducers and dispatched actions, combine with context, and structure app state. 10 min →
  11. 11 React Router — Multi-Page Apps Client-side routing — routes, links, URL params with useParams, nested layouts with Outlet, and protected routes. 10 min →
  12. 12 Data Fetching Patterns & TanStack Query Why raw useEffect fetching doesn't scale — caching, refetching, and mutations with TanStack Query. 10 min →
  13. 13 Performance — memo, useMemo & useCallback How re-renders propagate, profiling with DevTools, and the three memoisation tools — used only where they matter. 10 min →
  14. 14 Testing & Deploying a React App Component tests with Vitest + Testing Library, user-event interactions, mocking fetch, production builds, and deployment. 11 min →