Introduksjon til React-komponenter

La oss se på en hvilken som helst nettside. Den består av et sett med uavhengige blokker: header, sidefelt, footer, innhold. Man kan si at disse blokkene er komponenter i den forstand som forstås i React.

Hvis vi ser på den samme headeren, hva kan man skille ut en blokk med logo, en kontaktblokk, en blokk med meny og så videre. Det vil si at komponenter kan bestå av andre underkomponenter.

På samme måte forholder det seg i React - nettsiden bygges opp av et sett med komponenter, som i sin tur kan inneholde andre komponenter.

I React er hver komponent en separat modul. Utvikling starter vanligvis med hovedkomponenten App, som inneholder de andre.

La oss øve oss på å lage nye komponenter.

La oss for eksempel si at vi trenger en komponent som viser produktdata. For å gjøre dette må vi i arbeidsmappen opprette filen Product.js og legge til følgende kode:

import React from 'react';

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

export default Product;

Som du ser, returnerer komponenten vår for tiden en avsnitt med tekst. I de neste leksjonene vil vi forbedre denne koden slik at den returnerer produktdata. Men for nå lar vi den være med et avsnitt med litt innledende tekst.

La oss nå vise vår nyopprettede komponent i App-komponenten. La oss si at vår App for tiden har følgende kode:

import React from 'react';

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

export default App;

Først må vi importere produktkomponenten vi har opprettet:

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

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

export default App;

Etter en slik import kan vi inni App-komponenten bruke Product-komponenten.