Introduzione all'approccio a componenti in React

Supponiamo di avere un sito web. Su questo sito possiamo identificare alcuni blocchi: header, contenuto, sidebar, footer e così via. Ogni blocco può essere diviso in sotto-blocchi più piccoli. Ad esempio nell'header di solito si possono distinguere il logo, il menu, il blocco dei contatti e così via.

In React ogni tale blocco si chiama componente. Ogni componente può contenere al suo interno componenti più piccoli, che a loro volta possono contenere componenti ancora più piccoli e così via.

Ad ogni componente in React corrisponde un modulo ES6, situato nella cartella src. Il nome del file del modulo si scrive con la lettera maiuscola e deve corrispondere alla funzione che si trova nel codice di questo modulo.

Ad esempio, il file con il nome App.js deve contenere al suo interno la funzione App:

import React from 'react';

function App() {
	// codice del componente
}

export default App;

Uno dei componenti deve essere quello principale - quello a cui vengono aggiunti gli altri componenti. In React per impostazione predefinita questo componente sarà il componente App. A questo componente verranno collegati altri componenti. Come si fa - lo esamineremo più avanti nel tutorial.