Introduktion till React-komponenter

Titta på vilken webbplats som helst. Den består av en uppsättning oberoende block: header, sidofält, footer, innehåll. Man kan säga att dessa block är komponenter i den mening som avses i React.

Om man tittar på samma header, vad kan man urskilja i den? En block med logotyp, en kontaktblock, en block med meny och så vidare. Det vill säga, komponenter kan bestå av andra underkomponenter.

På samma sätt förhåller det sig i React - webbplatsen byggs av en uppsättning komponenter, som i sin tur kan innehålla andra komponenter.

I React är varje komponent en separat modul. Utvecklingen börjar vanligtvis med huvudkomponenten App, som innehåller resten.

Låt oss öva på att skapa nya komponenter.

Låt oss som exempel säga att vi behöver en komponent som visar produktdata. För att göra detta måste vi i vår arbetsmapp skapa filen Product.js och lägga till följande kod i den:

import React from 'react';

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

export default Product;

Som du ser returnerar vår komponent för närvarande ett stycke med text. I kommande lektioner kommer vi att förbättra denna kod så att produktdata returneras. Men för nu lämnar vi bara stycket med lite initial text.

Låt oss nu visa vår skapade komponent i komponenten App. Låt oss säga att vår App för närvarande har följande kod:

import React from 'react';

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

export default App;

Först måste vi importera den skapade produktkomponenten:

import React from 'react';
import Product from './Product'; // importerar produkten

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

export default App;

Efter en sådan import kan komponenten Product användas inuti komponenten App.