Lesson 14 / 14

nu componente React

A React component is a function that takes props and returns JSX: HTML written in the code. With mann for predefinit facc the playground draws it in the preview, and loads React by itself.

useState holds a value that changes: tien [pizze, setPizze] = useState([…]). When you call setPizze(…) with a new list, the component draws itself again.

onClick={aggiungi} calls a function when the button is clicked. Here aggiungi prints to the console and adds a new pizza.

You finished the tour! Now you can try the examples, read the syntax reference with the ? button, or write your own program.

Exercise

Add a "Leva" button that prints "Levata:" with the last pizza (pizze.at(-1)) and removes it (pizze.slice(0, -1)). Then click "Aggiungi" once and "Leva" once.

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>
    )
}

When you are done, the program prints

Aggiunta: Pizza 3
Levata: Pizza 3

Do this lesson in the playground