In questo articolo ti racconto cosa è un component ReactJS. Se è la prima volta che segui questa guida questo non è il primo passo. Quindi se vuoi puoi iniziare da ReactJS: come creare una web app da zero.
Questo articolo è un po’ meno pratico, ma è necessario imparare cosa è un Component per poter proseguire.
Definizione Leggera
Un Component o React.Component è concettualmente una funzione Javascript e ti permette di suddividere la UI del tuo progetto in pezzettini sempre più piccoli.
Al centro di tutto c’è il concetto di riusabilità. Lo scopo infatti è proprio quello di creare componenti riutilizzabili da componenti più grandi e così via.
Un component accetta come input le props. Le props arrivano al component come un oggetto contenente diverse proprietà. Per esempio posso passare ad un component che mostra il profilo di un utente più oggetti contenenti informazioni sull’utente così come passare solo un identificativo numerico atto poi al recupero dell’utente in un secondo momento.
Quanti Component posso usare?
Tecnicamente la risposta a questa domanda è infiniti. Il modo in cui puoi usarli è anch’esso frutto della tua immaginazione. Prendendo sempre l’esempio di prima in cui devi gestire un profilo. Non farai un solo componente che mostra il profilo, per quanto nessuno te lo vieti, ma andrai a costruire tanti piccoli pezzetti. Il component che gestisce il profilo sarà composto da tanti altri componenti, per esempio:
- Il component che gestisce l’immagine
- Il component che gestisce nome, cognome e data di nascita
- Il component che gestisce le carte di credito
Ciascuno di questi component può a sua volta essere composto da più componenti.
Convenzioni
Quando si parla di componenti ReactJS normalmente si differenzia un componente da un tag HTML (o DOM tag) utilizzando un nome che inizia con lettera maiuscola. Nel caso di prima avremo il componente del profilo che si chiamerà Profilo. Questo componente verrà richiamato da chi ne ha bisogno scrivendo: <Profilo />.
Se al componente vogliamo passargli delle props lo chiameremo in questo modo: <Profilo user = {this.state.user} />. In questo secondo caso stiamo chiamando il componente del profilo che riceverà nell’oggetto props la proprietà user popolata da quanto presente in this.state.user.
Un componente deve sempre ritornare un elemento root. Ciò vuol dire che se guardiamo il componente del profilo non potrà ritornare a chi lo chiama i componenti relativi ad immagine, nome/cognome/data di nascita e carte di credito senza averli inseriti dentro un elemento (per esempio dentro ad un <div>).
Un esempio di component reale
Un esempio di componente ReactJS reale è quello presente nella nostra applicazione con la quale andremo avanti a costruire la nostra prima web app. Apri il file App.js:
Come puoi vedere App è una classe che estende Component. La funzione che non deve mai mancare in un componente è la funzione render. Questa funzione ha lo scopo di ritornare codice HTML ed altri componenti. In questo caso stiamo ritornando un <div> con classe “App” che contiene a sua volta un insieme di elementi HTML.
Nel file index.js invece utilizziamo il componente App per inserirlo dove troviamo il <div> con id root. Quello che viene renderizzato è quanto vediamo nel componente App. Il componente App al suo interno potrebbe chiamare tanti altri componenti che a loro volta possono essere composti da HTML e componenti di diverso tipo.
Alcune note
Hai notato che le classi CSS vengono inserite utilizzando className? Questo accade perché siamo in un file javascript e class è una parola riservata del linguaggio.
Hai notato che nel tag <img> abbiamo il valore di src tra parentesi graffe? Questo perché il logo è una variabile che passiamo ad src e contiene un file svg.
Tra le cose fondamentali da rispettare è che i componenti ReactJS devono essere intesi come funzioni pure (pure functions) nei confronti delle props. Ciò vuol dire che non bisognerebbe mai modificare il valore delle props.
Conclusioni
In questo articolo hai imparato un po’ cos’è un Component e se vuoi puoi approfondire il discorso a questo indirizzo. Per capire però come funziona ReactJS a pieno devi attendere la prossima guida sul lifecycle.
Se vuoi continuare a seguire questa guida ti ricordo di non perdere di vista ReactJS: come creare una web app da zero. Inoltre se ti iscrivi alla newsletter non ti perderai i nuovi articoli. Mando da 1 a 4 mail al mese ricapitolando dove siamo arrivati con ogni guida. Con la newsletter hai anche accesso a libri ed ebook gratuiti, così come a coupon Udemy ? .
Per dubbi o domande scrivimi nei commenti ? .
Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!).
