Въведение в компонентния подход в React

Нека имаме уебсайт. На този сайт можем да отделим някои блокове: хедър, съдържание, странична лента, футър и така нататък. Всеки блок може да бъде разделен на по-малки подблокове. Например в хедъра обикновено могат да се отделят лого, меню, блок за контакти и така нататък.

В React всеки такъв блок се нарича компонент. Всеки компонент може да съдържа в себе си по-малки компоненти, те от своя страна още по-малки и така нататък.

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

Например, файл с име App.js трябва да съдържа в себе си функцията App:

App.jsimport React from 'react';

function App() {
  // код на компонента
}

export default App;

Един от компонентите трябва да е основен - този, към който се добавят останалите компоненти. В React по подразбиране такъв компонент ще бъде компонентът App. Към този компонент ще бъдат свързвани други компоненти. Как се прави това - ще разгледаме по-нататък в учебника.