React CourseUnderstand React, not just its syntax
An interactive course with live demos and challenges right in your browser – from the JavaScript React needs to routing, data fetching and state management.
- ✓ The whole course is free
- ✓ Nothing to install
- ✓ React 19 and TypeScript
Try it right now
Change the text on the button, or make it count by tens – the result updates as you type.
Loading the interactive part…
What's inside
Live demosClick through every concept and look at its code.
Challenges in your browserWrite real React, see the result instantly – tests tell you what works.
Analogies, not dry theoryA component is like a recipe: one recipe, a separate meal for every guest. A picture like that sticks better than a definition.
The JavaScript React needsChapter 0 fills the gaps: arrays, objects, async code and references.
Quizzes and progressCheck your understanding, collect badges and keep your daily streak.
Modern ReactReact 19, TypeScript, React Router, TanStack Query, Zustand and Redux Toolkit.
Who is it for
- You know some JavaScript and want to get into React – start with chapter 0.
- You already write React but sometimes don't know why something (doesn't) work – the test shows your gaps.
- You are preparing for an interview or your first job – the challenges and the principles in lesson 17 will help.
How the course works
- Read and experiment. Each lesson explains a concept, why it exists and where to use it. You can play with the live demos and view their code with the
</> Codebutton. - Solve challenges right on the page. Each challenge has a code editor; the result shows up as you type and your solution is saved in your browser. Tests tell you which steps are done.
- Compare with the reference. The Reference solution tab shows how the result should behave. The solution code stays hidden until you expand it yourself.
- Check the types. Run
npm run typecheck– TypeScript often tells you what's wrong before the browser does.
Contents
0JavaScriptAll the JavaScript React needs: from variables to async and the patterns you meet everywhere in React.1A quick review of the basicsJSX, components, props, children, conditions, lists and why key matters.2State and events (useState)Immutability, updater functions, batching, lifting state up and derived state.3Effects (useEffect)Syncing with the outside world, cleanup, race conditions and when you DON’T need an effect.4Refs (useRef)Access to the DOM, values without re-rendering, ref as a prop and useImperativeHandle.5More complex state (useReducer)When to reach for a reducer instead of useState and how to write it cleanly and type-safely.6ContextThe end of prop drilling, the Provider + hook pattern and performance traps.7Custom hooksHow to extract and reuse logic: useLocalStorage, useMediaQuery, useDebounce…8Forms and React 19 ActionsControlled vs. uncontrolled, useActionState, useFormStatus and useOptimistic.9Performance and renderingWhen a component re-renders, memo, useMemo, useCallback, useTransition, useDeferredValue.10Component design patternsComposition, compound components, render props, portals and error boundaries.11Where the type goes (TypeScript syntax)When a colon, when <…>, when nothing. The anatomy of the syntax, a cheat sheet of situations and a fill-in exercise.12TypeScript with ReactTyping props, events and hooks, generic components and discriminated unions.13Routing (React Router)Pages, parameters, nested layouts, state in the URL, loaders and protected routes.14Data fetchingWhy fetch in useEffect isn’t enough, TanStack Query, Suspense and use().15Application state managementKinds of state and how to choose: Context vs. Zustand vs. Redux Toolkit.16Final project: KanbanPut everything together into one app.17Summary: the principles of ReactThe 15 principles of the whole course, explained with "not like this / like this" examples.
Badges (0/10)
First lessonRead a lesson to the very end.
First challengeSolve and tick your first challenge.
Warmed upComplete five warm-up challenges.
Sharp mindAnswer ten quizzes correctly on the first try.
Three days in a rowLearn something three days in a row.
JavaScript sortedRead all lessons of chapter 0.
Ten challengesComplete ten challenges.
A whole weekLearn something seven days in a row.
Halfway thereRead half of all lessons.
GraduateRead every lesson of the course.