Online React Compiler

This free online React compiler turns your JSX into JavaScript and shows the result in a live preview. It uses React 19.2. Write your component in App.jsx, add styles in styles.css, and press Run. Messages from console.log() and React warnings appear below the preview.

Everything runs in your own browser, so nothing is sent to our server. It is made for learning React, practising hooks, and testing a small component before you add it to a project.

1. Write your component in the App.jsx tab and export it with export default function App().
2. Add styles in the styles.css tab. Use className in JSX, not class.
3. Press Run. Your App appears in the preview. Press Run again after each change.

Open any of these from the Examples tab in the side bar.

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="card">
      <h1>Hello, React!</h1>
      <p>You clicked {count} times.</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

const students = [
  { id: 1, name: "Asha", marks: 82 },
  { id: 2, name: "Ravi", marks: 67 },
  { id: 3, name: "Meera", marks: 91 },
];

export default function App() {
  return (
    <ul>
      {students.map((s) => (
        <li key={s.id}>
          {s.name}: {s.marks} {s.marks >= 80 && <strong>(top)</strong>}
        </li>
      ))}
    </ul>
  );
}

import { useState } from "react";

function Greeting({ name }) {
  return <p>Hello, {name || "stranger"}!</p>;
}

export default function App() {
  const [name, setName] = useState("");

  return (
    <div className="card">
      <label>
        Your name:{" "}
        <input value={name} onChange={(e) => setName(e.target.value)} />
      </label>
      <Greeting name={name} />
    </div>
  );
}

import { useEffect, useState } from "react";

export default function App() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setSeconds((s) => s + 1), 1000);
    return () => clearInterval(id);
  }, []);

  return <h1>{seconds} seconds</h1>;
}

React is a JavaScript library for building user interfaces. You split the page into small components. Each component is a function that returns JSX, which looks like HTML inside JavaScript. When the data (the "state") changes, React updates only the parts of the page that changed.

JSX is not plain JavaScript, so a browser cannot run it directly. A tool must first change each JSX tag into a React.createElement() call. This page does that step for you in the browser, which is why you do not need npm, Vite or Create React App to try React here.

• Nothing to show yet. Add "export default function App()"The preview shows the component you export as default. Add export default before your main component.
• Each child in a list should have a unique "key" propWhen you render a list with map(), give each item a key that does not change, for example key={item.id}.
• Cannot import "axios"Only react and react-dom can be imported here. Other npm packages are not available. Write that part yourself in plain JavaScript.
• Adjacent JSX elements must be wrapped in an enclosing tagA component must return one parent element. Wrap the elements in a <div> or in a fragment: <>…</>.

• Online Python Compiler
• Online C Compiler
• Online C++ Compiler
• Online Java Compiler
• Online JavaScript Compiler
• Online HTML, CSS and JavaScript Compiler
• Online SQL Compiler
• Online TypeScript Compiler
• Online Bash Shell Compiler