Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Set 14
cos'è un component ReactJS

ReactJS: cos’è un component

  • 14/09/2017
  • Paolo Dell'Aguzzo
  • No Comments
  • Programmazione
  • programmazione, react component, reactjs, web app
Ciao 🙂

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:

Development Category (English)728x90

  • 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.

Deep Learning Specialization on Coursera

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:

React component

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!).

Prossimo articolo della guida: ReactJS: cos’è il lifecycle e lo state

Commenti

Condividi:

  • Fai clic qui per condividere su Twitter (Si apre in una nuova finestra)
  • Fai clic per condividere su Facebook (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Tumblr (Si apre in una nuova finestra)
  • Fai clic qui per condividere su LinkedIn (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Pinterest (Si apre in una nuova finestra)
  • Fai clic per condividere su WhatsApp (Si apre in una nuova finestra)
  • Fai clic per condividere su Telegram (Si apre in una nuova finestra)
  • Clicca per condividere su Skype (Si apre in una nuova finestra)
  • Fai clic qui per stampare (Si apre in una nuova finestra)

Correlati

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail
Paolo Dell'Aguzzo

About The Author

Sono sempre stato affascinato dal marketing e dall'informatica a tal punto di unire le due passioni :) Se ti piace l'articolo fammelo sapere in un commento :)

Related Posts

  • I principali engine utilizzati per lo sviluppo di videogiochi30/01/2023
  • Imparare a programmare con Udemy – Sondaggio tra programmatori16/01/2018
  • Udemy I Migliori Corsi per Programmatori27/11/2017
  • I 5 Linguaggi che Dovrebbe Conoscere Ogni Programmatore03/10/2017

Fammi sapere cosa ne pensi :) Annulla risposta

Impara ReactJS imparare react
I 10 + 1 Libri che Dovrebbe Leggere Ogni Programmatore libri programmatore
Newsletter

Seguimi su Facebook :)

Facebook Pagelike Widget
Impara React Native imparare react native
10 Cose per Stare Più Comodo in Ufficio stare più comodo in ufficio
Impara a Creare un Tema Wordpress imparare creare tema wordpress
Udemy I Migliori Corsi per Programmatori udemy corsi programmatori
UX: Perché la User Experience è Importante UX importante e cos'è
Metodologie Agili e Lean: Come migliorare la tua azienda metodologie agili
Libri per Imparare JavaScript Imparare JavaScript libri

Articoli recenti

  • I principali engine utilizzati per lo sviluppo di videogiochi
  • Dalla visione alla realtà: Lo sviluppo di videogiochi dal punto di vista di un programmatore
  • 8 consigli per migliorare la tua SEO Locale

Categorie

  • CSS
  • Interviste
  • Java
  • Lavoro
  • Normative
  • Personale
  • Programmazione
  • Strategia & Marketing
  • Tech
  • Web Design
  • Wordpress
Paolo Dell'Aguzzo
Programmatore Software - Marotta di Mondolfo, Pesaro e Urbino
P. IVA: IT02758450429
Mail: info@paolodellaguzzo.com
Via Litoranea, 284/C - Marotta (PU)
Privacy Policy
Cookie Policy
In qualità di Affiliato Amazon, ricevo un guadagno per ciascun acquisto idoneo
Amazon e il logo Amazon sono marchi registrati di Amazon.com, Inc. o delle sue affiliate
Programmatore Senigallia, Ancona - Siti web, app iOS e Android, gestionali ReactJS, React Native, Java, SQL, PL/SQL, Heroku

 

Caricamento commenti...