Componenti e Props

Renderizzare un Componente

In precedenza, abbiamo incontrato elementi React che rappresentano tags DOM:

const elemento = <div />;

Comunque, gli elementi possono rappresentare anche componenti definiti dall’utente:

const elemento = <Ciao nome="Sara" />;

Quando React incontra un elemento che rappresenta un componente definito dall’utente, passa gli attributi JSX ed i figli a questo componente come un singolo oggetto. Tale oggetto prende il nome di “props”.

Ad esempio, il codice seguente renderizza il messaggio “Ciao, Sara” nella pagina:

function Ciao(props) {  return <h1>Ciao, {props.nome}</h1>;
}

const elemento = <Ciao nome="Sara" />;ReactDOM.render(
  elemento,
  document.getElementById('root')
);

Prova su CodePen

Ricapitoliamo cosa succede nell’esempio:

1. Richiamiamo ReactDOM.render() con l’elemento <Ciao nome="Sara" />.

2. React chiama a sua volta il componente Ciao con {nome: 'Sara'} passato in input come props.

3. Il nostro componente Ciao ritorna un elemento <h1>Ciao, Sara</h1> come risultato.

4. React DOM aggiorna efficientemente il DOM per far sì che contenga <h1>Ciao, Sara</h1>.

Nota Bene: Ricordati di chiamare i tuoi componenti con la prima lettera in maiuscolo.

React tratta i componenti che iniziano con una lettera minuscola come normali tags DOM. per esempio, <div /> rappresenta un tag HTML div, <Ciao /> rappresenta invece un componente e richiede Ciao all’interno dello scope.

Per saperne di più riguardo questa convenzione, leggi JSX In Dettaglio.