Condividi tramite

Esercitazione: React in Windows per principianti

  • Articolo

Se non si ha familiarità con l'uso di React, questa guida aiuterà a iniziare illustrando alcuni concetti di base.

Prerequisiti

Alcuni termini e concetti di base

React è una libreria JavaScript per la creazione di interfacce utente.

  • È open source, vale a dire che è possibile contribuirvi inviando problemi o richieste pull. (Proprio come questi documenti!)

  • È dichiarativo, vale a dire che si scrive il codice che si vuole e React accetta il codice dichiarato ed esegue tutti i passaggi JavaScript/DOM per ottenere il risultato desiderato.

  • È basato su componenti, ovvero le applicazioni vengono create usando moduli di codice indipendenti prefabbricati e riutilizzabili che gestiscono il proprio stato e possono essere associati con il framework React, consentendo di passare i dati attraverso l'app mantenendo lo stato fuori dal DOM.

  • Il motto di React è "Una volta imparato, scrivi dove vuoi". L'intenzione è quella di riutilizzare il codice e non fare ipotesi su come si userà l'interfaccia utente React con altre tecnologie, ma rendere riutilizzabili i componenti senza la necessità di riscrivere il codice esistente.

  • JSX è un'estensione di sintassi per JavaScript scritta da usare con React simile a HTML, ma è in realtà un file JavaScript che deve essere compilato o tradotto in JavaScript normale.

  • DOM virtuale: DOM è l'acronimo di Document Object Model e rappresenta l'interfaccia utente dell'app. Ogni volta che lo stato dell'interfaccia utente dell'app cambia, il DOM viene aggiornato per rappresentare la modifica. Quando un DOM viene aggiornato di frequente, le prestazioni diventano lente. Un DOM virtuale è solo una rappresentazione visiva del DOM, quindi quando lo stato dell'app cambia, viene aggiornato il DOM virtuale anziché quello reale, riducendo il costo delle prestazioni. Si tratta di una rappresentazione di un oggetto DOM, ovvero una copia leggera.

  • Visualizzazioni: sono le viste visualizzate dall'utente nel browser. In React la visualizzazione è correlata al concetto di elementi di rendering che si desidera che un utente visualizzi sullo schermo.

  • Stato: fa riferimento ai dati archiviati da visualizzazioni diverse. Lo stato si basa in genere sull'utente e sulle operazioni eseguite dall'utente. Ad esempio, l'accesso a un sito web può mostrare il profilo utente (visualizzazione) con il nome (stato). I dati sullo stato cambieranno in base all'utente, ma la visualizzazione rimarrà invariata. Lo stato serve a ottenere la maggior parte dell'interattività dell'utente con l'applicazione.

  • Proprietà componente: è un modo che consente al componente padre di traferire alcune informazioni, come un valore o dei dati (inclusi oggetti, matrici e funzioni) ai relativi componenti figlio. Le proprietà sono di sola lettura e non possono essere aggiornate dal componente figlio.

Provare a usare React in Visual Studio Code

Esistono molti modi per creare un'applicazione con React (vedere la Panoramica di React per degli esempi). Questa esercitazione illustra come usare Vite per inoltrare rapidamente la configurazione per un'app React funzionante in modo che sia possibile visualizzarla in esecuzione e concentrarsi sull'esperimento con il codice, non ancora in relazione agli strumenti di compilazione.

  1. Usare Vite in Windows o WSL (vedere i prerequisiti precedenti) per creare un nuovo progetto: npm create vite@latest hello-world -- --template react

  2. Modificare le directory in modo da trovarsi all'interno della cartella per la nuova app: cd hello-world, installare le dipendenze: npm install quindi avviare il server di sviluppo locale: npm run dev

    La nuova app React Hello World compilerà e aprirà il Web browser predefinito per indicare che è in esecuzione in http://localhost:5173.

  3. Arrestare l'esecuzione dell'app React (CTRL+c) e aprire i file di codice in VS Code immettendo: code .

  4. Trovare il file src/App.jsx e trovare la sezione dell'intestazione con scritto:

    <p>Edit <code>src/App.jsx</code> and save to test HMR</p>

    Modificare in lettura:

    <p>Hello World! This is my first React app.</p>

  5. Aprire la finestra del terminale e avviare il server di sviluppo locale: npm run dev altrimenti usare il terminale integrato di VS Code (Ctrl + `) e avviare il server di sviluppo da qui.

    Screenshot dell'app React HelloWorld nel browser

Durante lo sviluppo dell'app React è possibile mantenere in esecuzione il server di sviluppo locale e tutte le modifiche verranno immediatamente visualizzate in http://localhost:5173 nel browser.

Struttura di file dell'applicazione

La struttura di file iniziale ha un aspetto simile al seguente

hello-world
├── node_modules 
├── README.md 
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── assets
│   │   └── react.svg
│   ├── index.css
│   └── main.jsx
└── vite.config.js

Per i principianti, si tratta dei file e delle cartelle importanti che è necessario conoscere.

index.html è il file in cui Vite inserisce il codice tratto dalla cartella src in modo che il browser lo esegua. Questo file non deve essere modificato se non per modificare il titolo dell'applicazione React.

La cartella src è la posizione in cui risiede il codice sorgente dell'applicazione React. Si tratta della posizione in cui si creano i componenti personalizzati, i file CSS e altri file di codice necessari per compilare l'applicazione. Questi file vengono analizzati e compilati dagli strumenti di compilazione di Vite per creare il progetto React finale.

La cartella public contiene tutti i file statici che verranno distribuiti direttamente nel browser. Questi file non vengono elaborati da Vite.

Provare a usare React con un'API

Usando la stessa Hello World! app compilata con React e aggiornata con Visual Studio Code, è possibile provare ad aggiungere una chiamata API per visualizzare alcuni dati.

  1. Iniziamo da capo. Rimuoveremo quasi tutto il codice boilerplate fornito da Vite e manterremo solo il codice del passaggio precedente.

    Ora il file app.jsx dovrebbe ora essere simile al seguente:

    import "./App.css";

function App() {
  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;

    Screenshot dell'app React HelloWorld semplificata nel browser

  2. Verrà quindi impostato uno stato locale in cui è possibile salvare i dati da un'API. Uno stato è la posizione in cui è possibile archiviare i dati da usare nella vista.

    Per aggiungere uno stato locale, è necessario innanzitutto importare l'hook React useState che permette di aggiungere al componente una variabile di stato.

    Dobbiamo anche inizializzare lo stato locale. L'hook useState restituisce una matrice di due valori; lo stato attuale e una funzione set. Lo stato attuale verrà chiamato posts inizializzato come matrice vuota che è possibile riempire con i dati registrati in un secondo momento dall'API usando la funzione setPosts.

    Ora il file app.jsx dovrebbe ora essere simile al seguente:

    import { useState } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;

  3. Per chiamare un'API con i dati da usare nell'app React, si userà il metodo .fetch JavaScript. L'API che chiameremo è JSONPlaceholder, un'API gratuita per il test e la creazione di prototipi che fornisce dati segnaposto fittizi in formato JSON.

    Usiamo l'hook React useEffect per aggiornare lo stato di posts con la funzione di impostazione.

    import { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const url = "https://jsonplaceholder.typicode.com/albums/1/photos";
    fetch(url)
      .then((response) => response.json())
      .then((data) => setPosts(data));
  }, []);

  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;

  4. Si esaminerà ora il tipo di dati che l'API ha salvato nello stato posts. Di seguito è riportato il contenuto del file dell'API JSON fittizio. È possibile vedere il formato in cui sono elencati i dati, con le categorie: "albumId", "id", "title", "url" e "thumbnailUrl".

    [
  {
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "https://via.placeholder.com/600/92c952",
    "thumbnailUrl": "https://via.placeholder.com/150/92c952"
  },
  {
    "albumId": 1,
    "id": 2,
    "title": "reprehenderit est deserunt velit ipsam",
    "url": "https://via.placeholder.com/600/771796",
    "thumbnailUrl": "https://via.placeholder.com/150/771796"
  }
]

  5. Per visualizzare i dati dell'API è ora necessario aggiungere del codice JSX all'interno dell'istruzione return() sottoposta a rendering. Verrà usato il metodo map() per visualizzare i dati dell'oggetto posts in cui è stato archiviato come chiave. Ogni post visualizzerà un'intestazione con "ID #" e quindi il valore della chiave post.id + il valore chiave post.title dei dati JSON. Seguito dal corpo che visualizza l'immagine in base al valore chiave thumbnailUrl.

    // rest of the code 
  return (
    <article>
      <h1>Posts from our API call</h1>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>ID #{post.id} {post.title}</h2>
          <img src={post.thumbnailUrl} />
        </article>
      ))}
    </article>
  );
}

export default App;

    App React che visualizza i dati segnaposto da un'API

Risorse aggiuntive