Uvod v komponente React

Poglejmo katero koli spletno stran. Sestavljena je iz niza neodvisnih blokov: glava, stranske vrstice, noga, vsebina. Lahko rečemo, da so ti bloki komponente v smislu, kot se razume v Reactu.

Če pogledamo isto glavo, kaj je v njem lahko izpostavimo blok z logotipom, blok stikov, blok z menijem in tako naprej. To pomeni, da komponente lahko sestavljajo druge podkomponente.

Na podoben način je v Reactu - stran je zgrajena iz niza komponent, ki lahko vsebujejo druge komponente.

V Reactu je vsaka komponenta ločen modul. Razvoj se običajno začne z glavno komponento App, ki vsebuje ostale.

Vadimo ustvarjanje novih komponent.

Recimo, da za primer potrebujemo komponento, ki prikaže podatke o izdelku. Za to moramo v delovni mapi ustvariti datoteko Product.js in dodati vanjo naslednjo kodo:

jsximport React from 'react';

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

export default Product;

Kot vidite, naša komponenta zdaj vrne odstavek z besedilom. V naslednjih lekcijah bomo izboljšali to kodo tako, da bodo vrnjeni podatki o izdelku. Za zdaj pa pustimo odstavek z nekaj začetnim besedilom.

Izpišimo zdaj našo ustvarjeno komponento v komponenti App. Recimo, da ima naš App zdaj naslednjo kodo:

jsximport React from 'react';

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

export default App;

Najprej moramo uvoziti ustvarjeno komponento izdelka:

jsximport React from 'react';
import Product from './Product'; // uvozimo izdelek

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

export default App;

Po takem uvozu je znotraj komponente App mogoče uporabiti komponento Product.