Sissejuhatus Reacti komponentidesse

Vaadake mis tahes veebisaiti. See koosneb komplektist sõltumatutest plokkidest: päis, külgribad, jalus, sisu. Võib öelda, et need plokid ongi komponendid selles mõttes, nagu seda mõistetakse Reactis.

Kui vaadata sama päist, siis mida selles saab eristada ploki logo, kontaktide ploki, menüüploki ja nii edasi. See tähendab, et komponendid võivad koosneda teistest alamkomponentidest.

Samamoodi on lugu Reactiga - veebisait ehitatakse komponentide kogumist, mis omakorda võivad sisaldada teisi komponente.

Reactis on iga komponent eraldi moodul. Tavaliselt algab arendus peamise komponendi App abil, mis sisaldab endas teisi.

Harjutame uute komponentide loomist.

Oletame näiteks, et vajame komponenti, mis kuvaks toote andmeid. Selleks peame töökaustas looma faili Product.js ja lisama sellesse järgmise koodi:

import React from 'react';

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

export default Product;

Nagu näete, tagastab meie komponent praegu lõigu tekstiga. Järgmistes tundides täiendame seda koodi nii, et tagastataks toote andmed. Kuid praegu jätame lihtsalt lõigu mõne algse tekstiga.

Väljastame nüüd meie loodud komponendi komponendis App. Oletame, et praegu on meie App-il järgmine kood:

import React from 'react';

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

export default App;

Kõigepealt peame importima meie loodud toote komponendi:

import React from 'react';
import Product from './Product'; // importime toote

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

export default App;

Pärast sellist importi saab komponendi App sees kasutada komponenti Product.