Introducció

En React, els props (abreviatura de "properties") són un mecanisme per passar dades dels components pares als components fills. Els props permeten que els components siguin més reutilitzables i flexibles, ja que poden rebre dades dinàmicament.

Conceptes clau

Props com a arguments: Els props es passen als components de la mateixa manera que els arguments es passen a les funcions.
Immutabilitat: Els props són immutables, és a dir, no es poden modificar dins del component que els rep.
Passar funcions com a props: A més de dades, també es poden passar funcions com a props per permetre la comunicació entre components.

Exemple pràctic

Component Pare

import React from 'react';
import Salutacio from './Salutacio';

function App() {
  return (
    <div>
      <Salutacio nom="Anna" />
      <Salutacio nom="Joan" />
    </div>
  );
}

export default App;

Component Fill

import React from 'react';

function Salutacio(props) {
  return <h1>Hola, {props.nom}!</h1>;
}

export default Salutacio;

Explicació del codi

Component Pare (App):
- Importa el component fill (Salutacio).
- Passa el prop nom amb els valors "Anna" i "Joan" respectivament.
Component Fill (Salutacio):
- Rep el prop nom com a argument (props).
- Utilitza {props.nom} per mostrar el valor del prop dins d'un element <h1>.

Exercici pràctic

Exercici

Crea un component Producte que rebi els props nom i preu i mostri aquesta informació en un element <div>.

Solució

Component Pare

import React from 'react';
import Producte from './Producte';

function App() {
  return (
    <div>
      <Producte nom="Ordinador" preu="1000€" />
      <Producte nom="Telèfon" preu="500€" />
    </div>
  );
}

export default App;

Component Fill

import React from 'react';

function Producte(props) {
  return (
    <div>
      <h2>{props.nom}</h2>
      <p>Preu: {props.preu}</p>
    </div>
  );
}

export default Producte;

Errors comuns i consells

Oblidar passar els props: Assegura't de passar els props necessaris des del component pare al component fill.
Modificar els props: Recorda que els props són immutables. Si necessites modificar dades, utilitza l'estat (state).
Noms de props: Utilitza noms de props descriptius i consistents per facilitar la comprensió del codi.

Resum

Els props són una manera de passar dades dels components pares als components fills.
Els props són immutables i es passen com a arguments.
Es poden passar tant dades com funcions com a props.

Amb aquests conceptes, ja pots començar a crear components més dinàmics i reutilitzables en les teves aplicacions React. En el següent tema, explorarem com gestionar l'estat dels components amb state.

Props: Passar dades als components

Introducció

Conceptes clau

Exemple pràctic

Component Pare

Component Fill

Explicació del codi

Exercici pràctic

Exercici

Solució

Component Pare

Component Fill

Errors comuns i consells

Resum

Curs de React

Mòdul 1: Introducció a React

Mòdul 2: Components de React

Mòdul 3: Treballar amb esdeveniments

Mòdul 4: Conceptes avançats de components

Mòdul 5: Hooks de React

Mòdul 6: Enrutament en React

Mòdul 7: Gestió de l'estat

Mòdul 8: Optimització del rendiment

Mòdul 9: Proves en React

Mòdul 10: Temes avançats

Mòdul 11: Projecte: Construir una aplicació completa