React Komponentlerine giriş

Istýän bir saýta göz aýlaň. Ol birnäçe garaşsyz bloklardan: header, sidebarlar, footer, mazmuny. Diýip bolýar, bu bloklar React-da düşünilýän ýaly komponentlerdir.

Şol header-a göz aýlanyňda, onda logotip blogy, habarlaşmak blogy, menýu blogy we ş.m. aýryp görkezip bolýar. Ýagny komponentler beýleki kiçi komponentlerden ybarat bolup biler.

Şoňa meňzeş ýagdaý React-da-da - saýt bir top komponentlerden gurulýar, olar öz gezeginde beýleki komponentleri öz içine alyp biler.

React-da her komponent aýratyn modul hökmünde ýerleşýär. Köplenç ösdüriş esasy komponent App bilen başlanýar, ol galanlary öz içine alýar.

Täze komponentleri döretmegi maşk edeliň.

Mysal üçin bizde önümiň maglumatlaryny çykarýan komponent gerek. Bunuň üçin işleýän papkada Product.js faýlyny döretmeli we ona aşakdaky kody goşmaly:

import React from 'react';

function Product() {
	return <p>
		önüm
	</p>;
}

export default Product;

Görşüňiz ýaly, häzirki wagtda komponentimiz teksti bilen abzas gaýtarýar. Indiki sapaklarda biz bu kody önümiň maglumatlary gaýtarylýança gowulandyrmaly. Emma häzirki üçin diňe bir tekst bilen abzas goyup geçeliň.

Indi biz döreden komponentimizi App komponentinde çykarýaly. Häzirki wagtyň özünde App aşakdaky koda eýe bolsun:

import React from 'react';

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

export default App;

Başlangyç üçin biz döreden önüm komponentimizi import etmeli:

import React from 'react';
import Product from './Product'; // önümi import edýäris

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

export default App;

Şeýle import etmeginden soň App komponentiň içinde Product komponentini ulanmak bolýar.