Уводзіны ў кампанентны падыход у React

Няхай у нас ёсць сайт. На гэтым сайце мы можам вылучыць некаторыя блокі: хедэр, кантэнт, сайдбар, футар і гэтак далей. Кожны блок можна падзяліць на больш дробныя падблокі. Напрыклад у хедары звычайна можна вылучыць лагатып, менюшку, блок кантактаў і гэтак далей.

У React кожны такі блок называецца кампанентам. Кожны кампанент можа ўтрымліваць у сабе больш дробныя кампаненты, тыя ў сваю чаргу яшчэ больш дробныя і гэтак далей.

Кожнаму кампаненту ў React адпавядае ES6 модуль, размешчаны ў папцы src. Імя файла з модулем пішацца з вялікай літары і павінна адпавядаць функцыі, якая размешчана ў кодзе гэтага модуля.

Напрыклад, файл з назвай App.js павінен утрымліваць у сабе функцыю App:

App.jsimport React from 'react';

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

export default App;

Адзін з кампанентаў павінен быць асноўным - тым, да якога дадаюцца астатнія кампаненты. У React па змаўчанні такім кампанентам будзе кампанент App. Да гэтага кампанента будуць падлучацца іншыя кампаненты. Як гэта робіцца - мы разбяром далей у дапаможніку.