React Komponentlərinə Giriş

İstənilən veb-sayta nəzər salaq. O, müstəqil bloklar dəstəsindən ibarətdir: başlıq, yan panel, altbilik, məzmun. Deyə bilərik ki, bu bloklar React-da nəzərdə tutulan mənada komponentlərdir.

Eyni başlığa baxsaq, ondan loqotip blokunu, əlaqə blokunu, menyu blokunu və s. ayıra bilərik. Yəni komponentlər digər alt komponentlərdən ibarət ola bilər.

React-da da vəziyyət eyni şəkildədir - sayt öz növbəsində digər komponentləri ehtiva edə bilən komponentlər dəstəsindən qurulur.

React-da hər bir komponent ayrı bir modul təşkil edir. Adətən inkişaf əsas komponent olan App ilə başlayır, o, qalanları özündə saxlayır.

Gəlin yeni komponentlər yaratmaqda məşq edək.

Nümunə üçün fərz edək ki, bizə məhsul məlumatlarını çıxaran bir komponent lazımdır. Bunun üçün iş qovluğunda Product.js faylı yaratmalı və onun içinə aşağıdakı kodu əlavə etməliyik:

import React from 'react';

function Product() {
	return <p>
		məhsul
	</p>;
}

export default Product;

Gördüyünüz kimi, indi bizim komponent mətnlə olan abzas qaytarır. Növbəti dərslərdə biz bu mətni elə düzəldəcəyik ki, məhsul məlumatları bizim istədiyimiz görüntüdə qaytarılsın. Amma indilik istiqamət üçün sadəcə hazırlanmış mətnlə olan abzası saxlayaq.

Gəlin indi yaratdığımız komponenti App komponentində çıxaraq. Fərz edək ki, indi bizim App aşağıdakı koda malikdir:

import React from 'react';

function App() {
	return <div>
		mətn
	</div>;
}

export default App;

Əvvəlcə biz yaratdığımız məhsul komponentini import etməliyik:

import React from 'react';
import Product from './Product'; // məhsulu import edirik

function App() {
	return <div>
		mətn
	</div>;
}

export default App;

Belə bir importdan sonra App komponentinin daxilində Product komponentindən istifadə etmək olar.