Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
// JSX looks like HTML but has JavaScript rules: // 1. className instead of class <div className="container">Hello</div> // 2. All tags must be closed (including self-closing) <img src="photo.jpg" alt="Photo" /> <br /> // 3. Return one root element (or use a Fragment) function Card() { return ( <> <h2>Title</h2> <p>Content</p> </> ); } // 4. Embed JavaScript expressions with { } const name = 'Alice'; const element = <h1>Hello, {name}!</h1>; // 5. Conditional rendering const isLoggedIn = true; return <div>{isLoggedIn ? 'Welcome!' : 'Please log in'}</div>; // 6. Inline styles use camelCase objects <div style={{ backgroundColor: '#f0f4f8', fontSize: '1rem' }}> Styled div </div>
Result
Open