Per iniziare: ottimizza la tua app React

Vuoi rendere il tuo sito React più veloce e accessibile possibile? Sei nel posto giusto!

Houssein Girdeh

React è una libreria open source che semplifica la creazione di UI. Questo percorso di apprendimento tratterà diverse API e strumenti all'interno dell'ecosistema che dovresti prendere in considerazione per migliorare le prestazioni e l'usabilità della tua applicazione.

Questa guida ti mostrerà come iniziare a utilizzare un'applicazione React. Nelle altre guide di questa sezione verranno trattati argomenti per ottimizzare la velocità e l'accessibilità di un'app React.

Perché è utile?

Ci sono molti contenuti che spiegano come creare applicazioni rapide e affidabili, ma non molti mostrano come creare applicazioni React veloci e affidabili. Queste guide trattano tutto questo dal punto di vista di un'app React in cui vengono menzionate solo librerie, API e funzionalità specifiche dell'ecosistema React.

Cosa imparerai a fare?

I tutorial di questo percorso di apprendimento non sono incentrati su:

  • Come utilizzare React
  • Come funziona React in background

Sebbene entrambi questi concetti vengano affrontati quando necessario, tutte le guide e i codelab in questa sezione si concentreranno invece su come creare siti React veloci e accessibili. Per questo motivo, è necessaria una conoscenza di base di React.

Crea app React

Create React App (CRA) è il modo più semplice per iniziare a creare applicazioni React. Fornisce una configurazione predefinita con una serie di funzionalità principali integrate, tra cui un sistema di build contenente un bundler di moduli (webpack) e un transpiler (Babel).

Nella shell della riga di comando, per creare una nuova applicazione è sufficiente eseguire il comando seguente:

npx create-react-app app-name

Al termine dell'esecuzione, puoi accedere all'applicazione ed eseguirla con i seguenti comandi:

cd new-app
npm start

L'incorporamento seguente mostra la struttura della directory e la pagina web effettiva di un'applicazione CRA appena avviata con bootstrapping.

Esistono più file di configurazione e script di build che CRA utilizza per impostare un processo di compilazione Webpack e Babel che include una configurazione Jest di base per i test. Per semplificare le cose per l'utente, questi file sono nascosti e non sono accessibili finché non vengono espulsi da CRA. È sempre preferibile evitare l'espulsione ogni volta che è possibile, poiché ciò significa prendere tutti questi file di configurazione come codice sorgente personale, che può essere difficile da gestire.

La struttura di directory di una nuova applicazione CRA contiene solo i file che dovrebbero essere effettivamente modificati per funzionare sull'applicazione. La documentazione per la CRA illustra questo aspetto in dettaglio.

Passaggi successivi

Ora che sai come iniziare a creare un'app Create React, scopri come migliorare le prestazioni e l'accessibilità della tua app con tutte le guide in questo percorso di apprendimento: