Introducere în componentele React

Privește orice site. Este compus dintr-un set de blocuri independente: antet, bare laterale, subsol, conținut. Am putea spune că aceste blocuri sunt componente în sensul în care este înțeles în React.

Dacă ne uităm la același antet, ce putem să evidențiem în el: un bloc cu sigla, un bloc de contacte, un bloc cu meniul și așa mai departe. Adică componentele pot fi formate din alte subcomponente.

În mod analog stau lucrurile și în React - site-ul este construit dintr-un set de componente, care la rândul lor pot conține alte componente.

În React fiecare componentă reprezintă un modul separat. De obicei, dezvoltarea începe cu componenta principală App, care le conține pe celelalte.

Să exersăm crearea de componente noi.

Să presupunem că, de exemplu, avem nevoie de o componentă care să afișeze datele despre un produs. Pentru aceasta trebuie în folderul de lucru să creăm fișierul Product.js și să adăugăm în el următorul cod:

import React from 'react';

function Product() {
	return <p>
		produs
	</p>;
}

export default Product;

După cum vedeți, acum componenta noastră returnează un paragraf cu text. În lecțiile următoare vom îmbunătăți acest cod astfel încât să fie returnate datele despre produs. Dar pentru început vom lăsa paragraful cu un text inițial.

Acum să afișăm componenta noastră creată în componenta App. Să presupunem că acum App are următorul cod:

import React from 'react';

function App() {
	return <div>
		text
	</div>;
}

export default App;

Pentru început, trebuie să importăm componenta creată de noi cu produsul:

import React from 'react';
import Product from './Product'; // importăm produsul

function App() {
	return <div>
		text
	</div>;
}

export default App;

După un astfel de import, în interiorul componentei App se poate utiliza componenta Product.