CONTATTACI

Guide per aspiranti programmatori

Programmatore che esamina react al microscopio
Lezione 2 / 41

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.

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.