Skip to content
elephantoo

React

Build fast, component-based user interfaces with the most popular UI library.

React lets you describe your UI as small, reusable components. Start with Vite, JSX, props and state; add forms, effects and data fetching; master hooks, context, reducers, routing and styling; then go professional with React 19 Actions, TanStack Query, state libraries, testing, performance, TypeScript, accessibility, deployment and a first look at Next.js and Server Components. Everything uses modern React 19 with function components and hooks.

30 lessons ~7 h 58 min Beginner → Advanced

Your progress

0%

0 of 30 lessons complete

Start course

What you’ll learn

  • Create and structure a React 19 + Vite project, and explain how rendering works
  • Write components with JSX, props, state, events, conditional rendering and lists
  • Build controlled forms and synchronise with the outside world using effects
  • Fetch data correctly, and extract logic into reusable custom hooks
  • Manage complex state with useReducer, context, Zustand or Redux Toolkit
  • Add routing with React Router, error boundaries, Suspense and code splitting
  • Use React 19 Actions, useActionState, useOptimistic and use()
  • Cache and sync server data with TanStack Query
  • Test components with Vitest and React Testing Library, and profile performance
  • Ship accessible, type-safe apps with TypeScript and deploy them to production

Syllabus

5 modules · 30 lessons
  1. 1What is React?Components, declarative UI, the virtual DOM idea and when to use React.
  2. 2Setting up with ViteCreate a React project with Vite, tour the files, run the dev server and build for production.
  3. 3JSX in depthExpressions in braces, attributes, fragments, styles, comments and how JSX compiles.
  4. 4Components & propsSplit UI into components, pass data down with props, children and default values.
  5. 5Responding to eventsonClick and friends, passing handlers as props, event objects, preventDefault and propagation.
  6. 6State with useStateAdding memory to components, re-renders, state as a snapshot, updater functions and immutable updates.
  7. 7Conditional renderingif, ternaries, && and early returns — showing the right UI for each state.
  8. 8Lists & keysRender arrays with map, choose good keys, filter and sort — plus a first look at effects.
  9. 9Forms & controlled inputsText, checkbox, select and radio inputs, controlled vs uncontrolled, validation and submission.
  1. 10useEffect & the component lifecycleMount, update and unmount, dependency arrays, cleanup, Strict Mode and when not to use effects.
  2. 11Fetching dataLoad data with loading and error states, avoid race conditions with AbortController, and know when to reach for a library.
  3. 12useRef: refs & the DOMFocus inputs, measure elements, store mutable values without re-rendering, and ref as a prop in React 19.
  4. 13useContext & contextShare values like theme and the current user without prop drilling, and avoid unnecessary re-renders.
  5. 14useReducerMove complex state logic into a reducer with actions, and combine it with context.
  6. 15Custom hooksExtract reusable stateful logic into your own use… functions: useLocalStorage, useFetch, useDebouncedValue and more.
  7. 16Lifting state & composition patternsSingle source of truth, controlled components, children and slots, compound components and render props.