Visualizzare dati dinamici

5 minuti

I componenti permettono di suddividere un'applicazione in parti logiche. In questa unità si esaminerà questa funzionalità creando un componente per il titolo di una ricetta. Si creeranno dei componenti che verranno quindi importati in App. Verrà infine illustrato come visualizzare i dati in modo dinamico.

Visualizzare dati dinamici

Per visualizzare i dati dinamici all'interno di un componente, usare la sintassi { }, detta anche Handlebars. Questo stile di sintassi è relativamente comune negli strumenti per la creazione di modelli HTML. Usare questa sintassi per passare in modo efficace alla modalità JavaScript ed eseguire quasi tutto il codice JavaScript valido.

Ad esempio, per visualizzare l'ora corrente, è possibile usare il codice seguente:

<div>{ Date.now() }</div>

Creare un componente RecipeTitle

In questo esempio si creerà un componente per il titolo di una ricetta. Si userà una variabile JavaScript per il titolo per mostrare in che modo React può visualizzare i dati dinamici. Nelle unità future verrà illustrato come usare dati più complessi.

Creare un nuovo file nella cartella src. Assegnargli il nome RecipeTitle.jsx.

Aggiungere il codice seguente al file RecipeTitle.jsx:

import React from 'react';

function RecipeTitle() {
    const title = 'Mashed potatoes';
    return (
        <h2>{ title }</h2>
    )
};
export default RecipeTitle;

Esplorare il codice

Come si può notare, viene creata una costante denominata title. Viene quindi usata la sintassi Handlebars { } per indicare a React che si vuole visualizzare il valore di title all'interno dell'elemento <h2>. Questa funzionalità di JSX consente di combinare i linguaggi JavaScript e HTML.

Usare il componente RecipeTitle

Verrà ora visualizzato RecipeTitle nell'applicazione aggiungendolo a App.

Aprire src/App.jsx.
Sotto la riga import React from 'react'; (dovrebbe essere la riga 2) aggiungere il codice seguente:
```
import RecipeTitle from './RecipeTitle'
```
Usare RecipeTitle come elemento HTML aggiungendo il codice seguente sotto la sintassi <h1>Recipe Manager</h1>:
```
<RecipeTitle />
```

Esplorare il codice

Ecco l'intero contenuto del file src/App.jsx:

import React from 'react';
import RecipeTitle from './RecipeTitle'

function App() {
    return (
        <article>
            <h1>Recipe Manager</h1>
            <RecipeTitle />
        </article>
    )
}

export default App;

RecipeTitle può essere usato in modo analogo a come è stato usato <App />, ossia come elemento HTML. Questo esempio mostra l'essenza della creazione di applicazioni React, ossia la creazione e l'uso di componenti per compilare l'applicazione.

Visualizzazione dei risultati

Salvare tutti i file. Il browser dovrebbe aggiornarsi automaticamente e visualizzare la pagina aggiornata. Il titolo Mashed potatoes viene visualizzato all'inizio della pagina.

Screenshot of a webpage that displays a recipe title.

Visualizzare dati dinamici