In questo articolo analizzeremo i concetti fondamentali di React, tra cui props, componenti e state.

In React, una delle prime cose che incontrerai sono i componenti. Ma a cosa servono davvero? E perché sono così importanti nello sviluppo moderno di interfacce web?

I componenti sono piccoli pezzi di codice HTML (JSX), come ad esempio una card di Bootstrap oppure una navbar: anche questi sono componenti. Se pensi a plugin come Elementor di WordPress, che permettono di costruire siti a blocchi, oppure alla libreria Bootstrap con i suoi elementi già pronti, il concetto è molto simile. Anche in React i componenti sono blocchi che compongono un sito web.

Quindi, quando scriviamo un progetto in React (cioè un’interfaccia frontend), creiamo tanti file JavaScript che rappresentano i componenti. Successivamente, questi componenti vengono importati nei punti in cui vogliamo usarli, costruendo così un’interfaccia web completa.

Ma come possiamo passare dati tra componenti per rendere tutto dinamico?

Possiamo prendere un componente e passargli dati diversi (come array o oggetti), così lo stesso componente può mostrare immagini e testi differenti. In questo modo creiamo contenuti dinamici. Per trasmettere i dati tra componenti in un’applicazione React si usano le props.

Ecco un esempio:

Questo è un esempio di componente Post, che rappresenta un articolo di blog. Gli attributi title, content e img sono definiti liberamente: possono avere qualsiasi nome, come variabili. Questi dati saranno disponibili nel componente tramite l’oggetto props, così:

Per quanto riguarda lo state, è un oggetto che contiene i dati interni di un componente. Non è globale a tutta l’applicazione (come spesso si pensa), ma appartiene al singolo componente.

Quando lo state viene aggiornato (cioè cambia un valore), React aggiorna automaticamente i componenti interessati, rinfrescando la visualizzazione senza ricaricare tutta la pagina.