Come installare React

Per installare React, occorre prima aver installato Node. Consigliamo anche di installare Yarn, un’alternativa a npm molto utilizzata in ambito React. Gli esempi di questa guida saranno comunque fatti utilizzando entrambi i metodi.

Ci sono altre alternative, sia a Node (come Deno e Bun) che a NPM e Yarn (come PNPM e, di nuovo, Bun), che ti invitiamo a prendere in considerazione dopo aver letto questa guida.

React può essere – e, tendenzialmente, viene – installato come parte di un ecosistema che permette di integrare anche un “BFF”, che non sta per “Best Friends Forever” ma per “Back-end For Front-end” e indica una parte del back-end che ha come unico obiettivo quello di inviare dati al front-end. Il sistema di questo tipo più popolare è Next.

Noi però, ai fini di questa guida, ci concentreremo su React per il front-end, per cui useremo un sistema che non prevede l’installazione di back-end o BFF.

Una volta installato Node – ed, eventualmente, Yarn – ci sono due strade possibili. Entrambe forniscono quello che ci serve per sviluppare al meglio le nostre applicazioni React (primo tra tutti: il ricaricamento automatico della pagina quando salviamo un file!); vediamole entrambe:

1. Create React App: è il pacchetto ufficiale per creare applicazioni React. Rispetto a Vite (vedi punto 2.) è più lento, perché esegue più controlli sulla correttezza del codice. È più indicato per chi sta imparando, proprio perché sottolinea più potenziali errori, e in applicazioni piccole la differenza di velocità è a malapena percepibile.
2. Vite: è più veloce di Create React App ma non esegue nessun controllo sul codice. Consigliato per le persone più esperte, mette anche a disposizione un builder degli assets che migliora le performance

In ogni caso, il primo passo è uguale per tutti: apriamo un terminale e usiamo il comando cd per spostarci nella cartella in cui vogliamo creare il progetto, oppure troviamo la cartella usando un’app per esplorare i file (Finder, esplora risorse, dipende dal sistema operativo) e apriamo un terminale in quella cartella.

Una volta che abbiamo il terminale che punta alla cartella che vogliamo, scegliamo il nome che vogliamo dare alla cartella.
Immaginiamo che sia app-name (è chiaramente un esempio):

• Per Create React App e NPM: npm init react-app app-name
• Per Create React App e Yarn: yarn create react-app app-name
• Per vite e NPM: npm create vite@latest app-name — –template react-swc
• Per vite e Yarn: yarn create vite app-name –template react-swc

Per approfondimenti, visita la documentazione ufficiale sull’installazione di Create React App e Vite

Una volta installato il tutto, le istruzioni per far partire il progetto appariranno sul terminale. Saranno cd app-name (dove app-name è il nome che hai dato alla cartella) e poi:

• Per Create React App e NPM: npm start
• Per Create React App e Yarn: yarn start
• Per vite e NPM: npm install e poi npm run dev (sono due comandi separati)
• Per vite e Yarn: yarn e poi yarn dev (sono due comandi separati)

Create React App, quando viene eseguito yarn start (o npm start) apre automaticamente il browser sulla pagina iniziale del progetto, mentre Vite, con yarn dev e npm run dev, scriverà sul terminale l’URL da inserire nel browser per vedere la pagina iniziale.

Impostazione di default

Prima di continuare, vediamo dove sono le informazioni sulla nostra app e quali file possiamo eliminare perché fanno parte dell’esempio iniziale. Prima di seguire la prossima parte, sentiti pure liberoi di aprire i file e leggere un po’ di codice, per prendere confidenza con la sintassi.

Create React App

• In public/index.html troviamo la pagina iniziale. Non c’è bisogno di modificare il body in nessun modo (lo faremo tramite React) ma possiamo modificare il contenuto di head, per esempio modificando il titolo della pagina (tag title) o la descrizione.
• In public/manifest.json ci sono le informazioni che servono quando l’applicazione viene salvata nella schermata home dei dispositivi che lo permettono. Anche in questo caso, possiamo modificare il titolo (short_name e name).
• In src/index.css troviamo le parti di CSS che si applicheranno all’intera app. Il mio consiglio è di lasciarlo così com’è, modificando eventualmente la proprietà font-family di body. Il resto è tendenzialmente applicabile a qualsiasi applicazione.
• In src/App.js troviamo l’effettivo contenuto della pagina di esempio. Il nostro consiglio è di eliminare tutto il contenuto di App.css, rinominare il file App.js in App.jsx e, in App.jsx, tenere solo la funzione App facendole restituire null. Vedremo, a breve, cosa significa. Il risultato finale dovrebbe apparire così:

// File: src/App.jsx

import "./App.css";

function App() {
  return null;
}

export default App;

• A questo punto dovresti avere davanti una pagina bianca. Possiamo procedere a eliminare il file src/logo.svg.

Vite

• In index.html troviamo la pagina iniziale. Non c’è bisogno di modificare il body in nessun modo (lo faremo tramite React) ma possiamo modificare il contenuto di head, per esempio modificando il titolo della pagina (tag title) o aggiungendo una descrizione.
• In src/index.css troviamo le parti di CSS che si applicheranno all’intera app. Molte delle cose in questo file sono specifiche dell’esempio ma possiamo tenere, se vogliamo, alcune regole di :root e body che potrebbero essere utili. Attenzione alla media query @media (prefers-color-scheme: light), che inverte i colori per i sistemi con il tema chiaro: nel caso in cui dovessi mantere quella regola e dimenticartene, e dovessi usare colori con valore fisso come #000 o #fff per i componenti interni, potresti trovarti con testi neri su fondo nero o bianchi su fondo nero senza saperlo. Insomma, se decidi di tenere quella regola attiva, ricordati di testare la tua applicazione con un tema scuro e uno chiaro.
• In src/App.jsx troviamo l’effettivo contenuto della pagina di esempio. Il nostro consiglio è di eliminare tutto il contenuto di App.css e, in App.jsx, e tenere solo la funzione App facendole restituire null. Vedremo a breve cosa significa. Il risultato finale dovrebbe apparire così:

// File: src/App.jsx

import "./App.css";

function App() {
  return null;
}

 
export default App;

• A questo punto dovresti avere davanti una pagina bianca. Possiamo procedere a eliminare il file src/assets/react.svg.