Bevezetés a komponensalapú megközelítésbe Reactban

Tegyük fel, hogy van egy weboldalunk. Ezen a weboldalon különböző blokkokat tudunk kiemelni: fejléc, tartalom, oldalsáv, lábléc és így tovább. Minden blokk tovább bontható kisebb alblokkokra. Például a fejlécben általában megkülönböztethető a logó, a menü, az elérhetőségek blokkja és így tovább.

A Reactban minden ilyen blokkot komponensnek hívnak. Minden komponens tartalmazhat magában kisebb komponenseket, azok pedig további, még kisebb komponenseket és így tovább.

A Reactban minden komponenshez egy ES6 modul tartozik, amely a src mappában található. A modult tartalmazó fájl neve nagybetűvel kezdődik és meg kell egyezzen a fájlban található függvény nevével.

Például a App.js nevű fájlnak tartalmaznia kell a App függvényt:

App.jsimport React from 'react';

function App() {
  // a komponens kódja
}

export default App;

Az egyik komponensnek főkomponensnek kell lennie - annak, amelyhez a többi komponens hozzáadódik. A Reactban alapértelmezetten ez a komponens a App komponens lesz. Ehhez a komponenshez fognak kapcsolódni a többi komponens. Hogyan történik ez - azt a továbbiakban fogjuk részletezni a tutorialban.