Come si è visto in questo codice sorgente1, gli elementi da rappresentare nell’applicazione, come il testo e le immagini, sono contenuti nei component.
Questo è il component Section, che avevamo visto nel progetto31
const Section = ({children, title}) => {
return (
<View>
<Text> {title} </Text>
<Text> {children} </Text>
</View>
);
};
I component sono tag con la lettera iniziale maiuscola.
Possono essere predefiniti in React Native, oppure possono essere creati dal programmatore.
Esistono due tipi di component
- component basati sulle funzioni (in passato erano chiamati stateless)
- component basati sulle classi (in passato erano chiamati stateful)
La distinzione era sintattica (in javascript si possono creare come funzioni oppure come classi, ed era anche di sostanza, nel senso che in passato solo i componenti basati su classi potevano contenere delle variabili di stato per memorizzare dei valori “statici”.
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
basato su funzione
function Prova(props) {
return <h1>Ciao, {props.nome}</h1>;
}
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 /* */
Si suggerisce questo stile
class Prova extends React.component {
render() {
<h1>Ciao, {this.props.nome}</h1>;
// commento in JSX
}
}