Vuoi rendere il tuo sito React il più veloce e accessibile possibile? Sei nel posto giusto.
React è una libreria open source che semplifica la creazione di UI. Questo percorso di apprendimento illustra diverse API e strumenti all'interno dell'ecosistema che dovresti prendere in considerazione per migliorare il rendimento e l'usabilità della tua applicazione.
Questa guida ti mostrerà come iniziare a utilizzare un'applicazione React. In tutte le altre guide in 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 rapide e affidabili, ma non molti che mostrano come creare applicazioni React rapide 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
Sebbene entrambi questi concetti verranno trattati se necessario, tutte le guide e i codelab di questa sezione si concentreranno invece su come creare siti React rapidi 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à di base integrate, tra cui un sistema di compilazione contenente un bundler di moduli (webpack) e un transpiler (Babel).
In una shell a 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 più file di configurazione e script di compilazione che CRA utilizza per configurare un processo di compilazione webpack e Babel che include una configurazione di base di Jest per i test. Per semplificare le cose per l'utente, questi file sono nascosti e non è possibile accedervi finché non esci 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 CRA contiene solo i file che devi effettivamente modificare per lavorare all'applicazione. La documentazione CRA lo spiega nel dettaglio.
Passaggi successivi
Ora che sai come iniziare a creare un'app con Create React App, scopri come migliorare il rendimento e l'accessibilità della tua app con tutte le guide di questo percorso di apprendimento:
- Suddivisione del codice con React.lazy e Suspense
- Virtualizza elenchi di grandi dimensioni con la finestra di reazione
- Precaching in Create React App con Workbox
- Route di pre-rendering con reazioni-snap
- Aggiungere un file manifest dell'app web con Create React App
- Controllo dell'accessibilità con react-axe ed eslint-plugin-jsx-a11y