Komponentu izmantošana React

Katram pievienotajam komponentam atbilst sava JSX atzīme. Piemēram, mums ir komponents Product, kas nozīmē, ka tam atbilst šāda atzīme:

jsx<Product />

Komponenta atzīmes nosaukums obligāti jāraksta ar lielo sākumburtu, lai React varētu atšķirt komponenta izsaukumu no HTML atzīmes lietošanas.

Tātad, izmantosim komponentu Product iekšpus komponenta App, ierakstot atbilstošo atzīmi:

jsximport React from 'react';
import Product from './Product';

function App() {
  return <div>
    <Product />
  </div>;
}

export default App;

Rezultātā pēc renderēšanas iegūsim sekojošo:

html<div>
  <p>
    product
  </p>
</div>