Introduktion til React-komponenter

Kig på en hvilken som helst hjemmeside. Den består af et sæt uafhængige blokke: header, sidebjælker, footer, indhold. Man kan sige, at disse blokke er komponenter i den forstand, som det forstås i React.

Hvis man ser på den samme header, hvad kan man så udskille i den? En blok med logo, en kontaktblok, en blok med menu og så videre. Det vil sige, at komponenter kan bestå af andre underkomponenter.

På samme måde forholder det sig i React - en hjemmeside bygges af et sæt komponenter, som til gengæld kan indeholde andre komponenter.

I React er hver komponent en separat modul. Udviklingen starter normalt med hovedkomponenten App, som indeholder de andre.

Lad os øve os i at oprette nye komponenter.

Lad os for eksempel sige, at vi har brug for en komponent, der viser data for et produkt. For at gøre dette skal vi i arbejdsmappen oprette filen Product.js og tilføje følgende kode til den:

import React from 'react';

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

export default Product;

Som du kan se, returnerer vores komponent i øjeblikket et afsnit med tekst. I de næste lektioner vil vi forbedre denne kode, så den returnerer produktdata. Men for nu lader vi blot være med afsnittet med en starttekst.

Lad os nu vise vores oprettede komponent i komponenten App. Lad os sige, at vores App for øjeblikket har følgende kode:

import React from 'react';

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

export default App;

Til at starte med skal vi importere den komponent med produktet, som vi har oprettet:

import React from 'react';
import Product from './Product'; // importerer produktet

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

export default App;

Efter en sådan import kan komponenten Product bruges inde i komponenten App.