Back
React Compiler
Clear
Run
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 (
React 18
Build fast UIs
Editable JSX preview running in the browser.
setCount(count + 1)}> Clicked {count} times
{items.map((item) => (
{item.title}
{item.detail}
))}
); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(
);
CSS
body { margin: 0; font-family: Arial, sans-serif; background: #f5f7fb; } .app { padding: 30px; } .hero { background: #20232a; color: #ffffff; padding: 28px; border-radius: 12px; } .badge { display: inline-block; background: #61dafb; color: #20232a; font-weight: bold; padding: 4px 10px; border-radius: 999px; font-size: 12px; margin-bottom: 12px; } .btn-primary { margin-top: 16px; background: #61dafb; color: #20232a; border: none; padding: 10px 20px; border-radius: 6px; font-weight: bold; cursor: pointer; } .grid { display: grid; gap: 14px; margin-top: 20px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .card { background: white; padding: 16px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .card h3 { margin-bottom: 6px; }
Output