Your First Component

Part of the Fundamentals section of Coddy's React journey — lesson 2 of 42.

Time to write your first component. Look at App.jsx. It's a function that returns JSX:

export default function App() {
    return (
        <div>

        </div>
    );
}

Right now it returns an empty <div>, so the preview is blank. Whatever JSX you put inside gets rendered (headings, paragraphs, buttons, anything):

<h1 id="title">Hello, React!</h1>

Notice the id attribute: it works just like in HTML, and our tests use ids to find your elements. The other two files are the app's plumbing: index.html hosts the app and main.jsx mounts App into the page. They're locked. App.jsx is where you work.

Challenge

Beginner

Make your app greet the world.

Inside the <div> in App.jsx, add an <h1> with id="title".
Its text must be exactly Hello, React!

Try it yourself

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>