Questo è l’articolo di partenza per imparare a fare il setup iniziale di ReactJS. Ti ricordo che puoi trovare la guida per intero a partire da: ReactJS – Come creare una Web App da zero.

Oggi vediamo cos’è ReactJS e come iniziare un setup iniziale installando quindi tutto ciò che ci serve.

Cos’è ReactJS?

ReactJS è una libreria Javascript che ha lo scopo di aiutarti a costruire l’interfaccia utente. Tramite questa libreria creata da Facebook riuscirai infatti a mostrare a schermo del codice HTML dinamico ed a creare una single page application. Quello che accade, senza volerti annoiare troppo, è che l’applicazione viene renderizzata a partire da un <div> con un id specifico, solitamente root.

ReactJS è molto veloce e uno dei suoi punti di forza sta nello sfruttare un DOM virtuale (Virtual DOM). A differenza di andare a modificare il DOM reale in cui ogni volta la pagina HTML deve passare tra le mani di HTML parser, CSS parser e scorrere il DOM tree, il DOM virtuale è una rappresentazione in memoria del DOM reale. ReactJS utilizza un ottimo algoritmo per vedere le differenze e quindi scegliere cosa deve cambiare nella pagina senza troppe operazioni pesanti.

React mantiene per la precisione due copie del Virtual DOM, una con lo stato attuale ed una con lo stato precedente del DOM virtuale. A differenza di AngularJS non utilizza il dirty check per osservare i cambiamenti ma osserva il cambiamento di stato di ciascun componente.

Vedremo in un altro articolo quali sono le  differenze tra Angular e React, l’importante adesso è capire che ReactJS è una libreria ed è tanto rapida perché velocemente riesce ad individuare cos’è il minimo indispensabile da cambiare nel DOM reale.

Il Setup Iniziale di ReactJS

Per partire è necessario avere alcuni strumenti installati sulla tua macchina. Gli strumenti necessari sono:

• NodeJS
• NPM

A differenza di qualche anno fa adesso installando NodeJS avrai anche NPM. Effettua il download di NodeJS andando sul sito ufficiale a questo indirizzo: https://nodejs.org/en/. Intanto ti spiego cosa sono NodeJS e NPM.

Cos’è NodeJS?

NodeJS è un ambiente di esecuzione per codice Javascript e vede il suo punto di forza sul fatto che non è bloccante, non effettua operazioni di I/O ed inoltre rimane in ascolto di eventi andando in sleep quando non ha eventi in ricezione. NodeJS è gratuito e può essere eseguito su ogni piattaforma. Il modo migliore per sfruttarlo sta nel fare più operazioni asincrone possibili.

NodeJS ti permette di generare dinamicamente il contenuto delle tue pagine, può manipolare i file presenti sul server e può essere sfruttato per operazioni sul database.

Per maggiori informazioni approfitta della guida ufficiale: https://nodejs.org/en/about/.

Cos’è NPM?

NPM, acronimo di Node Package Manager, è il gestore dei pacchetti Node. Cercando di essere più chiaro e snello… Un Node package è un contenitore di file che sono necessari per l’utilizzo di un modulo javascript. Un modulo è una libreria Javascript che puoi includere nel tuo progetto. Ogni volta che ti servirà qualcosa potrai scaricare ed installare nel tuo progetto la libreria Javascript di cui hai bisogno (package e module vengono ormai utilizzati come termini intercambiabili anche nella guida di NPM stesso).

Nel nostro caso useremo NPM, per esempio, per integrare il componente di una tabella già creata da qualcuno. Un esempio è la React Bootstrap Table. In questo modo avremo già un componente React pronto a lavorare sulle tabelle fornendo la possibilità di fare ordinamenti, ricerche, modifiche alle colonne, ecc.

Per saperne di più questo è il sito ufficiale di NPM: https://www.npmjs.com/.

Cosa fare adesso?

Bene. Spero di averti schiarito un minimo le idee anche se in maniera molto riassuntiva. Sono sempre convinto che meglio delle fonti ufficiali non ci sia nulla, quindi per te voglio essere solo un narratore ed una guida.

Se hai effettuato il download di NodeJS e lo hai installato entra nel terminale (prompt dei comandi, cmd, ecc.) e scrivi:

• node -v
• npm -v

Se ad entrambi i comandi ti viene risposto con la versione vuol dire che hai installato correttamente il tutto.

Iniziamo con React

A questo punto crea una cartella riconoscibile sul tuo Desktop. Io la chiamerò “esercizi-react”. Dunque entra con il terminale in questa cartella. Per questo esempio utilizzeremo un’applicazione React pre-impostata gentilmente dalla comunità ReactJS di cui ognuno di noi può farne parte e contribuire attivamente.

Scrivi quindi nel terminale:

• npm install -g create-react-app
• create-react-app esreact

Per primo stai installando globalmente il modulo per la creazione di un’applicazione React di default, puoi trovare maggiori informazioni a questo indirizzo. Se qualcosa fallisce è possibile che hai un problema di permessi. Prova di nuovo facendo partire il terminale come amministratore o utilizzando il comando “sudo”.

Dopo di che stai creando la tua applicazione React. Per farlo chiami il comando “create-react-app” che ormai è visibile globalmente e stai passando un nome alla tua applicazione, nel mio caso ho scelto “esreact”.

Adesso, se tutto è andato a buon fine, troverai una cartella “esreact” all’interno della cartella in cui ti sei posizionato per eseguire questi comandi, nel mio caso dentro a “esercizi-react”. Entra con il terminale nella cartella “esreact” (cd esreact) ed esegui il comando npm start.

In automatico vedrai comparire questa scritta nel terminale:

E si aprirà anche la finestra del browser in automatico all’indirizzo http://localhost:3000/. Se tutto è andato a buon fine vedrai l’applicazione React:

Prima Modifica

Utilizza il tuo editor di testo preferito, io personalmente utilizzo sempre Sublime Text. Apri la cartella con l’applicazione ReactJS ed in particolare apri il file “App.js” presente nella cartella “src”. Dunque cambia il titolo “Welcome to React” in qualcos’altro. Salva ed osserva nel browser il cambiamento:

Conclusione

In questa guida ti ho fatto vedere una panoramica sul mondo ReactJS. Ovviamente ce ne sarebbero molte da dire, ma credo che raccontarti tutto insieme ed usare una precisione esagerata siano troppo per chi inizia ora. Meglio un processo di apprendimento graduale 🙂 .

Nelle prossime guide entreremo nel dettaglio di cosa sono i componenti React e di come utilizzarli. Faremo modifiche sostanziali e ti spiegherò passo dopo passo quale logica segue React per effettuare il render.

Se vuoi continuare a seguire questa guida ti ricordo di non perdere di vista ReactJS: come creare una web app da zero. Inoltre se ti iscrivi alla newsletter non ti perderai i nuovi articoli. Mando da 1 a 4 mail al mese ricapitolando dove siamo arrivati con ogni guida. Con la newsletter hai anche accesso a libri ed ebook gratuiti, così come a coupon Udemy 🙂 .

Per dubbi o domande scrivimi nei commenti 🙂 .

Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!).