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 viene usato per ottenere la maggior parte dell'interattività dell'utente con l'applicazione.

  • Proprietà componente: è un modo per consentire al componente padre di passare alcune informazioni come valore o 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 da poterla visualizzare 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 che si trovi all'interno della cartella per la nuova app: cd hello-world, installare le dipendenze: npm install e 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 che legge:

    <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 oppure è possibile usare il terminale VS Code integrato (CTRL + ') e avviare il server di sviluppo da questa posizione.

    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 http://localhost:5173 nel browser.

Struttura dei file dell'applicazione

La struttura dei file iniziali è simile a

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 iniziare, questi sono i file e le cartelle importanti che è necessario conoscere.

index.html è il file in cui Vite inserisce il codice dalla src cartella per l'esecuzione del browser. Questo file non deve essere modificato tranne per modificare il titolo dell'applicazione React.

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

La public cartella contiene tutti i file statici che verranno serviti direttamente al 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 subito. Rimuoveremo quasi tutto il codice boilerplate fornito da Vite e manterranno solo il codice del passaggio precedente.

    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 è il punto in cui è possibile archiviare i dati da usare nella vista.

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

    È anche necessario inizializzare lo stato locale. Restituisce useState una matrice di due valori, ovvero lo stato corrente e una set funzione. Lo stato corrente verrà chiamato come posts inizializzato come matrice vuota che è possibile riempire con i dati di post in un secondo momento dall'API usando la setPosts funzione .

    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.

    Per aggiornare lo posts stato viene usato l'hook React useEffect usando la funzione set.

    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 un bit di codice JSX all'interno dell'istruzione sottoposta return() 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 + post.title key dai dati JSON. Seguito dal corpo che visualizza l'immagine in base al valore della 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