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 è più facile. Questo percorso di apprendimento tratterà le diverse API e i vari strumenti all'interno del dell'ecosistema che dovresti prendere in considerazione per migliorare le prestazioni l'usabilità della tua applicazione.

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

Perché è utile?

Molti contenuti spiegano come creare contenuti rapidi e affidabili applicazioni, ma non molte che mostrano come creare react veloci e affidabili diverse applicazioni. Queste guide trattano tutto questo dal punto di vista delle reazioni dove solo librerie, API e funzionalità specifiche l'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 accessibili. Per questo motivo, una conoscenza di base di React è obbligatoria.

Crea app React

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

Su una shell della riga di comando, devi solo eseguire quanto segue per creare un nuovo 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 bootstrap.

Sono presenti più file di configurazione e script di build che CRA utilizza per configurare un processo di compilazione webpack e di Babel che include una Configurazione di Jest per i test. Per semplificare le cose questo file è nascosto e non è accessibile finché non esegui la rimozione da CRA. it è sempre meglio evitare l'espulsione quando è possibile, poiché ciò significa affrontare tutte di questi file di configurazione come codice sorgente personale, cosa che può diventare difficile da gestire.

La struttura di directory di una nuova applicazione di CRA contiene solo i file che che dovresti modificare per poter lavorare sulla tua applicazione. La Documentazione relativa agli annunci adattabili della rete di ricerca lo spiega in dettaglio.

Passaggi successivi

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