In queste lezioni esaminiamo le differenze tra React e altre librerie e framework tra quelli più diffusi per lo sviluppo di applicazioni Web. Tale confronto ci consentirà di esemplificare al meglio qual è lo sforzo richiesto, sia mentale che tecnico, per il passaggio alla libreria React partendo dagli strumenti per lo sviluppo Web che magari stai già utilizzando.
JQuery è un tool molto comodo per chi sviluppa applicazioni manipolando direttamente la struttura della pagina, grazie alle funzioni che mette a disposizione per l'accesso al DOM, all'attraversamento dei nodi che costituiscono gli elementi della pagina e alle funzioni messe a disposizione per modificarli, crearne di nuovi, spostare quelli esistenti, ivi comprese le funzioni globali.
JQuery lavora principalmente “agganciando” funzioni di gestione degli eventi agli elementi della pagina, utilizzando la familiare sintassi delle espressioni di selezione dei CSS: questo presuppone che nella maggior parte dei casi si vada ad assegnare un ID, oppure una specifica classe, agli elementi della pagina con i quali si vuole interagire, allo scopo di referenziarli successivamente all'interno dello script che contiene la logica lato client dell'applicazione.
Questo procedimento risulta molto semplice da utilizzare, poiché è sufficiente conoscere le espressioni CSS e le (poche) funzioni fondamentali di JQuery, oltre alla sintassi base di JavaScript, per scrivere la logica; tuttavia, poiché si fa riferimento agli elementi del DOM, agli ID loro assegnati e ai loro attributi, il risultato finale tende spesso ad assomigliare a una “zuppa” in cui si mescola la logica di business con il contenuto della pagina rendendo difficile la modifica della prima indipendentemente dall'altra senza produrre effetti collaterali o senza richiedere necessariamente un ritocco ad ambo le parti.
Rispetto a JQuery, React non richiede l'assegnazione obbligatoria di ID univoci o classi, né richiede allo sviluppatore di intervenire direttamente sul DOM, ma è la libreria stessa che si fa carico di questo compito in base alla struttura del componente dichiarato in primis e, in secondo luogo, in base allo stato interno del componente Web e alla variazione dei valori delle proprietà assegnate allo stesso.
In breve, React esclude un intervento diretto sul DOM, lasciando a noi il compito di definire i componenti che costituiscono l'interfaccia dell'applicazione e i dati da utilizzare per la generazione del markup. Sarà la libreria ad intervenire sul DOM di conseguenza, utilizzando peraltro il modo che garantisce le maggiori performance possibili.