React: Componentes

¿Qué es un componente en React 19?

Un componente en React 19 es una unidad reutilizable de código que define cómo debe aparecer una parte de la interfaz y cómo debe comportarse. Existen dos tipos principales de componentes en React 19: componentes de clase y componentes funcionales.

Componentes funcionales

Los componentes funcionales son funciones de JavaScript que aceptan props como argumento y devuelven elementos de React. A partir de React 16.8, con la introducción de los Hooks, los componentes funcionales han ganado popularidad y funcionalidad.

import React from 'react';

function Saludo({ nombre }) {
  return <h1>Hola, {nombre}</h1>;
}

export default Saludo;

En este ejemplo, Saludo es un componente funcional que acepta una prop nombre y devuelve un elemento h1 con un saludo.

Hooks en componentes funcionales

Los Hooks permiten usar el estado y otras características de React sin necesidad de escribir una clase. El Hook useState es uno de los más utilizados.

import React, { useState } from 'react';

function Contador() {
  const [cuenta, setCuenta] = useState(0);

  return (
    <div>
      <p>Has hecho clic {cuenta} veces</p>
      <button onClick={() => setCuenta(cuenta + 1)}>Haz clic</button>
    </div>
  );
}

export default Contador;

En este ejemplo, Contador es un componente funcional que utiliza el Hook useState para gestionar el estado cuenta.

Componentes de clase

Aunque los componentes funcionales son más comunes hoy en día, los componentes de clase siguen siendo útiles para comprender el legado de React.

import React, { Component } from 'react';

class Saludo extends Component {
  render() {
    return <h1>Hola, {this.props.nombre}</h1>;
  }
}

export default Saludo;

En este ejemplo, Saludo es un componente de clase que accede a las props a través de this.props.

Ciclo de vida de los componentes

Los componentes de clase tienen métodos específicos que se ejecutan en diferentes etapas de su ciclo de vida. Algunos de los métodos más importantes son:

• componentDidMount(): Se ejecuta después de que el componente se ha montado.
• componentDidUpdate(): Se ejecuta después de que el componente se ha actualizado.
• componentWillUnmount(): Se ejecuta justo antes de que el componente se desmonte.

Comunicación entre componentes

La comunicación entre componentes en React 19 se realiza principalmente a través de las props. Sin embargo, para la gestión de estado global, se recomienda utilizar Context o bibliotecas externas como Redux.

Ejemplo de uso de Context

import React, { createContext, useContext, useState } from 'react';

const TemaContext = createContext();

function ProveedorTema({ children }) {
  const [tema, setTema] = useState('claro');

  return (
    <TemaContext.Provider value={{ tema, setTema }}>
      {children}
    </TemaContext.Provider>
  );
}

function BotonTema() {
  const { tema, setTema } = useContext(TemaContext);

  return (
    <button onClick={() => setTema(tema === 'claro' ? 'oscuro' : 'claro')}>
      Cambiar a tema {tema === 'claro' ? 'oscuro' : 'claro'}
    </button>
  );
}

export { ProveedorTema, BotonTema };

En este ejemplo, TemaContext permite compartir el estado del tema entre componentes sin necesidad de pasar props manualmente en cada nivel.