Introducere în abordarea componentelor în React

Să presupunem că avem un site. Pe acest site putem identifica anumite blocuri: antet, conținut, bara laterală, subsol și așa mai departe. Fiecare bloc poate fi împărțit în sub-blocuri mai mici. De exemplu, în antet se pot identifica de obicei sigla, meniul, blocul de contacte și așa mai departe.

În React, fiecare astfel de bloc se numește componentă. Fiecare componentă poate conține în interiorul ei componente mai mici, iar acestea la rândul lor pot conține alte componente și mai mici și așa mai departe.

Fiecărei componente în React îi corespunde un modul ES6, situat în folderul src. Numele fișierului cu modul se scrie cu literă mare și trebuie să corespundă funcției care este definită în codul acestui modul.

De exemplu, fișierul cu numele App.js trebuie să conțină în interior funcția App:

import React from 'react';

function App() {
	// codul componentei
}

export default App;

Una dintre componente trebuie să fie cea principală - cea căreia i se adaugă celelalte componente. În React, implicit, această componentă va fi componenta App. La această componentă vor fi conectate alte componente. Cum se face acest lucru - vom analiza mai departe în tutorial.