RE

React Tutorial

Build user interfaces with components – JSX, props, state, events, lists, forms, effects and hooks.

Start lesson 1 Take the quiz Cheat sheet
12 lessons

React is a JavaScript library for building user interfaces out of small, reusable components. In this track you learn modern React 19 with function components and hooks – JSX, props, state, events, conditional rendering, lists, forms, effects, custom hooks and how to start a real project.

Every lesson has examples you can edit and run in your browser, a short quiz and a practice exercise. You should know basic JavaScript first.

  1. 1 React IntroductionWhat React is, why so many teams use it, and how to run your first React 19 component right in…
  2. 2 React JSXLearn JSX, the HTML-like syntax used in React: curly braces, attributes, className, inline styles, fragments and the rules that trip…
  3. 3 React ComponentsLearn how to create React function components, nest them, keep them pure and split a page into small reusable pieces.
  4. 4 React PropsPass data from parent to child components with props: destructuring, default values, passing objects and functions, and the children prop.
  5. 5 React State with useStateGive components memory with the useState hook: how state triggers re-renders, updater functions, and updating objects and arrays safely.
  6. 6 React EventsHandle clicks, typing and key presses in React with onClick and friends, pass arguments, use the event object and pass…
  7. 7 React Conditional RenderingShow different UI for different situations in React with if statements, the ternary operator, && and null – and avoid…
  8. 8 React Lists and KeysRender lists from arrays with map() and filter(), and learn why every item needs a stable, unique key – and…
  9. 9 React FormsBuild forms in React with controlled inputs, handle checkboxes and selects, validate on submit and use React 19 form actions…
  10. 10 React useEffectUse the useEffect hook to sync components with timers, browser APIs and servers: dependency arrays, cleanup and fetching data safely.
  11. 11 React useRef and Custom HooksUse useRef to reach DOM elements and keep values between renders without re-rendering, then share logic by writing your own…
  12. 12 React Project with ViteCreate a real React project with Vite: install Node.js, scaffold with npm create vite, understand the files, split components and…