Il tuo primo componente

Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 2 di 42.

È il momento di scrivere il tuo primo componente. Dai un'occhiata a App.jsx. È una funzione che restituisce JSX:

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

        </div>
    );
}

Al momento restituisce un <div> vuoto, quindi l'anteprima è vuota. Qualunque JSX tu inserisca al suo interno viene renderizzato (intestazioni, paragrafi, pulsanti, qualsiasi cosa):

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

Nota l'attributo id: funziona proprio come in HTML e i nostri test usano gli id per trovare i tuoi elementi. Gli altri due file fanno da struttura di supporto all'app: index.html ospita l'app e main.jsx monta App nella pagina. Sono bloccati. È in App.jsx che lavori.

Sfida

Principiante

Fai in modo che la tua app saluti il mondo.

All’interno del <div> in App.jsx, aggiungi un <h1> con id="title".
Il suo testo deve essere esattamente Hello, React!

Provalo tu

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