Vuoi rendere il tuo sito React il più veloce e accessibile possibile? Questo è il 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 le prestazioni e l'usabilità della tua applicazione.
Questa guida ti mostrerà come iniziare a utilizzare un'applicazione React. Tutte le altre guide di questa sezione trattano 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 coprono 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 di questo percorso di apprendimento non si concentrano su:
- Come utilizzare React
- Come funziona React dietro le quinte
Sebbene entrambi questi concetti verranno trattati quando necessario, tutte le guide e i codelab di 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à principali integrate, tra cui un sistema di build contenente un bundler di moduli (webpack) e un transpiler (Babel).
In una shell a riga di comando, devi solo eseguire questo comando 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 configurare un processo di build 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 esegui l'espulsione da CRA. È sempre meglio evitare l'espulsione, se possibile, poiché ciò significa assumere tutti questi file di configurazione come codice sorgente, il 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 sulla tua applicazione. La documentazione del CRA spiega questo aspetto in dettaglio.
Passaggi successivi
Ora che sai come iniziare a creare un'app Create React App, scopri come migliorare le prestazioni e l'accessibilità della tua app con tutte le guide di questo percorso di apprendimento: