Componenti
In React, una pagina Html è composta da componenti.
Un componente rappresenta un blocco atomico di codice HTML, insieme ad eventuali comportamenti dinamici associati a quel frammento (ad esempio, su eventi di click). Sono come dei piccoli blocchi Lego, che possono essere composti a piacere tra di loro fino a realizzare applicazioni complesse a piacere. Un componente è isolabile e riutilizzabile.
E’ possibile creare un Componente in diversi modi, ognuno dei quali ha dei vantaggi e svantaggi.
Functional Components
Il metodo più semplice per definire un Componente è tramite una semplice funzione Javascript che riceve in input un oggetto chiamato props e restituisce un Elemento React (React Element).
Vediamo subito un semplice esempio:
function Ciao(props) {
return <h1>Ciao, {props.nome} {props.cognome} </h1>;
}
Abbiamo creato un componente di nome “Ciao” che restituisce un Elemento React.
Questo componente accetta un oggetto “props” (che prende il nome da “properties” in inglese, ossia “proprietà”) in input. Props al suo interno conterrà i dati che vogliamo dare in input al componente, in questo caso i dati “nome” e “cognome”.
Provalo su CodePen
Nell’esempio abbiamo:
Nell’esempio abbiamo:
1. Invocato la funzione ReactDOM.render() passando in input il div con id “root” e l’elemento
<Ciao nome="Pippo" cognome = “Pluto” />
2. React chiama a sua volta il componente “Ciao” passando in input l’ argomento props, a sua volta composto da due dati: “cognome” e “nome”. Quindi, nel nostro caso, il componente Ciao riceve due props, vale a dire le prop “nome” con valore “Pippo” e “cognome” con valore “Pluto”.
3. Il componente Ciao, ritorna un elemento
<h1>Ciao, Pippo Pluto</h1>
4. React DOM aggiorna il DOM inserendo
<h1>Ciao, Pippo Pluto</h1>
all’interno del div con id ”Root”.
Class Components
La versione Javascript ES6 ha introdotto una nuova sintassi per creare oggetti in Javascript più simile a quella utilizzata in altri linguaggi di programmazione.
class Ciao extends React.Component {
render() {
return <h1>Ciao, {this.props.nome}</h1>;
}
}
Un Componente definito in questo modo, deve avere almeno un metodo render() che verrà chiamato da React per aggiornare il componente stesso. Per definire un componente React dovremmo inoltre utilizzare la keyword extends per indicare un vincolo di ereditarietà fra il componente Ciao e la “classe” base React.Component.
Anche in questo caso, otterremo lo stesso risultato.
Provalo su CodePen
I due componenti sono equivalenti dal punto di vista di React, ma hanno delle piccole differenze che vedremo più avanti, nella sezione dedicata. Fino ad allora useremo i Funzional Components, per via della loro concisione