Per iniziare: ottimizza la tua app React

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

Houssein Djirdeh

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

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

Perché è utile?

Esistono molti contenuti che spiegano come creare applicazioni veloci e affidabili, ma non molti che 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?

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

  • Come utilizzare React
  • Funzionamento dietro le quinte di React

Anche se entrambi questi concetti verranno affrontati all'occorrenza, tutte le guide e i codelab in questa sezione si concentreranno invece su come creare siti React veloci e accessibili. Per questo motivo, è richiesta 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à di base integrate, tra cui un sistema di build contenente un bundler di moduli (webpack) e un transpiler (Babel).

Nella shell della riga di comando, devi solo eseguire quanto segue per creare una nuova applicazione:

npx create-react-app app-name

Al termine dell'esecuzione del comando, 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.

Esistono diversi 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 esegui la rimozione da CRA. È sempre meglio evitare l'esclusione, quando possibile, poiché ciò significa assumere tutti questi file di configurazione come codice sorgente personale, che può diventare difficile da gestire.

La struttura di directory di una nuova applicazione di CRA contiene solo i file che dovresti modificare per poter lavorare sull'applicazione. La documentazione relativa alle estensioni predefinite spiega 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: