Dopo aver parlato di Angular, continuiamo questa serie sui più famosi framework per programmare in Javascript, introducendo React.

Come sempre, prima di passare al lato tecnico partiamo dalla sua storia e dai motivi che ne hanno portato allo sviluppo.

Cenni storici

Probabilmente saprai che React è stato annunciato nel 2013 ma la sua vera storia inizia qualche anno prima.

Torniamo al 2011

In questo periodo i progetti attivi a cui lavorava Facebook stavano crescendo sempre più, tra tutti spiccava Facebook ADS, la cui manutenzione e sviluppo di nuove feature andava ulteriormente ad appesantire e complicare la vita degli sviluppatori. Per questo motivo il team cominciò ad allargarsi sempre più, assumendo nuovi membri. 

Col passare del tempo, il numero crescente dei membri del team e di nuove feature, portò la compagnia ad un rallentamento nella produzione. I motivi sono da ricercare nelle costanti richieste di aggiornamenti a cascata, i quali resero il progetto difficile da gestire, c’era bisogno di innovare, di rendere tutto più efficiente.
Dopo un po' di tempo gli ingegneri di Facebook arrivarono ad un punto di rottura; loro sapevano cosa bisognava fare, avevano il giusto modello di risoluzione, tuttavia erano spaventati di peggiorare l’esperienza utente a fronte di un miglioramento in termini di efficienza produttiva di codice.

Primo prototipo di React

Nel 2011 Jordan Walke crea un primo prototipo di React chiamandolo FaxJs. Questo progetto era usato all’interno di Facebook per alcune funzionalità, tra cui quella di ricerca elementi.

Arriviamo al 2012

Durante quest’anno Jordan Walke, spinto dai problemi di gestione di Facebook ADS, finalmente crea una prima versione di React. Nello stesso anno Facebook acquista Instagram e questo spinge i team delle due aziende a cercare di uniformare gli stack tecnologici. Per fare questo, React doveva essere disaccoppiato da Facebook e reso Open Source.
La maggior parte di questo lavoro la dobbiamo a Pete Hunt, uno degli ex membri del core team di React.

Finalmente arriviamo al rilascio!

Durante il JSConf Us del 2013, Jordan Walke presenta React. Contemporaneamente alla sua prima presentazione pubblica, React diventa Open Source. Inizialmente il pubblico reagì in modo scettico, non comprese le potenzialità di questo strumento, ritenendolo un passo indietro, perciò i creatori di React, dopo essersene resi conto, avviarono una serie di azioni per promuoverlo, partendo dalla creazione di un React Tour, dimostrandone a pieno le sue potenzialità. 

Gli anni a seguire

Gli anni successivi al 2013 segnarono una costante espansione di popolarità di React, attirando l’attenzione di grosse aziende come Netflix. Il vero boom di popolarità si ebbe quando nel 2015 Netflix afferma pubblicamente di usare React e di aver migliorato i processi dello sviluppo Front End, ma non solo, anche Airbnb inizia ad utilizzare React. 
L’utilizzo da parte di grosse e popolari aziende,ù rappresenta un importantissimo biglietto da visita per React, da questo momento sempre più realtà consolidate inizieranno ad usarlo. 
Andando avanti nel 2015 seguono altri importanti annunci tra cui il rilascio di React Native, lo sviluppo della prima versione stabile della React Developer Tool e il rilascio di Redux.

Il 2016 fu un ulteriore anno di innovazioni con il rilascio di Mobx mentre il 2017 fu un anno di miglioramenti da parte del core team di React, con il rilascio di aggiornamenti che ne miglioravano le performance. L’ultima versione stabile è la 18 rilasciata a Marzo 2022. La storia di React è davvero interessante.

La sua nascita ha introdotto un nuovo approccio architetturale nello sviluppo di applicazioni Javascript, proponendo un modello differente dal MVC e MVVM che venivano usati da altri framework come Angular. 
Secondo il team di React, il classico pattern MVC non permette di realizzare applicazioni scalabili in cui sia semplice individuare bug e errori durante la fase di sviluppo. Il modello che React propose si chiamava Flux da cui poi è derivato Redux.

Gli elementi chiave di Flux sono quattro: Dispatcher, Store, Action e le View, anche se ti consigliamo di partire direttamente da Redux, ossia la sua evoluzione. 

Il concetto chiave di Flux è il flusso unidirezionale dei dati; qualsiasi richiesta di modifica dei dati contenuti negli Store deve avvenire sempre e solo attraverso il lancio di un Action, intercettata da un Dispatcher, il quale modifica lo Store che contiene i dati letti dalle View.

Finalmente un po' di codice

Dopo aver ampiamente parlato della sua storia, partiamo con qualche esempio pratico.
I prerequisiti per utilizzare react sono installare

• Node Js
• npm
• npx

Per prima cosa vai sul terminale e digita:

npx create-react-app prova-react

cd prova-react
npm start

Perfetto! Hai creato la tua prima applicazione in React, ora apportiamo qualche modifica.

Creiamo il classico "Hello World" 

Per creare il nostro primo Hello World possiamo agire in due modi:

• andare in src/App.js e modificarne il contenuto
• andare in src/index.js e modificare il parametro passato alla funzione render

Partiamo dal secondo caso, quindi, dopo aver aperto il file index.js, vedremo questo codice:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

• Riga 1 e Riga 2 importano le librerie react e react-dom necessari per inizializzare l’applicazione e scrivere HTML all’interno di file JavaScript, questo tipo di sintassi è conosciuta come JSX. 
• Riga 3 importa il file CSS per la stilizzazione.
• Riga 4 importa il file App.js, un componente creato in automatico.
• Riga 7 definisce il punto d’accesso dell’intera applicazione React. Il componente con id root cercato si trova in public/index.html
• Da Riga 8 a Riga 12 viene effettuato il render dell’applicazione, partendo dal punto di accesso definito prima.

Ecco come si presenta il componente root all’interno di public/index.html

Ora modifichiamo il codice in modo da vedere la scritta Hello world

Come puoi vedere, abbiamo modificato il contenuto della funzione render eliminando il componente <App /> e inserendo un semplice h1 al suo posto. Tuttavia così facendo andremmo contro i principi di React. Infatti se volessimo utilizzare il nostro h1 all’interno di un’altra pagina saremmo obbligati a replicare il codice.

La giusta soluzione sarebbe creare un componente custom! Vediamo come fare:

• Creiamo dentro la cartella src un file chiamato HelloWorld.js
• All’interno di questo file definiamo una funzione chiamata HelloWorld che ritorna un h1 con il nostro messaggio.

function HelloWorld(){
    return (
        <h1>
            Hello World!
        </h1>
    )
}

export default HelloWorld;

• Dopodiché importiamo il componente in src/index.js, sostituendolo al contenuto della funzione render

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import HelloWorld from './HelloWorld';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <HelloWorld/>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

A riga 11 potete vedere come l’abbiamo istanziato. Questa procedura può essere effettuata in modo ricorsivo, creando una struttura di tipo gerarchico che pian piano andrà a costruire un albero di componenti definendo lo scheletro della nostra applicazione.

Componenti funzionali

L’approccio appena mostrato mostra l'utilizzo dei componenti funzionali (functional components); se sei un novizio, per renderti l’idea, immagina di dover creare la seguente tabella e di inserirla nel metodo render prima mostrato.

<h2>HTML Table</h2>
<table>
  <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
  </tr>
  <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
  </tr>
  <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
  </tr>
  <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
  </tr>
  <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
  </tr>
  <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
  </tr>
  <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
  </tr>
</table>

Certo, puoi farlo e riuscirai comunque a vedere la tabella renderizzata. Ma cosa accadrebbe se aggiungessi un altro componente? La risposta è semplice: il codice comincerebbe a diventare poco manutenibile e verboso, in quanto ogni nuovo componente dovrebbe esser messo in coda o in mezzo a quelli già esistenti.

Ecco a cosa serve l’approccio dei componenti funzionali, a favorire la modularità del codice!
Sarebbe bastato creare un file separato e inserire il codice della tabella in una funzione, come abbiamo già fatto per HelloWorld.

import HelloWorld from './HelloWorld';
import Table from './Table';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <HelloWorld/>
    <Table/>
  </React.StrictMode>
);

Questo può essere riassunto così:

function NomeComponente() {
    return(
    <component> </component>
  )
}


root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NomeComponente />);

Dove il <component> </component> è il componente HTML che si vuole renderizzare, questo può essere qualsiasi cosa da un semplice paragrafo a una tabella. 

Potrebbe essere utile tenere a mente due cose:

• Il nome della funzione che crea il componente dovrebbe sempre iniziare con la lettera maiuscola
• All’interno del metodo render puoi usare tag auto chiudenti per semplicità

In conclusione: cosa è React e perché usarlo?

React è una libreria Javascript per costruire web application, separando la UI in elementi componibili. Dovresti usarlo o perlomeno conoscerlo per una serie di motivi:

• Facile da imparare, in quanto richiede una minima conoscenza di Javascript per partire, nulla di più o troppo complicato.
• Componenti Riusabili, React permette la separazione degli elementi UI in componenti riusabili e facilmente testabili.
• Alte Performance garantite dal Virtual Dom, con l’utilizzo di un Virtual Dom, React riesce ad ottimizzare enormemente le performance sul web, diminuendo drasticamente gli aggiornamenti diretti sul DOM in quanto agisce prima sul DOM virtuale e poi con una serie di confronti tra lo stato precedente e quello corrente, calcola il modo migliore per apportare le modifiche.
• Approccio architetturale unidirezionale con Redux. Come spiegato prima, React propone un approccio unidirezionale nello sviluppo delle applicazioni.
• Developer tool e community, React gode di una delle community più attive nel mondo e inoltre mette a disposizione degli ottimi strumenti per poter debuggare e che aiutano di molto la vita dello sviluppatore.
• React Native, imparare React offre il bonus di poter usare senza grossi problemi React Native per lo sviluppo di applicazioni mobile per IOS e Android, sfruttando le stesse metodologie e architettura.