Realizzare UI con React - 6. Creare una Nuova React App
Tags: react
Published: 2020-09-21 09:23:41

---
title: Realizzare UI con React - 6. Creare una Nuova React App
published: true
date: 2020-09-16 07:48:00 UTC
tags: React
canonical_url: https://www.matteospreafico.com/realizzare-ui-con-react-6-creare-una-nuova-react-app/
series: Corso di React
description: Usando JSX per la nostra React app dobbiamo trasformare il code per eseguirlo nel browser. Vediamo come usare create-react-app per configurare Webpack.
---

JSX è bellissimo, ma deve essere convertito in normale JavaScript prima di arrivare al browser e si può usare [Babel](https://github.com/babel/babel) per questa operazione. Possiamo chiamare Babel dal tool, come [Webpack](https://github.com/webpack/webpack), che usiamo per impacchettare tutti i nostri file (JavaScript, CSS, immagini, etc.) per i progetti web.

Per semplificare la configurazione iniziale possiamo usare il pacchetto Create React App di Facebook che gestisce tutto questo per noi! È uno strumento molto comodo per iniziare a creare una applicazione React dato che configura tutto quello che serve senza chiedere nulla! Per installare Create React App si può usare npm da linea di comando come indicato di seguito:

```
npm install -g create-react-app

```
<figcaption>Installare globalmente Create React App</figcaption>

Se avete problemi ad installare il pacchetto globalmente, potete consultare la [documentazione di npm](https://docs.npmjs.com/), vi consiglio di verificare di avere i permessi corretti. Per sapere dove i pacchetti globali sono installati potete usare il seguente comando:

```
npm list -g
```
<figcaption>Verificare dove sono installati i pacchetti globali</figcaption>

Ora creiamo la nostra prima applicazione React chiamata `contatti` per usare il codice JSX che abbiamo creato in precedenza

```
create-react-app contatti
```
<figcaption>Creiamo l'applicazione React <code>contatti</code></figcaption>

Come potete vedere eseguendo il comando, `create-react-app` installerà `react` e `react-dom` che abbiamo già visto ed anche il pacchetto `react-scripts`. Questo pacchetto contiene molte librerie utili. Installa Babel in modo da poter usare le ultime funzionalità di JavaScript oltre che JSX. Inoltre installa anche Webpack in modo da poter impacchettare le risorse per rilasciare la nostra applicazione ed il server di sviluppo Webpack che ci aiuta durante lo sviluppo e fornisce la funzionalità di aggiornamento automatico quando modifichiamo i sorgenti.

[Qui potete trovare i sorgenti dell'applicazione React appena creata](https://github.com/matsprea/create-react-app-contatti/commit/4d46fa336695506bbaf9d3efd44b38693b8984f8).

### Yarn

Guardando il risultato di `create-react-app` vedrete che ci viene consigliato di usare `yarn` per gestire la nostra applicazione. Nel caso non lo conosciate, `yarn` è un gestore di pacchetti simile a `npm`, è stato creato da Facebook per migliorarne alcune funzionalità ed aggiungerne di nuove. Se non volete installare `yarn`, non è un problema, uno dei suoi punti di forza è che quasi tutti i suoi comandi possono essere eseguiti anche da `npm`. Quindi se il comando consigliato per eseguire il server di sviluppo è `yarn start`, possiamo usare `npm start` per ottenere lo stesso risultato!

### Esploriamo l'applicazione React

Alla fine dell'esecuzione di `create-react-app` otteniamo una lista di comandi che ci permettono di eseguire la nostra applicazione, testarla e rilasciarla. Se diamo un'occhiata al codice creato, troveremo molti commenti nei vari files per spiegarci come funzionano e sono stati usati, provate a darci un'occhiata.

Ora spostiamoci nella cartella che contiene l'applicazione e facciamo partire il server di sviluppo col comando `yarn start`. Noterete che in automatico viene aperta una nuova finestra del browser con la nostra applicazione al suo interno. Decisamente comodo!

![Applicazione React create con create-react-app](https://res-2.cloudinary.com/hdlxbiakh/image/upload/q_auto/v1/ghost-blog-images/image.png)<figcaption>Applicazione React create con <code>create-react-app</code></figcaption>

Provvediamo quindi ad aprire il file `src/App.js` nel nostro editor e vedremo il codice che è in esecuzione nel browser. Il codice che vedrete dovrebbe esservi abbastanza familiare a questo punto. Si tratta di un componente che disegna un `div` che a sua volta contiene un `header` con un immagine `img`, un paragrafo `p` ed un link `a`. Ricordatevi che nessuno di questi sono testo, ma ciascuno di questi elementi è creato tramite la chiamata alla funzione `createElement()` ed usiamo JSX per rendere la sintassi più concisa.

Una delle comodità di `create-react-app` è che configura automaticamente il reload dell'applicazione quando eseguiamo delle modifiche al sorgente. Quindi se ora modificate il [testo del paragrafo](https://github.com/matsprea/create-react-app-contatti/blob/4d46fa336695506bbaf9d3efd44b38693b8984f8/src/App.js#L11) in "Ciao Mondo!" e salvate la modifica, il browser si aggiornerà automaticamente mostrando i cambiamenti.

![Ciao Mondo!](https://res-2.cloudinary.com/hdlxbiakh/image/upload/q_auto/v1/ghost-blog-images/image.png)<figcaption>Aggiornamento automatico</figcaption>

Una cosa che non è presente nel file `src/App.js` è il riferimento a `ReactDOM` od a come questo elemento è inserito nel DOM della pagina. Se esploriamo la cartella che contiene questo file ne troviamo un altro interessate `src/index.js`, proviamo a darci un'occhiata. `index.js` importa `App` dal file `./App` e disegna l'applicazione nell'elemento `root` che è già presente nel documento. Ora vi starete chiedendo allo stesso modo da dove viene l'elemento `root`. Per rispondere a questa domanda, date un'occhiata al file `public/index.html`. Qui potete vedere il codice HTML dove viene eseguito il JavaScript e troverete il [`div` con id `root`](https://github.com/matsprea/create-react-app-contatti/blob/4d46fa336695506bbaf9d3efd44b38693b8984f8/public/index.html#L31).

Quando eseguiamo la build, Webpack genererà un pacchetto con tutto il nostro JavaScript ed inserirà uno script tag nella pagine proprio dopo questo div, in questo modo l'applicazione prende vita.

Per avere più informazione su come funziona `create-react-app`, vi consiglio di leggere il file `README.md` che contiene delle istruzioni e delle guide dettagliate su come usarlo al meglio e modificarlo a seconda delle proprie esigenze.

La documentazione completa di `create-react-app` è disponibile sul sito [https://create-react-app.dev/](https://create-react-app.dev/)