Bevezetés a React komponensekbe

Nézzünk meg bármilyen weboldalt. Az független blokkok gyűjteményéből áll: fejléc, oldalsávok, lábléc, tartalom. Mondhatjuk, hogy ezek a blokkok komponensek abban az értelemben, ahogyan a React értelmezi.

Ha megnézzük ugyanazt a fejlécet, mit tudunk különböztetni benne: egy blokkot a logóval, egy elérhetőségi blokkot, egy menüblokkot és így tovább. Vagyis a komponensek más alkomponensekből is állhatnak.

Hasonlóképpen van ez a Reactban is - a weboldal komponensek gyűjteményéből épül fel, amelyek viszont tartalmazhatnak más komponenseket.

A Reactban minden komponens egy külön modul. A fejlesztés általában a fő komponenssel, a App-val kezdődik, amely magában foglalja a többit.

Gyakoroljunk új komponensek létrehozását.

Tegyük fel, hogy például szükségünk van egy komponensre, amely kiírja egy termék adatait. Ehhez létre kell hoznunk a munkamappában a Product.js fájlt, és hozzá kell adnunk a következő kódot:

import React from 'react';

function Product() {
	return <p>
		termék
	</p>;
}

export default Product;

Amint látod, jelenleg a komponensünk egy bekezdést ad vissza szöveggel. A következő leckékben finomítani fogjuk ezt a kódot úgy, hogy a termék adatai legyenek visszaadva. De egyelőre hagyjunk csak egy bekezdést valamilyen kezdeti szöveggel.

Most jelenítsük meg a létrehozott komponensünket a App komponensben. Tegyük fel, hogy jelenleg a App a következő kóddal rendelkezik:

import React from 'react';

function App() {
	return <div>
		szöveg
	</div>;
}

export default App;

Először is importálnunk kell a létrehozott termék komponensünket:

import React from 'react';
import Product from './Product'; // importáljuk a terméket

function App() {
	return <div>
		szöveg
	</div>;
}

export default App;

Egy ilyen importálás után a App komponensen belül használhatjuk a Product komponenst.