Slide primo appuntamento Coding Zone. Minicorso How To React. Aldo Noschese & Riccardo Tartaglia

1. How To React
Come gestire lo stato in un’applicazione React.js
Aldo Noschese x Riccardo Tartaglia

2. #howToReact
Aldo Noschese
Front-end Dev @ weBeetle
Riccardo Tartaglia
Full-Stack Dev @ weBeetle
@noschese_aldo
aldo-noschese-5b9101193
@riktarweb
riccardo-tartaglia

3. #howToReact
una breve introduzione

4. Cos’è React?
React.js è una delle librerie JavaScript più popolari per costruire interfacce utente,viene utilizzata
sia per creare Web App, che Mobile App (React Native).
L’interfaccia utente è costituita da piccole unità (componenti), come testi, pulsanti o immagini, che
React ci consente appunto, di combinare e riutilizzare.
#howToReact

5. ❏ Facile da imparare e da usare
❏ Community vasta
❏ Libertà nelle scelte
architetturali
❏ Virtual DOM
#howToReact
CONTRO
PRO
❏ Scarsa documentazione
❏ Tecnologia “dinamica”
❏ Libertà nelle scelte
architetturali

6. DOM: Document Object Model
Ogni volta che viene caricato un documento web, come ad esempio dell’HTML, il browser crea una
rappresentazione ad oggetti di quel documento, una struttura ad albero.
Questa rappresentazione viene chiamata DOM.
Grazie alla sua natura basata sugli oggetti, JavaScript può interagire con il DOM, ne può manipolare il
contenuto, può aggiungere , modificare o rimuovere elementi da questa struttura ad albero.
Questa tipologia di operazioni, sono in effetti, molto leggere, tuttavia ogni volta che un elemento del
DOM viene modificato, il browser ha bisogno di eseguire nuovamente il rendering dell’intera pagina.
Di conseguenza il browser, dovrà ricreare ogni volta una nuova struttura ad albero, e dovrà ovviamente
calcolare nuovamente il CSS, per essere in grado di “ridisegnare” la pagina che stiamo visualizzando.
#howToReact

7. DOM: Document Object Model
Esempio di DOM
#howToReact
HTML
head body
meta link title p div
strong Hello,
world!
img

8. Virtual DOM
Come abbiamo detto poco fa, React è una libreria basata sui componenti.
Un componente React viene ri-renderizzato, solo quando cambia uno stato da cui dipende, una props o se il
suo diretto genitore esegue nuovamente il rendering.
Ovviamente React non può sopportare il peso computazionale di dover ri-renderizzare tutto il DOM ogni
volta che un componente deve essere renderizzato nuovamente.
Per questo motivo React introduce il concetto di Virtual DOM.
Il DOM Virtuale, è una rappresentazione del DOM reale, non è altro che un oggetto JavaScript creato per
replicare il DOM.
A differenza del DOM reale, il DOM Virtuale è “economico”, in termini computazionali, non deve
“disegnare”, nulla sulla pagina, ha solamente il compito di confrontare sé stesso con il DOM reale e
capire quali sono gli elementi che necessitato di essere ri-renderizzati, SOLO gli elementi che ne
necessitano.
Questo è il segreto della “Reattività” di React.
#howToReact

9. Virtual DOM
Virtual Dom
#howToReact
Component
Component Component
Component Component Component Component
Component Component
Diff
Re-rendered
Real Dom
Component
Component Component
Component Component Component Component
Component Component

10. const element = (
<h1 className=”greeting”>
Hello, World!
</h1>
);
const element = React.createElement(
“h1”,
{className:”greeting”},
“Hello, World!”
);
JSX: Javascript Syntax Extension
JSX è un’estensione della sintassi per
JavaScript che ci consente di scrivere
markup simile all’HTML all’interno di un
file JavaScript.
Babel compila JSX in chiamate ad un API di
primo livello di React,
React.createElement().
Possiamo dire quindi che i primi due esempi
a destra , sono esattamente la stessa
porzione di codice , ma scritta in maniera
diversa.
React, utilizza quindi, la funzione
createElement(), per poter ottenere un
oggetto con il quale costruire quell’
esatta porzione di DOM.
#howToReact
const element = {
type : “h1”,
props:{
className:”greeting”,
children:”Hello, World!”
}
};

11. const SayHello = (props) => {
const { name } = props;
return <span>Hello, {name}</span>
};
const SayHelloAndButton = () => {
return (
<>
<SayHello name=”John” />
<MyButton />
</>
)
};
Componenti
I Componenti ci permettono di suddividere
l’interfaccia utente in parti indipendenti
e riutilizzabili.
A livello concettuale, i componenti sono
come delle funzioni JavaScript ,ai quali
possiamo dare un nome, accettano in input
un oggetto che chiameremo “props”
(properties) e ritornano del JSX , quindi
degli oggetti che descrivono cosa deve
apparire sullo schermo.
#howToReact
const MyButton = () => {
return <button>Click Me!</span>
};

12. Stato Applicativo
Di cosa si tratta ?
I componenti spesso devono cambiare ciò che appare sullo schermo a seguito di un’interazione da parte
dell’utente, ad esempio, al click di un bottone deve cambiare il tema da “light” a “dark”, o se
l’utente sta scrivendo all’interno di un campo di input, deve ricordarne il valore, o se clicca il
pulsante “avanti” nelle slides di un carosello, la slide da visualizzare deve cambiare.
I componenti devono essere in grado di “ricordare” tutte queste cose, in React questo tipo di memoria
viene chiamata State, stato applicativo.
#howToReact

13. #howToReact
Layers di stato
Stato
UI State Server State
Stato applicativo
dedicato alla
gestione della
UI.
Stato applicativo
ottenuto dal
server.

14. const Counter = () => {
const [counter , setCounter] = useState(0)
return <span>Counter : {counter}</span>
};
Gestione dello stato locale: useState()
In passato, quando i componenti funzionali
in react erano dedicati esclusivamente alla
renderizzazione del componente, venivano
utilizzate le classi per gestire il
lifecycle e lo stato applicativo.
Oggi react mette a disposizione un concetto
molto potente, gli “Hooks”.
React.useState() è l’hook dedicato alla
gestione dello stato applicativo locale, ci
permette di aggiungere una variabile di
stato al nostro componente.
#howToReact

15. const Counter = () => {
const [counter , setCounter] = useState(0)
return <span>Counter : {counter}</span>
};
useState() : Come utilizzarlo
Chiamiamo l’hook useState() al livello
superiore del nostro componente, per
dichiarare una o più variabili di stato
locale.
useState() restituisce due valori:
1) Lo stato corrente
2) La funzione di set che ci
consente di cambiarlo.
#howToReact
const ManyCounters = () => {
const [counter , setCounter] = useState(0)
const [counterTwo , setCounterTwo] = useState(0)
return (
<>
<span>Counter : {counter}</span>
<span>CounterTwo : {counterTwo}</span>
</>
)
};

16. #howToReact
Live Coding

17. Condivisione di uno stato locale: Props Drilling
I componenti in react usano degli oggetti
(props) per comunicare tra di loro, e
condividere stato applicativo.
Questi oggetti potrebbero ricordarti gli
attributi HTML ma in realtà, è possibile
passare da un componente padre, ad un
componente figlio, qualsiasi tipo di
valore, inclusi array, oggetti e funzioni.
Nell’esempio a destra, il componente
CounterFather sta condividendo un
porzione del suo stato applicativo, con il
componente figlio CounterChild.
#howToReact
const CounterChild = (props) => {
const { counter } = props;
return <span>Counter: {counter}</span>
};
const CounterFather = () => {
const [counter , setCounter] = useState(0)
return <CounterChild counter={counter} />
};

18. #howToReact
Live Coding

19. #howToReact
React Context

20. Cos’è un context?
Condividere stato globale
Per poter condividere dello stato applicativo tra un componente padre ed un componente figlio, possiamo
avvalerci dell’uso delle props, ma man mano che la nostra applicazione cresce, avremo sempre più
componenti innestati tra di loro, questo rende la condivisione di stato applicativo tra i componenti
sempre più confusionaria e poco manutenibile.
Per ovviare a questo problema, react ci fornisce uno strumento chiamato Context.
Il Context o “contesto”, consente al padre di rendere disponibili alcune informazioni, a qualsiasi
componente nell’albero sottostante, a qualsiasi profondità, senza condividerle esplicitamente
attraverso le props.
#howToReact

21. #howToReact
Live Coding

22. useReducer
Gestire uno stato complesso
Man mano che la nostra applicazione cresce, crescerà anche la quantità e la complessità del nostro
stato applicativo.
Una situazione comune, in applicazioni react di media grandezza, è quella di ritrovarsi con componenti
che dichiarano un infinità di useState(), per essere in grado di gestire più variabili di stato.
Qui ci viene in aiuto l’hook useReducer().
#howToReact

23. Gestione di uno stato complesso: useReducer()
L’hook useReducer() ci permette di aggiungere una funzione chiamata reducer ai nostri componenti.
Come abbiamo visto per l’hook useState() anche qui chiameremo l’hook useReducer() al livello più alto
del nostro componente.
useReducer() richiede, appunto, una funzione reducer,ed uno stato iniziale, e mette a disposizione lo
stato corrente, più una funzione che chiameremo per convenzione dispatch.
#howToReact
const CounterWithReducer = (props) => {
const [state , dispatch] = React.useReducer(reducer ,{count:0});
return <span>Counter: {state.count}</span>
};

24. #howToReact
Live Coding

25. ❏ Basi di React.js
❏ Gestione stato locale con hooks
❏ Condivisione di stato “Props
Drilling”
❏ Condivisione di stato
“React.Context”
#howToReact
Next
Wrap Up
❏ Ui State vs Server State
❏ Custom Hooks
❏ Global Ui State con Recoil.js
❏ Server Cache State React Query

26. Aldo Noschese x Riccardo Tartaglia
thank.u!
see u next time