How to Use the React Playground in This Course

Runnable lesson · press Try it on the examples to edit and run them here.

Most lessons in this course have a Try it button under the code. This lesson explains how that playground works so you can use it well and know what it cannot do.

Using it

1. Press Try it under a code example. The editor and a live preview open.
2. Edit the code in the editor. Press Run (or Ctrl + Enter) to run it again.
3. Click, type and interact with the preview as you would in any web page.
4. Reset brings back the original code. Copy code copies what is in the editor right now.
5. On a phone, use the Code and Preview tabs to switch between the two panels.

Try it with this example. Change the greeting, add a second <p>, and press Run.

1
2
3
4
5
6
7
8

function App() {
  return (
    <section>
      <h1>Hello from the playground</h1>
      <p>Edit me and press Run.</p>
    </section>
  );
}

What the playground does

Your code is compiled in your browser by Babel, which turns JSX into plain JavaScript. It then runs with React 19.3 (the development build, so you see helpful warnings) inside an isolated frame on the page.

You can write the code in two styles. Both work:

1
2
3
4
5

// Style 1: use the global React object
function App() {
  const [on, setOn] = React.useState(false);
  return <button onClick={() => setOn(!on)}>{on ? "On" : "Off"}</button>;
}

1
2
3
4
5
6
7

// Style 2: import, like in a real project
import { useState } from "react";

export default function App() {
  const [on, setOn] = useState(false);
  return <button onClick={() => setOn(!on)}>{on ? "On" : "Off"}</button>;
}

If your code defines a component named App, or has an export default, the playground renders it for you. If you want to start React yourself, as a real project does, call createRoot and render into the element with the id root:

1
2
3
4
5
6
7

import { createRoot } from "react-dom/client";

function Hello() {
  return <p>Rendered by createRoot</p>;
}

createRoot(document.getElementById("root")).render(<Hello />);

The playground does not wrap App in <StrictMode>. In the React Strict Mode lesson you will turn it on yourself.

Seeing messages and errors

• console.log, console.warn and console.error appear in the console panel under the preview.
• React warnings, such as a missing list key, appear there too.
• A syntax error shows the line and a short code excerpt instead of a blank screen.
• An error while rendering shows its message in the preview and in the console.

What the playground does not do

The playground is a single-file environment. That keeps it fast and safe, but it has limits:

• No npm packages. Only react and react-dom can be imported. Importing anything else shows a message that says so.
• No other files. You cannot import ./Button.jsx or ./App.css. Put everything in one file; use a <style> tag for CSS.
• No routing. React Router needs a real project.
• No real network. Requests to other websites are blocked. You can still use fetch with data: URLs, and you can simulate a server with promises and timers. The lessons show both.
• TypeScript types are removed, not checked. The tsx examples run, but type errors are not reported. A real project checks them.

Lessons that need those things are labelled Full-project lesson, and they show every file and command.

Why it is safe to run your code

Your code never runs on this website’s server. It runs in your own browser inside a sandboxed frame with no access to this site’s cookies, storage or pages. The frame has a strict security policy: it can load only its own two script files, cannot send requests to other servers, and cannot submit forms. A loop that runs for more than about two and a half seconds is stopped with an error instead of freezing the tab.

Key points

• Try it compiles and runs real React 19.3 in your browser, in a sandbox.
• Define App (or export default) and it renders; or call createRoot yourself.
• Only react and react-dom are available; larger setups are covered by full-project lessons.