Introduzione ai componenti React

Diamo un'occhiata a qualsiasi sito web. È composto da una serie di blocchi indipendenti: header, sidebar, footer, contenuto. Si può dire che questi blocchi sono i componenti nel senso inteso in React.

Se osserviamo lo stesso header, cosa possiamo distinguere al suo interno? Un blocco con il logo, un blocco contatti, un blocco con il menu e così via. Cioè i componenti possono essere composti da altri sottocomponenti.

Allo stesso modo funziona in React - il sito è costruito da un insieme di componenti, che a loro volta possono contenere altri componenti.

In React, ogni componente rappresenta un modulo separato. Di solito lo sviluppo inizia dal componente principale App, che contiene tutti gli altri.

Esercitiamoci a creare nuovi componenti.

Supponiamo per esempio che abbiamo bisogno di un componente che visualizzi i dati di un prodotto. Per fare ciò, dobbiamo creare nella cartella di lavoro il file Product.js e aggiungere il seguente codice:

import React from 'react';

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

export default Product;

Come puoi vedere, al momento il nostro componente restituisce un paragrafo con del testo. Nelle prossime lezioni perfezioneremo questo codice in modo che restituisca i dati del prodotto. Ma per ora lasciamo semplicemente un paragrafo con del testo iniziale.

Ora visualizziamo il componente che abbiamo creato nel componente App. Supponiamo che al momento il nostro App abbia il seguente codice:

import React from 'react';

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

export default App;

Per iniziare, dobbiamo importare il componente prodotto che abbiamo creato:

import React from 'react';
import Product from './Product'; // importiamo il prodotto

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

export default App;

Dopo un tale import, all'interno del componente App è possibile utilizzare il componente Product.