Playground workflow

Get the most from each lesson’s live editor with a deliberate loop—the same habits that transfer to Vite, Create React App, or Next.js projects.

Recommended workflow

1. Read the concept section before touching code.
2. Click Run in browser to compile TSX and execute in the preview iframe.
3. Use printOutput(...) to inspect values in the terminal panel below the editor.
4. When a lesson shows UI, call mountApp(<YourComponent />) — the preview renders inside #root.
5. Change one idea at a time (one prop, one state variable, one effect dependency).
6. Read TypeScript errors in the terminal—they often point to wrong prop types before runtime.
7. Reset the editor if you drift too far from the lesson goal.

What happens when you Run

• Your TSX is transpiled to JavaScript in the browser (same idea as tsc + JSX transform).
• React 18 and ReactDOM load from CDN inside a sandboxed iframe.
• React and ReactDOM are available globals—destructure hooks: const { useState } = React;
• mountApp uses createRoot to render your element tree into the preview.

Review TypeScript intro if type errors block you—React components benefit heavily from typed props.

Self-check

1. What is the difference between printOutput and mountApp?
2. Why change one concept at a time while learning?