En aquest tema, aprendrem sobre els components i les props en React Native. Els components són els blocs de construcció fonamentals d'una aplicació React Native, mentre que les props (abreviatura de "properties") permeten passar dades als components.

Hi ha dos tipus principals de components en React Native:

1. Components de Funció (Function Components):

   • Són funcions de JavaScript que accepten un objecte de props com a argument i retornen elements de React.
   • Són més senzills i fàcils de llegir.
   • Exemple:

   import React from 'react';
   import { Text, View } from 'react-native';
   
   const Greeting = (props) => {
     return (
       <View>
         <Text>Hello, {props.name}!</Text>
       </View>
     );
   };
   
   export default Greeting;
   

2. Components de Classe (Class Components):

   • Són classes de JavaScript que estenen React.Component i tenen un mètode render que retorna elements de React.
   • Són més potents i permeten utilitzar l'estat i els mètodes del cicle de vida.
   • Exemple:

   import React, { Component } from 'react';
   import { Text, View } from 'react-native';
   
   class Greeting extends Component {
     render() {
       return (
         <View>
           <Text>Hello, {this.props.name}!</Text>
         </View>
       );
     }
   }
   
   export default Greeting;
   

Per crear un component, simplement defineix una funció o una classe que retorni elements de React. Aquests elements poden ser altres components o components bàsics com Text, View, Image, etc.

Les props són un mecanisme per passar dades dels components pares als components fills. Són immutables, és a dir, no es poden modificar dins del component fill.

Per passar props a un component, simplement afegeix atributs al component quan el crides. Exemple:

En aquest exemple, estem passant la prop name als components Greeting.

Per accedir a les props dins d'un component de funció, utilitza l'argument props. En un component de classe, utilitza this.props.

És una bona pràctica definir els tipus de les props que un component espera rebre. Això es pot fer utilitzant la biblioteca prop-types.

Crea un component de funció anomenat Welcome que accepti una prop username i mostri un missatge de benvinguda.

Crea un component de classe anomenat UserProfile que accepti una prop user (un objecte amb name i age) i mostri la informació de l'usuari.

Solució Exercici 1

Solució Exercici 2

En aquest tema, hem après sobre els components i les props en React Native. Hem vist com crear components de funció i de classe, com passar i accedir a les props, i com utilitzar PropTypes per definir els tipus de les props. Aquests conceptes són fonamentals per construir aplicacions React Native eficients i ben estructurades. En el següent mòdul, explorarem els components bàsics i la seva estilització.