Online React Editor

React example code

State and click handling.

function App() {
  const [count, setCount] = React.useState(0);
  const skills = ["components", "state", "events"];

  return (
    <main className="demo">
      <h1>React preview</h1>
      <p>Practice {skills.join(", ")} in a tiny browser sandbox.</p>
      <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
    </main>
  );
}

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

Sample output

Live preview renders the React component in an isolated iframe.

Common React errors

• JSX transform error: Return one parent element and close every JSX tag.
• React is not defined: Use the provided preview shell, which loads React and ReactDOM in the iframe.
• State not updating: Call the setter function from useState instead of mutating values directly.