Votre premier composant

Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 2 sur 42.

Il est temps d'écrire votre premier composant. Regardez App.jsx. C'est une fonction qui renvoie du JSX :

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

        </div>
    );
}

Pour le moment, cela retourne un <div> vide, donc l'aperçu est blanc. Tout le JSX que vous placez à l'intérieur est rendu (titres, paragraphes, boutons, n'importe quoi) :

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

Remarquez l'attribut id : il fonctionne exactement comme en HTML, et nos tests utilisent les id pour trouver vos éléments. Les deux autres fichiers sont la tuyauterie de l'application : index.html héberge l'application et main.jsx monte App dans la page. Ils sont verrouillés. App.jsx est l'endroit où vous travaillez.

Défi

Débutant

Faites en sorte que votre application salue le monde.

À l'intérieur du <div> dans App.jsx, ajoutez un <h1> avec id="title".
Son texte doit être exactement Hello, React!

Essayez vous-même

<!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>