Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
// JSX is syntactic sugar — Babel transforms it: // Before: <h1 className="title">Hello</h1> // After: React.createElement('h1', { className: 'title' }, 'Hello') // ── Rules ───────────────────────────────────────────────────── // 1. className, not class <div className="container">Content</div> // 2. All tags must close (including void elements) <img src="logo.png" alt="Logo" /> <input type="text" /> <br /> // 3. Return one root element — wrap siblings in a Fragment function Layout() { return ( <> <header>Header</header> <main>Main content</main> <footer>Footer</footer> </> ); } // 4. Embed JS expressions with { } const user = { name: 'Alice', score: 42 }; const element = ( <p> {user.name} scored {user.score * 2} points! </p> ); // 5. Inline styles use camelCase objects const box = ( <div style={{ backgroundColor: '#e8f4fd', borderRadius: 8, padding: 16 }}> Styled box </div> );
Result
Open