React es una biblioteca de JavaScript ampliamente utilizada para construir interfaces de usuario (UI) interactivas y dinámicas. Su enfoque principal es la creación de componentes reutilizables, que son bloques de construcción independientes y modulares para la UI. Estos componentes permiten dividir la interfaz en piezas más pequeñas y manejables, lo que facilita el desarrollo, la depuración y el mantenimiento de aplicaciones complejas. En este artículo, exploraremos qué son los componentes en React y cómo funcionan los estados.

¿Qué es un componente en React?

Un componente en React es una pieza de código independiente que encapsula una parte de la interfaz de usuario. Puede ser tan pequeño como un botón o tan grande como una página completa. Los componentes aceptan entradas (llamadas props) y devuelven elementos de React que describen lo que debe aparecer en la pantalla.

Tipos de componentes

En React, existen dos tipos principales de componentes:

1. Componentes funcionales:
   Son funciones de JavaScript que reciben props como argumento y devuelven elementos de React. Son simples y fáciles de escribir.

    

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

   Con la introducción de los hooks en React 16.8, los componentes funcionales ganaron la capacidad de manejar estados y efectos secundarios, lo que los convirtió en la opción preferida sobre los componentes de clase.

2. Componentes de clase:
   Son clases de ES6 que extienden React.Component y deben implementar un método render que devuelve elementos de React.

    

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

   Aunque los componentes de clase siguen siendo válidos, su uso ha disminuido debido a la simplicidad y flexibilidad de los componentes funcionales con hooks.

Composición de componentes

Una de las características más poderosas de React es la composición. Esto significa que puedes construir componentes complejos combinando componentes más pequeños. Por ejemplo:

function App() {
  return (
    <div>
      <Saludo nombre="Ana" />
      <Saludo nombre="Luis" />
      <Saludo nombre="María" />
    </div>
  );
}

En este ejemplo, el componente App utiliza el componente Saludo tres veces, pasando diferentes valores para la prop nombre. Esto demuestra cómo los componentes pueden reutilizarse y combinarse para crear interfaces más complejas.

Props y Estados

Props (Propiedades)

Las props son datos que se pasan de un componente padre a un componente hijo. Son inmutables, lo que significa que el componente hijo no puede modificarlas. Las props se utilizan para personalizar el comportamiento o la apariencia de un componente.

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

En este caso, nombre es una prop que se pasa al componente Saludo.

Estado

El estado es una estructura de datos que permite a un componente gestionar y reaccionar a cambios en los datos a lo largo del tiempo. A diferencia de las props, el estado es mutable y es gestionado internamente por el componente.

En los componentes funcionales, el estado se maneja utilizando el hook useState. Por ejemplo:

import React, { useState } from 'react';

function Contador() {
  const [contador, setContador] = useState(0);

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

En este ejemplo:

• useState(0) inicializa el estado contador con un valor de 0.

• setContador es una función que permite actualizar el valor de contador.

• Cada vez que se hace clic en el botón, el estado contador se incrementa en 1, y el componente se vuelve a renderizar para reflejar el nuevo valor.

Ciclo de vida de los componentes

Los componentes en React pasan por un ciclo de vida que incluye tres fases principales:

1. Montaje: Cuando el componente se crea y se inserta en el DOM.

2. Actualización: Cuando el componente se vuelve a renderizar debido a cambios en las props o el estado.

3. Desmontaje: Cuando el componente se elimina del DOM.

En los componentes funcionales, el hook useEffect permite manejar efectos secundarios en estas fases. Por ejemplo:

import React, { useState, useEffect } from 'react';

function Reloj() {
  const [hora, setHora] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    const intervalo = setInterval(() => {
      setHora(new Date().toLocaleTimeString());
    }, 1000);

    return () => clearInterval(intervalo); // Limpieza al desmontar
  }, []);

  return <p>La hora actual es: {hora}</p>;
}

En este ejemplo:

• useEffect se utiliza para actualizar la hora cada segundo.

• El intervalo se limpia cuando el componente se desmonta, evitando fugas de memoria.

Composición vs. Herencia

React favorece la composición sobre la herencia para la reutilización de código. En lugar de crear una jerarquía de clases, React fomenta la construcción de componentes complejos combinando componentes más simples. Esto resulta en una estructura más flexible y fácil de mantener.

Por ejemplo, en lugar de heredar comportamientos, puedes pasar componentes como props:

function Panel(props) {
  return (
    <div className="panel">
      {props.children}
    </div>
  );
}

function App() {
  return (
    <Panel>
      <Saludo nombre="Ana" />
      <Saludo nombre="Luis" />
    </Panel>
  );
}

Aquí, Panel actúa como un contenedor genérico que puede envolver cualquier contenido.

Por ende, React es una herramienta interesante para construir interfaces de usuario modernas y dinámicas. Los componentes son la piedra angular de React, permitiendo dividir la UI en piezas reutilizables y mantenibles. Los estados y las props son fundamentales para gestionar datos y hacer que los componentes sean interactivos.