Categories
classi component funzioni JSX linguaggio javascript Node.js React Native

React Native components

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
  }
}

  1. https://www.cancellino.org/2023/01/react-native-template-1/ [] []

Leave a Reply