React-ის კომპონენტებში შესავალი

შევხედოთ ნებისმიერ საიტს. იგი შედგება დამოუკიდებელი ბლოკებისგან: ჰედერი, საიდბარები, ფუტერი, კონტენტი. შეგვიძლია ვთქვათ, რომ ეს ბლოკები არის კომპონენტები იგივე გაგებით, როგორც ეს გაგებულია React-ში.

თუ შევხედავთ იმავე ჰედერს, რა შეგვიძლია გამოვყოთ მასში - ბლოკი ლოგოტიპით, კონტაქტების ბლოკი, მენიუს ბლოკი და ა.შ. ანუ კომპონენტები შეიძლება შედგებოდეს სხვა ქვეკომპონენტებისგან.

ანალოგიურად სიტუაციაა React-ში - საიტი აგებულია კომპონენტების სიმრავლისგან, რომლებიც თავის მხრივ შეიძლება შეიცავდნენ სხვა კომპონენტებს.

React-ში ყოველი კომპონენტი წარმოადგენს ცალკეულ მოდულს. ჩვეულებრივ, დეველოპმენტი იწყება მთავარი კომპონენტით App, რომელიც შეიცავს თავის თავში დანარჩენებს.

მოდით ვვარჯიშობდეთ ახალი კომპონენტების შექმნაში.

მაგალითად, დაგვჭირდება კომპონენტი, რომელიც გამოიტანს პროდუქტის მონაცემებს. ამისთვის საჭიროა, რომ სამუშაო ფოლდერში შევქმნათ ფაილი Product.js და დავამატოთ მასში შემდეგი კოდი:

import React from 'react';

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

export default Product;

როგორც ხედავთ, ახლა ჩვენი კომპონენტი აბრუნებს აბზაცს ტექსტით. შემდეგ გაკვეთილებში ჩვენ შევცვლით ამ ტექსტს ისე, რომ დაიბრუნოს პროდუქტის მონაცემები, ჩაფორმებული ჩვენთვის სასურველი ვერსტკაში. მაგრამ ახლა, გასახურებისთვის, დავტოვოთ უბრალოდ აბზაცი საცდელი ტექსტით.

მოდით ახლა გამოვსახოთ ჩვენი შექმნილი კომპონენტი კომპონენტში App. დავუშვათ, რომ ახლა ჩვენი App აქვს შემდეგი კოდი:

import React from 'react';

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

export default App;

დასაწყისისთვის, ჩვენ გვჭირდება შევქმნილი პროდუქტის კომპონენტის იმპორტი:

import React from 'react';
import Product from './Product'; // იმპორტირებთ პროდუქტს

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

export default App;

ასეთი იმპორტის შემდეგ, კომპონენტის App შიგნით შესაძლებელია კომპონენტის Product გამოყენება.