Wprowadzenie do podejścia komponentowego w React

Załóżmy, że mamy stronę internetową. Na tej stronie możemy wyróżnić pewne bloki: nagłówek, treść, panel boczny, stopkę i tak dalej. Każdy blok można podzielić na mniejsze podbloki. Na przykład w nagłówku zazwyczaj można wyróżnić logo, menu, blok kontaktów i tak dalej.

W React każdy taki blok nazywa się komponentem. Każdy komponent może zawierać w sobie bardziej drobne komponenty, one z kolei jeszcze bardziej drobne i tak dalej.

Każdemu komponentowi w React odpowiada moduł ES6, znajdujący się w folderze src. Nazwa pliku z modułem jest pisana z wielkiej litery i powinna odpowiadać funkcji, która znajduje się w kodzie tego modułu.

Na przykład, plik o nazwie App.js powinien zawierać w sobie funkcję App:

App.jsimport React from 'react';

function App() {
  // kod komponentu
}

export default App;

Jeden z komponentów powinien być głównym - tym, do którego dodawane są pozostałe komponenty. W React domyślnie takim komponentem będzie komponent App. Do tego komponentu będą podłączane inne komponenty. Jak to się robi - rozbierzemy dalej w podręczniku.