Inleiding tot React-komponente

Kyk na enige webwerf. Dit bestaan uit 'n stel onafhanklike blokke: koptekst, sybalke, voetskrif, inhoud. Ons kan sê dat hierdie blokke komponente is in die sin wat in React bedoel word.

As ons na dieselfde koptekst kyk, wat kan ons daarin onderskei? 'n Blok met die logo, 'n kontakteblok, 'n blok met 'n spyskaart, en so meer. Dit wil sê komponente kan uit ander subkomponente bestaan.

Op 'n soortgelyke wyse gaan dit in React - 'n webwerf word gebou uit 'n stel komponente, wat op hul beurt ander komponente kan bevat.

In React is elke komponent 'n aparte module. Ontwikkeling begin gewoonlik met die hoofkomponent App, wat die ander in homself bevat.

Kom ons oefen om nuwe komponente te skep.

Laat ons byvoorbeeld 'n komponent benodig wat produkdata vertoon. Vir dit moet ons in die werks- vouer die lêer Product.js skep en die volgende kode daarin byvoeg:

import React from 'react';

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

export default Product;

Soos jy kan sien, gee ons komponent tans 'n paragraaf met teks terug. In die volgende lesse sal ons hierdie kode so ontwikkel dat dit produkdata sal teruggee. Maar vir nou los ons net die paragraaf met 'n sekere aanvangsteks.

Kom ons toon nou ons geskepte komponent in die komponent App. Laat ons sê ons App het tans die volgende kode:

import React from 'react';

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

export default App;

Om te begin moet ons die geskepte produkkomponent inbring:

import React from 'react';
import Product from './Product'; // bring produk in

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

export default App;

Na so 'n invoer kan die komponent Product binne die komponent App gebruik word.