Installare Node.js
In questo articolo trattiamo dell’installazione e della creazione dell’ambiente di lavoro per il nostro progetto React. Per prima cosa dobbiamo installare Node.js sul nostro computer. Node.js consente l’esecuzione di codice Javascript lato server. Durante lo sviluppo, quindi prima di deployare il nostro codice su un hosting, eseguiremo il codice React, in locale sul nostro pc tramite Node.js appunto.
Recati sulla pagina ufficiale: https://nodejs.org/en/download
E seleziona Windows o Mac, per scaricare il software di Node.js, adatto al tuo sistema operativo.
Esegui il comando
node -v
Per verificare l’installazione. Il comando restituirà la versione installata di Node.js.
Ambiente di lavoro (IDE)
Adesso occorre scegliere e installare il software di editor su cui scrivere il nostro codice in React.
Consigliamo vivamente l’uso di Visual Studio Code.
Si può scaricare l’IDE di Microsoft a questo link ufficiale: https://code.visualstudio.com
Consigliamo di settare Visual Studio Code in inglese, così da poter meglio confrontarsi con i tutorial che troveremo sul web.
Dopo averlo scaricato, apriremo Visual Studio Code e cliccheremo su “Open folder” cioè apri cartella.
Selezioniamo la cartella poco prima creata.
A questo punto selezioniamo “View” nel menu principale in alto, e poi Terminal.
In basso si aprirà un terminale a linea di comando. All’interno del terminale, in alto a destra è possibile selezionare Git Bash invece di Powershell.
Sulla sinistra saranno ben visibili i file e le cartelle del progetto che creeremo a breve.
Nel terminale, eseguiamo il comando:
npm -i
In questo modo avremo installato il gestore di pacchetti/librerie che dovremo usare per il nostro progetto in React.
Con il seguente comando possiamo verificare la corretta installazione, nonché la versione di npm:
Npm -v
Creare il progetto React.js
A questo punto possiamo creare il nostro progetto React. Per fare ciò, andiamo sempre nel terminale ed eseguiamo il comando:
npx create-react-app [nomeprogetto]
Ad esempio:
npx create-react-app esempio-progetto
Attenzione: non utilizzare lettere maiuscole.
A questo punto sulla sinistra del nostro IDE, vedremo una serie di file e cartelle. Se non le vediamo, entriamo nella cartella del progetto React appena creata.
cd esempio-progetto
Eseguiamo il comando
npm start
Dopo qualche secondo, sul nostro browser si aprirà una finestra su localhost alla porta 3000, n cui vedremo la nostra web app in ReactJs.
Repository del progetto in progress su GitHub: https://github.com/DoAgency/ReactJs
Per contattarci puoi usare la pagina dedicata.