Menu
Coddy logo textTech
INIZIA A IMPARARE
flag It iconItalianodown icon

Ripasso: moduli e input

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

challenge icon

Sfida

Medio

Riepilogo del capitolo. Crea un selettore di soprannome con il ciclo completo dell'input controllato: scrivi, osserva il feedback in tempo reale, cancella.

  1. Rendi controllato l'input (id="nick") con lo stato nick, inizialmente vuoto.
  2. Il paragrafo (id="meter") mostra N of 12, dove N è la lunghezza attuale del soprannome (ad es. scrivendo Coddy → 5 of 12), calcolata, non memorizzata.
  3. Il pulsante id="clear" svuota il soprannome e anche il campo.

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