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:

jsximport 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:

jsximport 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:

jsximport 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.