CREAZIONE DI UN NUOVO PROGETTO REACT

In questa sezione andremo a vedere come creare un nuovo progeto react e quali sono le prime modifiche da fare ai file

Come prima cosa creare una cartella nella quale salvare il progetto, all'interno della cartella aprire una scheda del terminale ed eseguire il seguente comando:

						
npx create-react-app nomeProgetto
                        
                    

La creazione della progetto prototipo può richiedere anche alcuni minuti

Se durante la creazione di un nuovo progetto si verifica un errore simile al seguente fare riferimento alla soluzione QUI

                    
You are running Node 12.22.9.

Create React App requires Node 14 or higher.
Please update your version of Node.
                    
                

AVVIO DEL PROGETTO APPENA CREATO

Dopo aver creato il progetto prototipo andiamo ad avviarlo per poterlo visualizzare nel web

Per poter avviare il progetto è necessario aprire una scheda del terminale (nella cartella o direttamente da Visual Studio Code) ed eseguire il seguente comando:

                    
npx start
                    
                

La scheda del terminale non va chiusa ma mantenuta aperta, altrimenti il sito non sarà più accessibile!

DOWNLOAD DEI MODULI NECESSARI AD UN PROGETTO

Qui sotto è spiegato come scaricare i moduli necessari per il funzionamento di un progetto

Spesso quando condividiamo o carichiamo su un drive un sito react non includiamo la cartella "node_modules" contenente tutti i moduli necessari per il funzionamento del sito, questo perchè essa ha dimensioni elevate (già 300 MB nei primi progetti), è però possibile scaricare tuttele dipendenze richieste (presenti nel file package.json) digitando in una scheda del terminale aperta all'interno della cartella del progetto il seguente comando:

                    
npm install
                    
                

PRIME MODIFICHE AL PROGETTO

Dopo aver creato e avviato il progetto prototipo procediamo con le prime modifiche ai file

1 · Cancellare il contenuto del file "App.js"
2 · Cancellare il contenuto del file "App.css"
3 · Rimuovere i tag <React.StrictMode></React.StrictMode> lasciando solo <App/> per evitare problemi con i controlli
4 · Eliminare i file di test