Lezione 14 / 14

nu componente React

Un componente React è una funzione che riceve le props e restituisce JSX: HTML scritto nel codice. Con mann for predefinit facc il playground lo disegna nell'anteprima, e React lo carica da solo.

useState tiene un valore che cambia: tien [pizze, setPizze] = useState([…]). Quando chiami setPizze(…) con una lista nuova, il componente si ridisegna.

onClick={aggiungi} chiama una funzione quando si clicca il bottone. Qui aggiungi stampa nella console e aggiunge una pizza nuova.

Hai finito il tour! Ora puoi provare gli esempi, leggere la guida alla sintassi con il tasto ? o scrivere il tuo programma.

Esercizio

Aggiungi un bottone "Leva" che stampa "Levata:" con l'ultima pizza (pizze.at(-1)) e la toglie (pizze.slice(0, -1)). Poi clicca una volta "Aggiungi" e una volta "Leva".

chiamm { useState } da "react"

mann for predefinit facc Menu() {
    tien [pizze, setPizze] = useState(["Margherita", "Marinara"])

    facc aggiungi() {
        chist è nova = `Pizza ${pizze.length + 1}`
        stamm a dì("Aggiunta:", nova)
        setPizze([...pizze, nova])
    }

    piglie (
        <main>
            <ul>
                {pizze.map((pizza) => <li key={pizza}>{pizza}</li>)}
            </ul>
            <button onClick={aggiungi}>Aggiungi</button>
        </main>
    )
}

Quando hai finito, il programma stampa

Aggiunta: Pizza 3
Levata: Pizza 3

Fai questa lezione nel playground