Write your first React component with JSX syntax.
JSX is a syntax extension that looks like HTML but is actually JavaScript. React components return JSX that describes what should appear on screen.
function Greeting() {
return <h1>Hello, world!</h1>;
}
Use {} to embed any JavaScript expression:
const name = "Alice";
return <p>Hello, {name}!</p>;
// renders: Hello, Alice!
JSX uses className instead of class (since class is a reserved word in JS):
return <div className="container">...</div>;
Elements without children must be self-closed:
return <img src="photo.jpg" alt="A photo" />;
The App component currently renders nothing useful. Update it to return an <h1> that says "Hello, React!".
export default function App() {
return <h1>Hello, React!</h1>;
}
export default function App() { // Update this component to return an <h1> that says "Hello, React!" return <div>Fix me!</div>; }