Introduzione

  • 4 minuti

Per creare un'applicazione interattiva, occorre essere in grado di modificare i dati e rispondere alle richieste dell'utente. In React questa funzionalità viene gestita tramite lo stato e gli eventi.

Lo stato è costituito da dati che possono essere aggiornati e condivisi tra i componenti dell'intera applicazione. Gli eventi consentono di gestire tutti i modi in cui un utente può interagire con l'applicazione, ossia i clic, la digitazione e i tocchi.

Obiettivi

Contenuto del modulo:

  • Aggiungere lo stato a un'applicazione.
  • Aggiungere i gestori di eventi.
  • Usare l'hook Effect per rispondere alle modifiche dello stato.

Prerequisiti

  • Conoscenza di JavaScript, HTML e CSS
  • Conoscenza di base dei componenti di React
  • Un editor di codice, ad esempio Visual Studio Code
  • Node.js installato in locale
  • Git installato in locale
  • Progetto iniziale descritto nella sezione seguente

Clonare il progetto

Questo modulo usa un progetto iniziale. Clonare il progetto e aprirlo in Visual Studio Code.

  1. Per ottenere il progetto iniziale, eseguire la procedura seguente in una finestra di comando o una finestra del terminale. Questo passaggio clona il repository e apre la cartella start in Visual Studio Code.

    # Windows
git clone https://github.com/MicrosoftDocs/mslearn-react
cd mslearn-react\code\3-state-events\start
code .

    # macOS or Linux
git clone https://github.com/MicrosoftDocs/mslearn-react
cd mslearn-react/code/3-state-events/start
code .

  2. In Visual Studio Code aprire il terminale integrato selezionando Visualizza>Terminale. In alternativa, premere CTRL+`. In un Mac premere CMD+`.

  3. Nel terminale eseguire il codice riportato di seguito per installare i pacchetti necessari e avviare il server di sviluppo.

    npm install
npm start

  4. Dovrebbe aprirsi automaticamente il browser predefinito. In caso contrario, aprire il browser e passare a http://locahost:8080. Si aprirà la pagina iniziale.