Komponenttien käyttö Reactissa
Jokainen tuotu komponentti vastaa
omaa JSX-tagia. Esimerkiksi, meillä on komponentti
Product, mikä tarkoittaa, että sitä vastaa
seuraava tagi:
<Product />
Komponenttitagin nimen on aina oltava kirjoitettu isolla alkukirjaimella, jotta React voi erottaa komponentin kutsun HTML-tagin käytöstä.
Joten, käytetään App-komponentin sisällä
komponenttia Product kirjoittamalla
sitä vastaava tagi:
import React from 'react';
import Product from './Product';
function App() {
return <div>
<Product />
</div>;
}
export default App;
Tuloksena renderöinnin jälkeen saadaan seuraava:
<div>
<p>
product
</p>
</div>
Tee komponentti User, joka
tulostaa käyttäjien tietoja. Anna tämän
komponentin toistaiseksi vain tulostaa jotakin tekstiä.
Käytä tätä komponenttia App-komponentissa.