Realizzare un’applicazione React con Create React App (CRA)

Finora abbiamo visto dei semplici esempi in React in cui abbiamo importato react.js e react-dom.js direttamente all’interno di una pagina HTML. Abbiamo poi inserito i nostri componenti all’interno di un tag script o a limite abbiamo importato un file esterno. Per realizzare applicazioni più complicate, il metodo visto finora non è sicuramente il più efficiente. Non possiamo usufruire di utili funzionalità che ci aiutano durante la fase di sviluppo delle nostre app in React.

Una delle critiche che veniva fatta a React, fino a qualche tempo fa, era che, nonostante la semplicità della libreria, prima di iniziare a lavorare effettivamente a un progetto, si finiva per passare più tempo a cercar di far funzionare insieme i vari tool necessari alla configurazione iniziale di un’ applicazione.

Il team React ha fin dall’inizio consigliato di utilizzare Webpack per lo sviluppo delle applicazioni.

Webpack è uno strumento estremamente potente. Si tratta di un "module bundler". In pratica Webpack prende i vari file presenti nel nostro progetto, (codice sorgente in Javascript, CSS, immagini, svg, font ecc…) li combina in maniera intelligente e restituisce un file finale Javascript che viene solitamente nominato bundle.js e che può essere incluso all’interno di un file HTML (Webpack permette di usare un plugin che crea in automatico anche il file HTML). Inoltre, Webpack fornisce alcune funzionalità avanzate, per esempio permette di caricare una parte del codice presente nel file finale solo se e quando è necessario (lazy loading) o di dividere il file bundle.js in più file. Durante la fase di sviluppo di un progetto, risulta molto utile webpack-dev-server grazie al quale possiamo usufruire di funzionalità come Hot Module Replacement che permette, per esempio, di modificare un componente e vedere immediatamente nel browser l’aggiornamento senza dover ricaricare la pagina.

Webpack può essere usato per sostituire Grunt o Gulp in qualsiasi progetto Javascript (viene spesso anche usato in Angular), ma può risultare a volte complicato riuscire ad ottenere la configurazione voluta.

Primi passi con create-react-app (CRA)

Create React app (CRA) è un progetto che nasce con l’obiettivo di rimuovere le difficoltà di configurazione di webpack. Usa webpack e fornisce una configurazione già pronta per essere usata in pochi click. In questo modo ci si può concentrare sullo sviluppo dell’applicazione senza pensare troppo alle diverse configurazioni. CRA permette anche di personalizzare la configurazione, se si ritiene necessario.

Per installare create-react-app possiamo usare NPM. Nel terminale, lanciamo il seguente comando per installare il package globalmente.

npm install -g create-react-app

Una volta terminata l’installazione, dovremo lanciare il seguente comando per inizializzare il nostro progetto.

create-react-app <directory-base-del-progetto>

Creiamo quindi una nuova cartella e lanciamo il comando appena visto.

# creiamo la directory e spostiamoci al suo interno
mkdir esempio-create-react-app && cd $_

# lanciamo il comando create-react-app (usiamo il punto per specificare la cartella corrente)
create-react-app .

L’installazione di tutte le dipendenze richiede un po’ di tempo al termine del quale dovreste vedere un risultato simile a quello mostrato nell’immagine sottostante.

Possiamo vedere che vengono elencati alcuni dei comandi che è possibile lanciare. Con yarn start lanciamo il sever locale da usare durante lo sviluppo della nostra applicazione. Useremo yarn run build per creare i file da usare in produzione. Con il comando yarn test possiamo eseguire i test che scriveremo per la nostra applicazione. Create React App usa Jest che è un test framework realizzato da Facebook per semplificare il processo di test delle applicazioni. Infine, col comando yarn run eject possiamo distaccarci dalla configurazione prestabilità e apportare le modifiche che preferiamo, per creare la nostra configurazione personalizzata a partire da quella fornita da CRA. Potremo intervenire direttamente sul file di configurazione di Webpack. Può essere una procedura utile in alcuni casi ma come viene suggerito dall’immagine riportata sopra: non possiamo tornare indietro!

Ci viene quindi suggerito di lanciare il comando yarn start, ma anche lanciando npm start il risultato è analogo. In ogni modo, digitiamo yarn start e usiamo il nostro editor preferito per analizzare la struttura dei file creata da create-react-app. Dovreste intanto visualizzare un messaggio simile a quello mostrato sotto nella console dei comandi e dovrebbe aprirsi il vostro browser predefinito all’indirizzo http://localhost:3000/.

Nel browser invece dovreste vedere una pagina come quella dell’immagine sottostante.

Panoramica su create-react-app (CRA)

Vediamo ora il contenuto della directory del nostro progetto.

Partiamo dal file App.js all’interno della cartella src. Questo conterrà il componente principale che viene mostrato all’interno della finestra del browser dell’immagine riportata sopra. Potete notare che il file App.js utilizza il sistema dei moduli di ES6 (per maggiori delucidazioni sull’uso dei moduli potete consultare la guida dettagliata sui moduli di Mozilla). Grazie a Webpack, è possibile importare, direttamente nel file App.js, il file App.css, contenente lo stile specifico di questo componente, e il logo che verrà utilizzato all’interno dell’elemento immagine nel metodo render() del componente App. Notate che i package installati con NPM e presenti fra le dipendenze del progetto nel file package.json, possono essere importati senza specificare un percorso ma indicando solamente il nome del package. Per i componenti da noi creati e per gli altri file dovrà essere specificato un percorso relativo. Alla fine, viene esportato il componente App in modo da poterlo importare all’interno del file index.js.

// src/App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

Se effettuiamo una modifica al nostro componente App e salviamo il file, il browser ricaricherà la pagina in automatico con la versione aggiornata del componente stesso.

Un’altra funzionalità estremamente utile, offerta da CRA, è la segnalazione di eventuali errori all’interno del terminale in cui abbiamo lanciato ili comando npm start o yarn start. Supponiamo di cancellare per esempio la lettera ‘s’ della keyword extends nella definizione del nostro componente.

// Attenzione: codice errato!

class App extend  Component{
  // ...        ^
}

Non appena salviamo, vedremo un messaggio di errore anche all’interno della finestra del browser che ci segnalerà in maniera abbastanza precisa che tipo di errore abbiamo commesso.

Passiamo ora al file src/index.js che è il file principale del nostro progetto. In esso chiamiamo la funzione ReactDOM.render() passando come parametri il componente visto nel file App.js e il nodo radice della nostra applicazione che troviamo all’interno del file public/index.html.

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Apriamo a questo punto il file index.html che si trova all’interno della cartella public. Qui troviamo l’elemento <div> con id uguale a #root che sarà il nodo radice della nostra applicazione.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tag above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start`.
      To create a production bundle, use `npm run build`.
    -->
  </body>
</html>

All’interno del progetto appena creato sono presenti anche altri file che potete esplorare. Un file interessante è il file App.test.js che si trova nella directory src. Questo è il file in cui scrivere il codice per testare il componente App. All’interno di questa guida non tratteremo l’argomento, potete però leggere la documentazione di Jest sulla pagina ufficiale.

Nel prossimo articolo vedremo come ricevere dati da un server e usarli all’interno della nostra applicazione.