React-ում կոմպոնենտային մոտեցման ներածություն

Ենթադրենք ունենք կայք։ Այս կայքում մենք կարող ենք տարբերակել որոշ բլոկներ՝ գլխագիր, բովանդակություն, կողային վահանակ, ներքևի բլոկ և այլն։ Յուրաքանչյուր բլոկ կարելի է բաժանել ավելի փոքր ենթաբլոկների։ Օրինակ՝ գլխագրում սովորաբար կարելի է տարբերակել լոգոտիպը, ընտրացանկը, կոնտակտների բլոկը և այլն։

React-ում յուրաքանչյուր այդպիսի բլոկ կոչվում է կոմպոնենտ։ Յուրաքանչյուր կոմպոնենտ կարող է պարունակել իր մեջ ավելի փոքր կոմպոնենտներ, որոնք իրենց հերթին՝ ևս ավելի փոքրեր և այդպես շարունակ։

React-ում յուրաքանչյուր կոմպոնենտին համապատասխանում է ES6 մոդուլ, որը գտնվում է src պանակում։ Մոդուլի ֆայլի անունը գրվում է մեծատառով և պետք է համապատասխանի այն ֆունկցիային, որը գտնվում է այդ մոդուլի կոդում։

Օրինակ, App.js անունով ֆայլը պետք է պարունակի իր մեջ App ֆունկցիան.

App.jsimport React from 'react';

function App() {
  // կոմպոնենտի կոդը
}

export default App;

Կոմպոնենտներից մեկը պետք է լինի հիմնականը - այն, որին ավելացվում են մնացած կոմպոնենտները։ React-ում լռելյայն այդպիսի կոմպոնենտը կլինի App կոմպոնենտը։ Այս կոմպոնենտին կմիացվեն այլ կոմպոնենտներ։ Ինչպես է դա արվում՝ մենք կքննարկենք հետագայում ձեռնարկում։