Introduzione

Completato

I componenti sono unità indipendenti riutilizzabili e costituiscono il nucleo di qualsiasi applicazione React. I componenti possono avere proprietà personalizzate, che consentono di passare dati in un componente, rendendolo riutilizzabile in scenari diversi. È anche possibile usare dati complessi oltre a stringhe e tipi primitivi, aumentando le funzionalità dei componenti.

Obiettivi

Contenuto del modulo

• Visualizzare dati dinamici.
• Visualizzare elenchi di dati.
• Aggiungere proprietà ai componenti.
• Usare oggetti e tipi di dati complessi.

Prerequisiti

Competenze

• Conoscenza di HTML, CSS e JavaScript
• Conoscenza di base di React e dei relativi componenti
• Conoscenza della gestione dei pacchetti con Node.js e npm
• Conoscenza di Git

Software installato in locale

• Node.JS
• Un editor di codice, ad esempio Visual Studio Code
• Git

Clonare il progetto e aprire il codice in Visual Studio Code

Questo modulo usa un progetto iniziale.

1. Per ottenere il progetto iniziale, eseguire il codice seguente in una finestra di comando o del terminale. Questa operazione clona il repository e apre la cartella starter in Visual Studio Code.

   # Windows
   git clone https://github.com/MicrosoftDocs/mslearn-react
   cd mslearn-react\code\2-component-data\start
   code .
   
   # macOS or Linux
   git clone https://github.com/MicrosoftDocs/mslearn-react
   cd mslearn-react/code/2-component-data/start
   code .
   

2. Aprire il terminale integrato di Visual Studio Code selezionando Visualizza>Terminale (oppure premendo CTRL-` in Windows o CMD-` in un Mac).

3. Eseguire il codice seguente nel terminale per installare i pacchetti necessari e avviare il server di sviluppo.

   npm install
   npm start
   

4. Verrà aperto automaticamente il browser predefinito. In caso contrario, aprire il browser e passare a http://locahost:8080. Verrà visualizzata la pagina del progetto iniziale.