Passaggio 1: Struttura della scheda

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

Sfida

Facile

Costruisci lo scheletro della scheda in App.jsx:

Un <div> con className="card".
Al suo interno: un <h2> con id="profile-name" e il testo Ada Lovelace.
Sotto il nome: un <p> con id="profile-bio" e il testo First programmer.

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>

Tutte le lezioni di Fondamenti

1Alla scoperta di React

Che cos’è React?Il tuo primo componente La regola dell’unico elemento genitore JSX non è HTML Riepilogo: alla scoperta di React

4Props

Cosa sono le props?Passare le props Due props Stesso componente, nuovi dati La prop children Riepilogo: props

7Condizioni e liste

Rendering ternario Mostrare con &&Renderizzare una lista Le key sono importanti Filtra, poi mappa Riepilogo: condizioni e liste

2Espressioni JSX

Le parentesi graffe Operazioni matematiche tra parentesi graffe Parentesi graffe negli attributi Chiamare funzioni in JSX Riepilogo: espressioni JSX

5Stato ed eventi

Che cos'è lo stato?Contatore di clic Contare a incrementi Attiva/disattiva con lo stato Stato indipendente Riepilogo: stato ed eventi

8Progetto: Scheda profilo

Passaggio 1: Struttura della schedaPassaggio 2: Scheda con Props Passaggio 3: Pulsante Mi piace Passaggio 4: Interruttore Segui

3Componenti

Mattoni di base Il tuo secondo componente Riutilizzare i componenti Comporre una pagina Riepilogo: componenti

6Moduli e input

Input controllati Visualizzare l’input Contatore di caratteri Pulsante Cancella Ripasso: moduli e input