Gebruik van componenten in React
Aan elke geïmporteerde component correspondeert
zijn eigen JSX-tag. Stel, we hebben een component
Product, dan hoort daarbij de
volgende tag:
<Product />
De naam van de component-tag moet altijd met een hoofdletter worden geschreven, zodat React het gebruik van een component kan onderscheiden van een HTML-tag.
Laten we nu binnen de component App
de component Product gebruiken, door
de bijbehorende tag te schrijven:
import React from 'react';
import Product from './Product';
function App() {
return <div>
<Product />
</div>;
}
export default App;
Het resultaat na het renderen zal het volgende zijn:
<div>
<p>
product
</p>
</div>
Maak een component User, dat
gebruikersgegevens zal weergeven. Laat deze
component voorlopig gewoon wat tekst tonen.
Gebruik deze component in de component App.
