How this React track works
- Real React 18 in the playground — React and ReactDOM load from CDN; your TSX compiles in the browser when you click Run in browser.
- Original lesson copy — we explain patterns and trade-offs in our own words; use official docs as reference, not a script to paste.
- Prerequisites — finish JavaScript (functions, objects, arrays, async) and TypeScript (types, interfaces). React builds on both.
Use printOutput(...) for terminal values and mountApp(<App />) when a lesson shows a live UI preview.
Install on your device (macOS, Linux, Windows)
Lessons run in your browser on this site—install a modern browser and optional editor for local projects.
macOS
- Use Safari (preinstalled) or install Google Chrome / Firefox.
- Optional editor: VS Code (
brew install --cask visual-studio-code). - Open DevTools with ⌥⌘I (Chrome/Edge) or ⌥⌘C (Safari Web Inspector).
Linux
- Install Chromium or Firefox:
sudo apt update && sudo apt install -y chromium-browser firefox(Debian/Ubuntu; package names vary by distro). - Fedora:
sudo dnf install -y chromium firefox. - Optional editor: VS Code from code.visualstudio.com or
sudo snap install code --classic.
Windows
- Install Microsoft Edge or Chrome.
- Optional editor: VS Code (
winget install Microsoft.VisualStudioCode). - Open DevTools with F12 or Ctrl+Shift+I.
Verify: Open any lesson playground and click Run—output appears without installing a compiler.
Local projects: npm create vite@latest my-app -- --template react-ts (Node.js required).
React is a JavaScript library for building user interfaces. Instead of manually selecting DOM nodes and patching them on every change, you describe what the UI should look like for a given state—and React updates the browser efficiently.
How this track differs from plain JavaScript
If you completed the JavaScript track, you already know variables, functions, and event listeners. React does not replace that knowledge—it organizes UI code into reusable components and predictable data flow.
Our TypeScript track teaches static types. React pairs naturally with TypeScript: props and state get typed interfaces, and editors catch mistakes before you run code.
What you will learn
- JSX syntax and function components
- State with
useStateand side effects withuseEffect - Event handlers, controlled forms, and lifting state up
- Lists, keys, conditional rendering, and composition
- Fetching and displaying data with loading and error states
Playground setup
Each lesson uses a TSX editor. React 18 loads from CDN in a sandboxed preview iframe. Early lessons use printOutput(...) only; later lessons call mountApp(<App />) to render UI above the terminal.
Self-check
- In one sentence, what problem does React solve compared to manual DOM updates?
- Why do we recommend JavaScript and TypeScript before this track?
Interview prep
- What is React in one sentence?
A library for building UIs with components, declarative rendering, and one-way data flow—not a full framework; you choose routing, data fetching, and build tooling.