Įvadas į React komponentus

Pažvelkime į bet kurią svetainę. Ji susideda iš rinkinio nepriklausomų blokų: viršutinė antraštė (header), šoniniai skydeliai (sidebar), poraštė (footer), turinys. Galima sakyti, kad šie blokai yra komponentai ta prasme, kaip tai suprantama React.

Jei pažvelgtume į tą pačią viršutinę antraštę, ką joje galima išskirti bloką su logotipu, kontaktų bloką, bloką su meniu ir taip toliau. Tai yra, komponentai gali susidėti iš kitų subkomponentų.

Panašiai reikalas klostosi ir React - svetainė kuriama iš komponentų rinkinio, kurie savo ruožtu gali turėti kitus komponentus.

React kiekvienas komponentas yra atskiras modulis. Paprastai kūrimas prasideda nuo pagrindinio komponento App, kuris jame yra kiti.

Pasitreniruokime kurti naujus komponentus.

Tarkime, pavyzdžiui, mums reikia komponento, kuris išvestų produkto duomenis. Tam mums reikia darbo Aplankalo sukurti failą Product.js ir pridėti į jį šį kodą:

import React from 'react';

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

export default Product;

Kaip matote, dabar mūsų komponentas grąžina pastraipą su tekstu. Kitiose pamokose patobulinsime šį kodą taip, kad būtų grąžinami produkto duomenys. Bet kol kas pradžiai tiesiog palikime pastraipą su tam tikru pradiniu tekstu.

Dabar išveskime mūsų sukurtą komponentą komponente App. Tarkime, kad dabar mūsų App turi šį kodą:

import React from 'react';

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

export default App;

Pirmiausia mums reikia importuoti mūsų sukurtą produkto komponentą:

import React from 'react';
import Product from './Product'; // importuojame produktą

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

export default App;

Po tokio importo komponento App viduje galima naudoti komponentą Product.