Passaggio 4: Interruttore Segui

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

Sfida

Medio

Completa la scheda del profilo.

Aggiungi lo stato booleano following (inizialmente false) a ProfileCard.
Aggiungi un pulsante con id="follow" che lo inverte al clic.
L'etichetta del pulsante è Following quando è true e Follow quando è false.

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 scheda Passaggio 2: Scheda con Props Passaggio 3: Pulsante Mi piacePassaggio 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