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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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')
);
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') );
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.