Come si è visto in questo codice sorgente1, gli elementi da rappresentare nell’applicazione React Native, come il testo e le immagini, sono contenuti nei component.
Questo è un esempio dove viene creato un component Section, già visto nel progetto31
const Section = ({children, title}) => {
return (
<View>
<Text> {title} </Text>
<Text> {children} </Text>
</View>
);
};
I component sono rappresentati nel codice come dei tag con la lettera iniziale maiuscola.
Lo sviluppatore può usare i componenti predefiniti in React Native, detti built-in component, oppure può creare componenti personalizzati.
Esistono due tipi di component
- component basati sulle funzioni (in passato erano chiamati stateless)
- component basati sulle classi (in passato erano chiamati stateful)
Oggi la distinzione è quasi puramente sintattica (in JavaScript i component si possono creare come funzioni oppure come classi), ma in passato era anche una distinzione di sostanza, nel senso che in passato solo i componenti basati su classi potevano contenere delle variabili di stato2 per memorizzare dei valori “statici”.
Articolo:
Oggi anche i componenti basati su funzioni possono avere uno stato, memorizzabile su proprietà (dette props) e gestito tramite funzioni (dette hook).
Questo è il codice sorgente (messo a confronto) dei component del primo e del secondo tipo
Esempio di component basato su funzione
function Prova(props) {
return <h1>Ciao, {props.nome}</h1>;
}
Esempio di component basato su classe
class Prova extends React.component {
// costruttore omesso
render() {
<h1>Ciao, {this.props.nome}</h1>;
}
}
In JSX non è semplice inserire commenti multiriga del tipo JavaScript come questo:
/* commento multiriga */
Per questo motivo si suggerisce di usare questo stile
// commento di una riga
class Prova extends React.component {
render() {
<h1>Ciao, {this.props.nome}</h1>;
// commento in JSX
}
}