Menu
Coddy logo textTech
INIZIA A IMPARARE
flag It iconItalianodown icon

Passaggio 3: Pulsante Mi piace

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

challenge icon

Sfida

Medio

Aggiungi i Mi piace alla scheda.

  1. Assegna a ProfileCard uno stato likes che parte da 0.
  2. Aggiungi un pulsante con id="like" e il testo Like che aggiunge un Mi piace a ogni clic.
  3. Mostra il conteggio in uno <span> con id="likes".

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 componenteLa regola dell’unico elemento genitoreJSX non è HTMLRiepilogo: alla scoperta di React

4Props

Cosa sono le props?Passare le propsDue propsStesso componente, nuovi datiLa prop childrenRiepilogo: props

7Condizioni e liste

Rendering ternarioMostrare con &&Renderizzare una listaLe key sono importantiFiltra, poi mappaRiepilogo: condizioni e liste

2Espressioni JSX

Le parentesi graffeOperazioni matematiche tra parentesi graffeParentesi graffe negli attributiChiamare funzioni in JSXRiepilogo: espressioni JSX

5Stato ed eventi

Che cos'è lo stato?Contatore di clicContare a incrementiAttiva/disattiva con lo statoStato indipendenteRiepilogo: stato ed eventi

8Progetto: Scheda profilo

Passaggio 1: Struttura della schedaPassaggio 2: Scheda con PropsPassaggio 3: Pulsante Mi piacePassaggio 4: Interruttore Segui

3Componenti

Mattoni di baseIl tuo secondo componenteRiutilizzare i componentiComporre una paginaRiepilogo: componenti

6Moduli e input

Input controllatiVisualizzare l’inputContatore di caratteriPulsante CancellaRipasso: moduli e input