Avviare un nuovo progetto React è molto complicato, con così tanti strumenti di creazione. Utilizza molte dipendenze, file di configurazione e altri requisiti come Babel, Webpack, ESLint prima di scrivere una singola riga di codice React. Lo strumento CLI Crea app React rimuove tutte queste complessità e semplifica l'app React. Per questo, devi installare il pacchetto utilizzando NPM, quindi eseguire alcuni semplici comandi per ottenere un nuovo progetto React.

IL crea-react-app è uno strumento eccellente per i principianti, che ti consente di creare ed eseguire progetti React molto rapidamente. Non richiede alcuna configurazione manuale. Questo strumento racchiude tutte le dipendenze richieste come Webpack , Babele per il progetto React stesso e quindi devi concentrarti solo sulla scrittura del codice React. Questo strumento configura l'ambiente di sviluppo, offre un'esperienza di sviluppo eccellente e ottimizza l'app per la produzione.

Requisiti

L'app Create React è gestita da Facebook e può funzionare su qualsiasi piattaforma , ad esempio macOS, Windows, Linux, ecc. Per creare un progetto React utilizzando create-react-app, devi aver installato le seguenti cose nel tuo sistema.

1. Versione del nodo >= 8.10
2. Versione NPM >= 5.6

Controlliamo la versione corrente di Nodo E NPM nel sistema.

Eseguire il comando seguente per verificare la versione del nodo nel prompt dei comandi.

 $ node -v 

Eseguire il comando seguente per verificare la versione di NPM nel prompt dei comandi.

 $ npm -v 

Installazione

Qui impareremo come installare React utilizzando CRA attrezzo. Per questo, dobbiamo seguire i passaggi indicati di seguito.

Installa React

Possiamo installare React utilizzando il gestore pacchetti npm utilizzando il seguente comando. Non è necessario preoccuparsi della complessità dell'installazione di React. Il gestore pacchetti npm create-react-app gestirà tutto ciò che è necessario per il progetto React.

 C:Usersjavatpoint> npm install -g create-react-app 

Crea un nuovo progetto React

Una volta completata l'installazione di React, possiamo creare un nuovo progetto React utilizzando il comando create-react-app. Qui scelgo il nome 'reactproject' per il mio progetto.

 C:Usersjavatpoint> create-react-app reactproject 

NOTA:Possiamo combinare i due passaggi precedenti in un unico comando utilizzandonpx. npx è uno strumento di gestione dei pacchetti fornito con npm 5.2 e versioni successive.

 C:Usersjavatpoint> npx create-react-app reactproject 

Il comando precedente richiederà del tempo per installare React e creare un nuovo progetto con il nome 'reactproject'. Ora possiamo vedere il terminale come di seguito.

La schermata sopra indica che il progetto React è stato creato con successo sul nostro sistema. Ora dobbiamo avviare il server in modo da poter accedere all'applicazione sul browser. Digitare il seguente comando nella finestra del terminale.

 $ cd Desktop $ npm start 

NPM è un gestore di pacchetti che avvia il server e accede all'applicazione sul server predefinito http://localhost:3000. Ora otterremo la seguente schermata.

Successivamente, apri il progetto nell'editor di codice. Qui sto usando Visual Studio Code. La struttura predefinita del nostro progetto è simile all'immagine seguente.

Nell'applicazione React, sono presenti diversi file e cartelle nella directory principale. Alcuni di essi sono i seguenti:

moduli_nodo:Contiene la libreria React e tutte le altre librerie di terze parti necessarie.pubblico:Detiene il patrimonio pubblico dell'applicazione. Contiene il file index.html in cui React monterà l'applicazione per impostazione predefinita sull'elemento.origine:Contiene i file App.css, App.js, App.test.js, index.css, index.js e serviceWorker.js. In questo caso, il file App.js è sempre responsabile della visualizzazione della schermata di output in React.pacchetto-lock.json:Viene generato automaticamente per qualsiasi operazione in cui il pacchetto npm modifica l'albero node_modules o package.json. Non può essere pubblicato. Verrà ignorato se trova un posto diverso dal pacchetto di livello superiore.pacchetto.json:Contiene vari metadati richiesti per il progetto. Fornisce informazioni a npm, che consentono di identificare il progetto e di gestire le dipendenze del progetto.README.md:Fornisce la documentazione da leggere sugli argomenti di React.

Configurazione dell'ambiente di reazione

Ora apri il file src >> App.js file e apportare le modifiche che si desidera visualizzare sullo schermo. Dopo aver apportato le modifiche desiderate, salva il file. Non appena salviamo il file, Webpack ricompila il codice e la pagina si aggiornerà automaticamente e le modifiche si rifletteranno sullo schermo del browser. Ora possiamo creare tutti i componenti che vogliamo, importando il componente appena creato all'interno del file App.js file e quel file verrà incluso nel nostro file main indice.html file dopo la compilazione tramite Webpack.

Successivamente, se vogliamo realizzare il progetto per la modalità produzione, digitiamo il seguente comando. Questo comando genererà la build di produzione, che è ottimizzata al meglio.

 $ npm build