Муқаддима ба равиши компонентӣ дар React

Фарз кунем, ки мо вебсайт дорем. Дар ин вебсайт мо метавонем баъзе блокҳоро ҷудо кунем: сарлавҳа (header), мундариҷа (content), асоси (sidebar), поённавис (footer) ва ғайра. Ҳар як блокро метавон ба блокҳои хурдтар тақсим кард. Масалан, дар сарлавҳа одатан логотип, меню, блоки тамос ва ғайраро ҷудо кардан мумкин аст.

Дар React ҳар як чунин блок компонент номида мешавад. Ҳар як компонент метавонад дар худ компонентҳои хурдтарро дар бар гирад, онҳо худ боз хурдтар ва ғайра.

Ба ҳар як компонент дар React модули ES6 мувофиқат мекунад, ки дар ҷузъдони src ҷойгир аст. Номи файл бо модул бо ҳарфи калон навишта мешавад ва бояд ба функсияе мувофиқат кунад, ки дар рамзи ин модул ҷойгир аст.

Масалан, файл бо номи App.js бояд дар худ функсияи App-ро дар бар гирад:

import React from 'react';

function App() {
	// рамзи компонент
}

export default App;

Яке аз компонентҳо бояд асосӣ бошад - он ки ба он компонентҳои дини илова карда мешаванд. Дар React ба таври пешфарз чунин компонент компоненти App хоҳад буд. Ба ин компонент компонентҳои дигар пайваст карда мешаванд. Чӣ гуна ин кор анҷом дода мешавад - мо дар дастур ҷараён мекунем.