Composizione Componenti React

Composizione Componenti

I componenti possono far riferimento anche ad altri componenti nel loro output.Per esempio, possiamo creare un componente App che renderizza Ciao tante volte:

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

function App() {
  return (
    <div>
      <Ciao nome="Sara" />
      <Ciao nome="Cahal" />
      <Ciao nome="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Prova su CodePen

E’ buona norma suddividere i componenti in componenti più piccoli, ove possibile. Questo rende i componenti più facili da gestire e riutilizzabili.

Nota Bene: i componenti React  non devono mai modificare le proprie props. Le props devono essere in sola lettura e sono utilizzate per scambiare dati tra componenti.