React è diventato uno strumento essenziale per lo sviluppo web e configurarlo sulla propria macchina è il primo passo per iniziare a costruire interfacce utente sorprendenti.

Si tratta di una popolare libreria JavaScript per la costruzione di interfacce utente, incentrata sulle prestazioni e sulla riusabilità, che ha rivoluzionato lo sviluppo web rendendo più facile la creazione di interfacce veloci, reattive e mantenibili nel tempo.

La sua architettura basata su componenti e l’attenzione alle prestazioni nel mondo reale l’hanno resa una soluzione interessante per gli sviluppatori che vogliono creare applicazioni moderne.

In questa guida completa, descriveremo la procedura di installazione di React sui sistemi operativi Windows, macOS e Linux. Ma prima parliamo dell’importanza di React e cerchiamo di capire come può essere utile al lavoro di sviluppo.

Cominciamo!

Cos’è React?

Homepage di React.
React

React è una potente libreria JavaScript progettata specificamente per la creazione di interfacce utente. È stata sviluppata nel 2013 da Jordan Walke, un ingegnere informatico di Facebook.

React si occupa della creazione e della gestione dei componenti dell’interfaccia utente, che sono blocchi di codice riutilizzabili che possono gestire il proprio stato e rendere a video gli elementi dell’interfaccia. L’architettura basata su componenti invita gli sviluppatori a creare componenti modulari e riutilizzabili, riducendo la duplicazioni di codice e accelerando i tempi di sviluppo.

Il DOM virtuale di React migliora il rendering, garantendo prestazioni migliori rispetto alle tradizionali tecniche di manipolazione del DOM. Questa attenzione alle prestazioni e alla riusabilità ha reso React molto popolare tra gli sviluppatori.

Chi usa React?

React ha guadagnato popolarità tra ampie fasce di sviluppatori, in quanto si offre come soluzione potente e flessibile per la creazione di interfacce utente per le applicazioni web. Ecco alcune delle figure professionali che utilizzano più frequentemente React:

  • Sviluppatori web: utilizzano React per creare interfacce utente accattivanti e reattive per siti e applicazioni web. L’architettura a componenti di React permette di costruire applicazioni modulari più facili da mantenere e aggiornare.
  • Sviluppatori front-end: questi sviluppatori utilizzano React per creare componenti rivolti all’utente che interagiscono con servizi e API di back-end. Costruire interfacce utente complesse suddividendole in componenti più piccoli e gestibili è semplice con React.
  • Sviluppatori full-stack: sono molti gli sviluppatori full-stack che utilizzano React insieme a tecnologie backend come Node.js, Express e MongoDB per creare applicazioni web complete. La flessibilità di React permette di integrare diversi sistemi di backend, snellendo il processo di sviluppo.

Molte aziende di spicco del settore tecnologico utilizzano React, a dimostrazione della sua versatilità e della sua ampia adozione. Ecco alcuni esempi di aziende che hanno inserito React nel proprio stack tecnologico:

  • Facebook: essendo il creatore di React, Facebook lo utilizza ampiamente nelle sue applicazioni web, tra cui il sito principale di Facebook, Instagram e WhatsApp Web.
  • Airbnb: Airbnb utilizza React per costruire le sue interfacce utente in modo da offrire un’esperienza fluida e performante per i suoi utenti su varie piattaforme.
  • Netflix: Netflix utilizza React per creare le sue applicazioni web, sfruttando le ottimizzazioni delle prestazioni e l’architettura a componenti per offrire un’esperienza utente fluida.
  • Uber: Uber utilizza React per le sue applicazioni web, per offrire ai suoi utenti interfacce intuitive e reattive.
  • Pinterest: Pinterest sfrutta l’architettura a componenti di React per realizzare un’applicazione web visivamente straordinaria e altamente interattiva che consente agli utenti di scoprire e salvare idee creative.
  • Reddit: Reddit utilizza React per sviluppare la sua applicazione web, fornendo un’esperienza utente veloce e coinvolgente per i milioni di utenti della piattaforma.
  • Dropbox: Dropbox sfrutta le ottimizzazioni delle prestazioni e l’architettura a componenti di React per creare un’applicazione web facile da usare ed efficiente per la gestione e la condivisione dei file.

Utilizzando React, queste aziende dimostrano la potenza e la flessibilità di questa popolare libreria JavaScript, che la rendono uno strumento essenziale per lo sviluppo web di oggi.

Vantaggi di React

React offre diversi vantaggi che ne fanno una scelta popolare per lo sviluppo web.

Ecco alcuni vantaggi:

Il design basato su componenti favorisce la riutilizzabilità

L’architettura di React permette agli sviluppatori di creare componenti modulari e riutilizzabili, riducendo la duplicazione del codice e rendendo più semplice la manutenzione e l’aggiornamento delle applicazioni. Questo approccio promuove la coerenza e semplifica lo sviluppo.

Il DOM virtuale migliora le prestazioni

React utilizza un DOM virtuale per ottimizzare il rendering, e questo lo rende più veloce ed efficiente rispetto alla manipolazione del DOM tradizionale. Aggiornando solo le parti del DOM che sono cambiate, React riduce al minimo il tempo impiegato per il rendering e migliora le prestazioni complessive dell’applicazione.

Forte supporto della community

La community di React è ampia e molto impegnata nello sviluppo della libreria. I membri della community condividono regolarmente la loro esperienza attraverso forum, social media e blog. Questo forte supporto della comunità permette a React di continuare a evolvere e a migliorare, fornendo al contempo agli sviluppatori preziose risorse per imparare e risolvere eventuali problemi.

Ampia gamma di librerie e strumenti di terze parti

L’ecosistema di React è molto vasto. Esistono una pletora di librerie e strumenti per aiutare gli sviluppatori a costruire e ottimizzare le loro applicazioni. Queste risorse possono far risparmiare tempo e fatica fornendo soluzioni e miglioramenti per attività e problemi comuni.

Una scelta popolare per lo sviluppo web moderno

React si è diffuso ampiamente tra sviluppatori e aziende, e questo lo ha reso una scelta popolare per la creazione di web app moderne. Questa popolarità fa sì che gli sviluppatori con competenze React siano molto richiesti, e la conoscenza di react è diventata una competenza preziosa nel mercato del lavoro.

Prerequisiti di React

Prima di analizzare l’installazione e l’uso di React, è essenziale disporre di alcune conoscenze e strumenti base. Ecco i prerequisiti per iniziare a lavorare con React:

  • Conoscenza di base di HTML, CSS e JavaScript: la familiarità con queste tecnologie web è necessaria per capire come costruire e modellare i componenti in React.
  • Familiarità con la riga di comando/terminale: lo sviluppo di React comporta spesso l’uso di strumenti e interfacce a riga di comando, quindi è importante essere a proprio agio con ciò che riguarda la navigazione e l’esecuzione di comandi nel terminale o nel prompt dei comandi del proprio sistema.
  • Node.js e npm: React si basa su Node.js e npm (Node Package Manager) per la gestione delle dipendenze e l’esecuzione degli script di compilazione. Bisogna installarli entrambi sul sistema prima di procedere con l’installazione di React.

Requisiti di sistema

Prima di installare React, è importante assicurarsi che il sistema soddisfi i requisiti necessari. Ecco cosa serve:

  • Sistema operativo: Windows 10 o 11, macOS 10.10 o Ubuntu 16 sono consigliati per compatibilità e prestazioni.
  • Hardware: per far funzionare React e i gli strumenti associati senza problemi, sono necessari almeno 4GB di RAM e 10GB di spazio di archiviazione.
  • Un browser web e un accesso a Internet: per visualizzare e testare le applicazioni React sono necessari un browser web moderno (come Google Chrome, Mozilla Firefox o Microsoft Edge) e un accesso a Internet.
  • Node.js e npm: come già detto, React si basa su Node.js e npm per la gestione delle dipendenze e l’esecuzione degli script di compilazione. Assicuratevi di averli installati entrambi sul sistema.

Come installare React

Ogni sistema operativo ha requisiti leggermente diversi per l’installazione di React. Qui di seguito riportiamo le istruzioni per l’installazione in base al sistema operativo utilizzato.

Come installare React su Windows

Analizziamo la procedura di installazione di React su un computer Windows.

Seguite questi passaggi:

  1. Installare Node.js e npm
  2. Installare Create React App
  3. Creare un nuovo progetto React
  4. Andare alla directory del progetto e avviare il server di sviluppo

Passo 1: Installare Node.js e npm

Prima di installare React, dovete installare Node.js e npm (Node Package Manager) sul sistema. Se non li avete ancora installati, seguite questi passaggi:

  1. Visitate la pagina di download di Node.js all’indirizzo: https://nodejs.org/en/download/
  2. Scaricate il programma di installazione per il sistema Windows (va bene sia la versione LTS che quella Current, ma per la maggior parte degli utenti è consigliata la versione LTS)
  3. Eseguite il programma di installazione e seguite attentamente le indicazioni fornite.
Scaricare il programma di installazione di Node.Js per Windows.
Scaricare il programma di installazione di Node.Js per Windows.

Al termine dell’installazione, potrete verificare che Node.js e npm siano installati aprendo un prompt dei comandi e digitando:

node -v npm -v

Questi comandi dovrebbero visualizzare i numeri di versione di Node.js e npm.

Passo 2: Installare Create React App

Create React App è uno strumento a riga di comando che permette di creare un nuovo progetto React con una struttura e una configurazione iniziali. Per installare Create React App a livello globale, aprite un prompt dei comandi ed eseguite:

npm install -g create-react-app

Questo comando installa Create React App sul sistema e lo rende disponibile in qualsiasi directory.

Passo 3: Creare un nuovo progetto React

Ora che avete installato Create React App, potete usarlo per creare un nuovo progetto React. Per farlo, aprite un prompt dei comandi, andate nella directory in cui volete che il progetto risieda ed eseguite il seguente comando:

create-react-app my-app

Sostituite “my-app” con il nome del vostro progetto. Create React App creerà una nuova directory con il nome specificato e genererà un nuovo progetto React con la struttura e la configurazione consigliate.

Passo 4: Andare alla directory del progetto e avviare il server di sviluppo

Una volta creato il progetto, andate alla directory del progetto eseguendo il comando qui sotto:

cd my-app

Sostituite “my-app” con il nome della directory del progetto. Avviate il server di sviluppo con questo comando:

npm start

Questo comando lancia il server di sviluppo, che controlla le modifiche ai file del progetto e ricarica automaticamente il browser quando vengono rilevate le modifiche.

Dovrebbe aprirsi una nuova finestra del browser con la vostra applicazione React in esecuzione all’indirizzo http://localhost:3000/:

React è stato installato correttamente su Windows.
React è stato installato correttamente su Windows.

Congratulazioni! Avete installato React sul vostro computer Windows e avete creato un nuovo progetto React. Ora potrete iniziare a creare le vostre interfacce utente.

Come installare React su macOS

Ora passiamo all’installazione di React su un computer con sistema operativo macOS:

  1. Installare Node.js e npm
  2. Installare Create React App su macOS
  3. Creare un nuovo progetto React
  4. Andare alla directory del progetto e avviare il server di sviluppo

Passo 1: Installare Node.js e npm

Allo stesso modo della procedura di installazione di Windows, anche su un sistema macOS dovrete aver installato Node.js e npm (Node Package Manager). Se non li avete ancora installati, seguite questi passaggi:

  1. Visitate la pagina di download di Node.js
  2. Scaricate il programma di installazione per macOS
Scaricare il programma di installazione di Node.js per macOS.
Scaricare il programma di installazione di Node.js per macOS.
  1. Una volta scaricato, cliccate sul file .pkg nella cartella dei download per eseguire il programma di installazione.
  2. Seguite le istruzioni che appaiono sullo schermo che prevedono l’accettazione del Contratto di Licenza, la selezione della destinazione per i file installati e la selezione del tipo di installazione.
Seguire le indicazioni sullo schermo per completare l'installazione di Node.js.
Seguire le indicazioni sullo schermo per completare l’installazione di Node.js.

Al termine dell’installazione, potrete verificare che Node.js e npm siano installati aprendo un terminale ed eseguendo i questi comandi:

node -v
npm -v

Questi comandi dovrebbero darvi i numeri di versione di Node.js e npm.

In alternativa, potete installare Node.js e npm tramite la riga di comando. Aprite il Terminale e inserite:

brew install node

Attendete il completamento dell’installazione e verificate l’installazione inserendo:

node -v

E poi:

npm -v

Passo 2: Installare Create React App su macOS

Ora installate Create React App su macOS.

Create React App è uno strumento pratico per creare un’applicazione a pagina singola con pochi passaggi e nessuna configurazione.

Procediamo con l’installazione.

Per prima cosa, aprite il terminale e create una cartella denominata react-app digitando il seguente comando:

mkdir react-app

Poi navigate nella cartella react-app con questo comando:

cd react-app

Per verificare di essere nella directory corretta, digitate il seguente comando e premete Invio:

pwd

Una volta verificato di essere nella directory giusta, potrete creare un nuovo progetto React.

Passo 3: Creare un nuovo progetto React

Ora che avete installato Create React App, potete utilizzarlo per creare un nuovo progetto React:

npx create-react-app my-app

npx è un modulo incluso in npm. Le fasi di installazione richiederanno un po’ di tempo, quindi siate pazienti.

Passo 4: Andare alla directory del progetto e avviare il server di sviluppo

Se il comando è stato eseguito correttamente, andate alla directory my-app:

cd my-app

Infine, digitate:

npm start

Una volta eseguito il comando, il vostro browser predefinito si aprirà all’indirizzo

http://localhost:3000/:

Dopo l'installazione, il logo di React dovrebbe apparire nel browser web.
Dopo l’installazione, il logo di React dovrebbe apparire nel browser web.

Ecco fatto! React è ora installato e pronto all’uso sul vostro macOS.

Come installare React su Linux

Se avete un sistema basato su Linux, seguite questa serie di passaggi per installare React:

  1. Installare npm
  2. Installare l’utility create-react-app
  3. Creare e lanciare la prima applicazione React

Passo 1: Installare npm

Effettuate l’accesso al vostro server come utente sudo ed eseguite questo comando:

sudo apt install npm

Una volta completata l’installazione, verificate la versione di npm installata utilizzando il comando:

npm --version

L’installazione di npm installa anche Node.js. Verificate la versione di Node installata usando il comando:

node --version

Passo 2: Installare l’utility create-react-app

create-react-app è un’utility che permette di installare e configurare tutti gli strumenti necessari per un’applicazione React.

Fa risparmiare tempo e fatica impostando tutto da zero.

Per installare il tool, eseguite il comando npm:

sudo npm -g install create-react-app

Una volta installato, verificate la versione di create-react-app eseguendo:

create-react-app --version

Passo 3: Creare e lanciare la prima applicazione React

Creare un’applicazione React è semplice. Creeremo un’applicazione React chiamata my-app come segue:

create-react-app my-app

Il processo vuole circa 5 minuti per installare tutti i pacchetti, le librerie e gli strumenti necessari all’applicazione. Abbiate pazienza.

Se l’applicazione è stata creata correttamente, riceverete una notifica con i comandi di base da eseguire per iniziare a gestire l’applicazione.

Per eseguire l’applicazione, andate nella directory dell’applicazione:

cd my-app

Quindi eseguite il comando:

npm start

Vedrete un output che vi mostrerà come accedere all’applicazione nel browser.

Aprite il vostro browser e navigate all’indirizzo IP del vostro server:

http://server-ip:3000

Come per Windows e macOS, dovreste vedere il logo di React nel vostro browser:

Dopo l'installazione, dovrebbe apparire nel browser il logo di React.
Dopo l’installazione, dovrebbe apparire nel browser il logo di React.

Questo dimostra che l’applicazione React predefinita è attiva e funzionante.

Ecco qui, avete installato React su Linux e avete creato un’applicazione in React!

Riepilogo

Speriamo che questa guida all’installazione di React su Windows, macOS e Linux vi sia stata utile. Abbiamo descritto i requisiti necessari per configurare un ambiente di sviluppo React, l’installazione di Node.js e npm. Abbiamo anche mostrato come utilizzare l’utility create-react-app per creare un nuovo progetto React e avviare un server di sviluppo.

Ora che avete installato React sul vostro computer, è il momento di iniziare a seguire i tutorial, imparare le best practice e imparare a creare interfacce utente straordinarie. Il design, le prestazioni e il forte supporto della community fanno di React una scelta eccellente per lo sviluppo web.

Man mano che progredirete nel vostro percorso di apprendimento di React, per i vostri progetti prendete in considerazione il servizio di Hosting di Applicazioni di Kinsta. Kinsta offre una piattaforma di hosting ad alte prestazioni, scalabile e sicura che può aiutarvi a ottenere il massimo dalle vostre applicazioni React.

Buona fortuna!