Reactda komponentli yondashuvga kirish

Faraz qilaylik, bizda veb-sayt bor. Ushbu saytda biz ba'zi bloklarni ajratib ko'rsatishimiz mumkin: sarlavha, kontent, yon panel, pastki qism va hokazo. Har bir blokni kichikroq pastki bloklarga bo'lish mumkin. Masalan sarlavhada odatda logotip, menyu, aloqa bloki va hokazolarni ajratib ko'rsatish mumkin.

Reactda har bir bunday blok komponent deb ataladi. Har bir komponent o'z ichida kichikroq komponentlarni o'z ichiga olishi mumkin, ular o'z navbatida yanada kichikroq bo'lishi mumkin va hokazo.

Reactdagi har bir komponentga src papkasida joylashgan ES6 moduli mos keladi. Modul faylining nomi bosh harf bilan yoziladi va ushbu modul kodida joylashgan funktsiyaga mos kelishi kerak.

Masalan, App.js nomli fayl o'z ichida App funktsiyasini o'z ichiga olishi kerak:

import React from 'react';

function App() {
	// komponent kodi
}

export default App;

Komponentlardan biri asosiy bo'lishi kerak - boshqa komponentlar qo'shiladigan komponent. Reactda standart bo'yicha bunday komponent App komponenti bo'ladi. Ushbu komponentga boshqa komponentlar ulanishi kerak. Buning qanday amalga oshirilishi - biz buni keyinroq o'quv qo'llanmada tahlil qilamiz.