El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Els components són la pedra angular de React. Són les unitats bàsiques de construcció d'una aplicació React i permeten dividir la interfície d'usuari en peces independents, reutilitzables i manejables. En aquesta secció, explorarem què són els components, com es creen i com es poden utilitzar per construir aplicacions React.

Què és un component?

Un component en React és una peça de codi que representa una part de la interfície d'usuari. Cada component pot tenir el seu propi estat i comportament, i es pot combinar amb altres components per crear una aplicació completa.

Tipus de components

Hi ha dos tipus principals de components en React:

Components funcionals: Són funcions de JavaScript que accepten un objecte de propietats (props) com a argument i retornen elements de React.
Components de classe: Són classes de JavaScript que estenen React.Component i tenen un mètode render que retorna elements de React.

Components funcionals

Els components funcionals són la manera més senzilla de crear components en React. Aquí teniu un exemple bàsic:

import React from 'react';

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

export default Greeting;

Explicació del codi

Importació de React: Importem React per poder utilitzar JSX.
Definició del component: Definim una funció Greeting que accepta props com a argument.
Retorn de JSX: La funció retorna un element JSX (<h1>Hola, {props.name}!</h1>), que és la representació de la interfície d'usuari.
Exportació del component: Exportem el component perquè pugui ser utilitzat en altres parts de l'aplicació.

Components de classe

Els components de classe són una manera més antiga de crear components en React, però encara són àmpliament utilitzats. Aquí teniu un exemple bàsic:

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hola, {this.props.name}!</h1>;
  }
}

export default Greeting;

Explicació del codi

Importació de React i Component: Importem React i la classe Component de React.
Definició del component: Definim una classe Greeting que estèn Component.
Mètode render: La classe té un mètode render que retorna un element JSX (<h1>Hola, {this.props.name}!</h1>).
Exportació del component: Exportem el component perquè pugui ser utilitzat en altres parts de l'aplicació.

Comparació entre components funcionals i de classe

Característica	Components funcionals	Components de classe
Definició	Funció de JavaScript	Classe que estèn `React.Component`
Estat	Utilitzen hooks (com `useState`)	Utilitzen `this.state`
Cicle de vida	Utilitzen hooks (com `useEffect`)	Utilitzen mètodes del cicle de vida
Senzillesa	Més senzills i concisos	Més complexos
Rendiment	Lleugerament millor	Lleugerament pitjor

Exercici pràctic

Exercici 1: Crear un component funcional

Crea un nou fitxer anomenat Welcome.js.
Defineix un component funcional anomenat Welcome que accepti una propietat name i mostri un missatge de benvinguda.
Exporta el component.

// Welcome.js
import React from 'react';

function Welcome(props) {
  return <h1>Benvingut, {props.name}!</h1>;
}

export default Welcome;

Exercici 2: Crear un component de classe

Crea un nou fitxer anomenat Farewell.js.
Defineix un component de classe anomenat Farewell que accepti una propietat name i mostri un missatge de comiat.
Exporta el component.

// Farewell.js
import React, { Component } from 'react';

class Farewell extends Component {
  render() {
    return <h1>Adéu, {this.props.name}!</h1>;
  }
}

export default Farewell;

Resum

En aquesta secció, hem après què són els components en React i com es poden crear utilitzant components funcionals i de classe. Hem vist exemples pràctics de cada tipus de component i hem comparat les seves característiques. Els components són fonamentals per construir aplicacions React, i comprendre com funcionen és essencial per avançar en el desenvolupament amb React.

En la següent secció, explorarem les diferències entre components funcionals i de classe amb més detall.

Comprendre els components

Què és un component?

Tipus de components

Components funcionals

Explicació del codi

Components de classe

Explicació del codi

Comparació entre components funcionals i de classe

Exercici pràctic

Exercici 1: Crear un component funcional

Exercici 2: Crear un component de classe

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