Inleiding tot React-componenten

Laten we naar een willekeurige website kijken. Deze bestaat uit een reeks onafhankelijke blokken: header, zijbalken, footer, inhoud. We kunnen zeggen dat deze blokken de componenten zijn in de zin zoals bedoeld in React.

Als we naar dezelfde header kijken, wat kunnen we daar in onderscheiden? Een blok met een logo, een contactblok, een blok met een menu enzovoort. Dat wil zeggen, componenten kunnen uit andere subcomponenten bestaan.

In React gaat het op een vergelijkbare manier - een website is opgebouwd uit een reeks componenten, die op hun beurt andere componenten kunnen bevatten.

In React is elke component een aparte module. Meestal begint de ontwikkeling met het hoofdcomponent App, dat de andere in zich bevat.

Laten we oefenen met het maken van nieuwe componenten.

Stel dat we voor dit voorbeeld een component nodig hebben die de gegevens van een product weergeeft. Hiervoor moeten we in de werkmap een bestand Product.js aanmaken en er de volgende code aan toevoegen:

import React from 'react';

function Product() {
	return <p>
		product
	</p>;
}

export default Product;

Zoals je ziet, retourneert onze component nu een paragraaf met tekst. In de volgende lessen zullen we deze code aanpassen zodat de productgegevens worden geretourneerd. Maar laten we voor nu gewoon de paragraaf met wat initiële tekst laten staan.

Laten we nu onze gemaakte component weergeven in het component App. Stel dat onze App momenteel de volgende code heeft:

import React from 'react';

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

export default App;

Om te beginnen moeten we het door ons gemaakte productcomponent importeren:

import React from 'react';
import Product from './Product'; // importeren het product

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

export default App;

Na een dergelijke import kan binnenin het component App het component Product gebruikt worden.