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
Everything is free. A few bonus lessons and challenges unlock after signing in – an e-mail is enough, no password and no payment.
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 needsThe JavaScript chapter 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 the JavaScript chapter.
- 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 React 16 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
ChapterJavaScriptAll the JavaScript React needs: from variables to async and the patterns you meet everywhere in React.ChapterTypeScriptWhere types go, union types and narrowing, states as discriminated unions and safe handling of data from outside. Before you meet types in the React lessons.React 01A quick review of the basicsJSX, components, props, children, conditions, lists and why key matters.React 02State and events (useState)Immutability, updater functions, batching, lifting state up and derived state.React 03Effects (useEffect)Syncing with the outside world, cleanup, race conditions and when you DON’T need an effect.React 04Refs (useRef)Access to the DOM, values without re-rendering, ref as a prop and useImperativeHandle.React 05More complex state (useReducer)When to reach for a reducer instead of useState and how to write it cleanly and type-safely.React 06ContextThe end of prop drilling, the Provider + hook pattern and performance traps.React 07Custom hooksHow to extract and reuse logic: useLocalStorage, useMediaQuery, useDebounce…React 08Forms and React 19 ActionsControlled vs. uncontrolled, useActionState, useFormStatus and useOptimistic.React 09Performance and rendering🔓 free after sign-inWhen a component re-renders, memo, useMemo, useCallback, useTransition, useDeferredValue.React 10Component design patterns🔓 free after sign-inComposition, compound components, render props, portals and error boundaries.React 11TypeScript with ReactTyping props, events and hooks, generic components and discriminated unions.React 12Routing (React Router)Pages, parameters, nested layouts, state in the URL, loaders and protected routes.React 13Data fetchingWhy fetch in useEffect isn’t enough, TanStack Query, Suspense and use().React 14Application state managementKinds of state and how to choose: Context vs. Zustand vs. Redux Toolkit.React 15Final project: KanbanPut everything together into one app.React 16Summary: the principles of React🔓 free after sign-inThe 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 the JavaScript chapter.
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.