Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
// Minimal functional component function Hello() { return <h1>Hello, World!</h1>; } // Arrow function syntax (equally valid) const Goodbye = () => <p>Goodbye!</p>; // Component accepting props function Badge({ label, color = 'blue' }) { return ( <span style={{ background: color, color: '#fff', padding: '2px 8px', borderRadius: 4 }}> {label} </span> ); } // Composing components function App() { return ( <div> <Hello /> <p> Status: <Badge label="Active" color="green" />{' '} Role: <Badge label="Admin" color="purple" /> </p> <Goodbye /> </div> ); } // A component that renders nothing conditionally function ConditionalBanner({ show, message }) { if (!show) return null; return <div className="banner">{message}</div>; } export default App;
Result
Open