React Playground

How to use the React playground

1. Edit App.jsx. It must export your root component, as in the sample: export default function App() { ... }.
2. Watch the preview update. Messages from console.log and any error appear in the console under it.
3. Press + to add a component file such as Button.jsx, then import Button from './Button' in App.jsx.
4. Put styles in styles.css (or another .css file). All CSS files are applied to the preview.
5. Open the ⋯ menu and choose Download all files (.zip) to take the project with you.

What is and is not included

You get React 18 with hooks, fragments and Strict Mode, and JSX works without any setup. You can add packages from npm with Add packages (they are downloaded from esm.sh only when you press Add). Folders work too: import Button from './components/Button'. For the underlying HTML, try the HTML to JSX converter, and for plain pages without a framework use the HTML/CSS/JS Playground.

The sample is a counter and a small list. The core of App.jsx:

import { useState, useEffect } from 'react';
import './styles.css';

export default function App() {
  const [count, setCount] = useState(0);
  const [items, setItems] = useState(['Learn React', 'Build something small']);

  useEffect(() => {
    document.title = 'Clicked ' + count + ' times';
  }, [count]);

  return (
    <main className="app">
      <h1>Hello, React</h1>
      <button type="button" onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
      <ul>
        {items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>

Result: a card with a heading, a button reading Clicked 0 times that counts up, a two-item list and an Add an item button.

• Forgetting to export the component: without export default the preview says what to add.
• Importing a package before adding it: press Add packages first, or the preview says what is missing.
• Writing class instead of className on an element.
• Expecting type errors in a .tsx file: types are removed, not checked.