Coding in React: 3 cose che devi conoscere se sei un neofita

Negli ultimi mesi ho iniziato a lavorare su un piccolo progetto personale utilizzando React, un po’ per curiosità verso questa “libreria” Javascript e un po’ per apprendere dei nuovi strumenti.

Logicamente come tutte le persone che approcciano per la prima volta ad un nuovo framework ho avuto le mie difficoltà, vorrei quindi riportare qui tre concetti in particolare che mi sarebbero stati utili conoscere durante il mio “primo giorno” con React.

NB. Questa mini-lista deriva da esperienze personali, quindi prendile con le pinze 😀

Premessa: Non iniziare a studiare React se non hai dimestichezza con Javascript!

Questo punto non rientra nelle tre cose che andrò ad elencare, ma vedilo come un requisito necessario.

Una buona conoscenza di Javascript è fondamentale (mi raccomando dai spazio anche a ES6).

Puoi rinfrescarti la memoria qui

Come i componenti React possono scambiarsi informazioni

Iniziamo la mia lista con un concetto fondamentale, forse la cosa più importante che un neofita di React deve comprendere, ma andiamo nel dettaglio.

Un componente in React è visto come un sistema a sè, indipendente e in grado di badare a se stesso, in particolare devi tenere bene a mente che:

  • Un componente non può modificare i propri attributi
  • Un componente non può modificare lo stato di altri componenti
  • Un componente può modificare gli attributi dei propri figli
  • Un componente può modificare il proprio stato

Queste quattro “regole” ci indirizzano su uno scambio di dati che assomiglia molto ad un ascensore, cioè il componente padre modifica gli attributi dei suoi figli che a loro volta modificano il proprio stato e richiamano una funzione del padre per segnalare il tutto. Forse quest’immagine di David Gilbertson può chiarirti le idee (clicca per ingrandire)

In questo caso lo scambio dati avviene come spiegato prima tramite due props:

  • items che contiene il dataset degli elementi della lista.
  • deleteItem che contiene invece un richiamo alla funzione del componente del padre che va ad aggiornare il proprio stato, e quindi i figli che contiene.

All’inizio sembra complicato ma dopo un po’ di lavoro inizierai ad entrare nell’ottica 🙂

Come strutturare correttamente i componenti

Uno dei punti di forza di React è la componibilità. Personalmente non conosco un framework che offre un modo così semplice per creare e combinare componenti. Logicamente dobbiamo impegnarci a farlo nel modo giusto, abbiamo un modo abbastanza semplice per fare ciò:

Usare le API children di React

React ci fornisce una vasta gamma di API per poter gestire i children di un component, quindi ti sconsiglio di inserire dei componenti direttamente nel return di un componente padre, altrimenti andiamo così contro al pattern stesso che React ci invita a seguire.

Ecco un esempio di una composizione corretta usando il props.children:

Gestire il CSS dei componenti React tramite le props

Con l’aumentare della complessità della tua app noterai che ci sarà il bisogno di iniziare a gestire il CSS dei tuoi elementi in maniera sistematica, per raggiungere questo obiettivo puoi utilizzare le props per dettare le regole CSS che i tuoi componenti devono assumere.

Eccoti 2 esempi di un uso di props per gestire il CSS.

Usa le props come flag

Puoi passare una proprietà ad un componente react tramite un flag, in questo caso, come succede nel linguaggio HTML standard,  passerai al componente un boolean (true o false):

<Button red>Hello</Button>

Setta il valore della proprietà

In questo caso, oltre a passare il nome della proprietà ne andrai a settare il valore

<Button bsize="btn--medium">Hello</Button>

Eccoti un esempio di componente che setta il proprio CSS sfruttando i metodi che ti ho detto qui sopra.

Conclusione

Spero che con questo articolo abbia chiarito alcuni dei tuoi dubbi su React, se hai delle considerazioni da fare, ulteriori domande o semplicemente fare due chiacchiere ti aspetto nei commenti 🙂

The following two tabs change content below.

Riccardo Tartaglia

Campano, classe 89. Nel mio percorso lavorativo si intrecciano esperienze di Programmazione, Web Marketing, Blogging, Growth Hacking.