React Online Compiler | Free Online Compiler

JSX

function App() {
    const [count, setCount] = React.useState(0);
    const items = [
        { title: "Components", detail: "Break UI into reusable parts." },
        { title: "State", detail: "Manage interactive data with hooks." },
        { title: "Props", detail: "Pass data into components." }
    ];

return (
        <div className="app">
            <header className="hero">
                <span className="badge">React 18</span>
                <h1>Build fast UIs</h1>
                <p>Editable JSX preview running in the browser.</p>
                <button className="btn-primary" onClick={() => setCount(count + 1)}>
                    Clicked {count} times
                </button>
            </header>
            <section className="grid">
                {items.map((item) => (
                    <div className="card" key={item.title}>
                        <h3>{item.title}</h3>
                        <p>{item.detail}</p>
                    </div>
                ))}
            </section>
        </div>
    );
}

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

CSS

Output

React Compiler