Tipi di component
Come abbiamo visto, ogni pagina è un file tsx, cioè un component. In questo articolo, come da titolo, faremo una panoramica sui component di React.
I component possono essere di tipo “function” o di tipo “class”.
Tra i due tipi di component non esiste alcuna differenza reale. Le differenze sono solo sintattiche. Con entrambi i tipi di component, infatti, è possibile fare praticamente le stesse cose. Alcuni sviluppatori preferiscono le function component perché sostengono che permettano maggiori performance e consentono di sviluppare le stesse funzionalità con meno codice. Altri sviluppatori preferiscono usare i class component per motivi di ordine e pulizia del codice. E altri ancora, preferiscono usare entrambe le tipologie nello stesso progetto. In questo tutorial affronteremo entrambe le tipologie che è bene conoscere entrambe. Le differenze di struttura e di sintassi tra i due tipi di component sono diverse.
Function component
Il function component sono chiamati anche functional component e sono funzioni javascript, che hanno un return che restituisce un HTML. Visto che tale function ha, come vedremo, un “export default”, tale function è esportabile e utilizzabile in altre function. Se notate, tutte le function, andando a ritroso, si trovano dentro il metodo “render” del file index.tsx, che, per l’appunto, renderizza a schermo quegli HTML.
Esempio di function component:
import React from 'react';
function Dipendente() {
return <h3>Mario Rossi<h3>;
}
export default Dipendente;
Come potete vedere non è altro che una function javascript che restituisce un HTML. Come anticipato, la function va resa export, se la si vuole utilizzare come component all’interno di un altro component.
Class component
I class component sono classi che estendono i component React. In questo caso, visto che le classi non hanno un return di per sé, si utilizza il metodo built-in render(), il quale ha un return che restituisce un codice HTML.
import React from 'react';
class Dipendente extends React.Component {
render() {
return <h3>Marco Verdi</h3>;
}
}
export default Dipendente;
Anche in questo caso è necessario l’uso di export default, per riutilizzare tale component in altri component.
Conclusioni
Dopo aver questa panoramica sui tipi di component di React, torneremo sull’argomento e vedremo nel dettaglio il loro funzionamento.
Repository del progetto in progress su GitHub: https://github.com/DoAgency/ReactJs