React: componentes, props y state explicados con ejemplos

React es una biblioteca de JavaScript que permite construir interfaces de usuario de manera eficiente y flexible. Uno de los conceptos fundamentales de React son los componentes, que son bloques de construcción reutilizables que controlan su propio estado y se pueden combinar para crear interfaces más complejas. A través de los componentes, React permite una forma declarativa de construir aplicaciones, lo que facilita su mantenimiento y escalabilidad.

En este artículo, exploraremos cómo funcionan los props y el state en React, dos conceptos clave que permiten a los componentes comunicarse entre sí y gestionar datos internos. A medida que avancemos, proporcionaremos ejemplos prácticos que te permitirán entender mejor estos conceptos y cómo aplicarlos en tus proyectos.

Explicación

En React, un componente es una función o clase que devuelve un fragmento de código que representa una parte de la interfaz de usuario. Los componentes pueden ser funcionales o clase, y cada uno tiene su propio ciclo de vida y características. Los componentes pueden recibir datos a través de props, que son propiedades que se pasan desde un componente padre a un componente hijo. Esto permite que los componentes sean dinámicos y reutilizables.

Por otro lado, el state es un objeto que representa los datos internos de un componente y puede cambiar a lo largo del tiempo. A diferencia de las props, que son pasadas a los componentes, el estado es gestionado internamente. Cuando el estado de un componente cambia, React actualiza automáticamente la interfaz de usuario para reflejar esos cambios, lo que hace que la experiencia del usuario sea más fluida y responsiva.

Ejemplos paso a paso

1. Crear un componente funcional: Define un componente simple que muestre un saludo.

   function Saludo() {
       return <h1>¡Hola, mundo!</h1>;
   }

2. Uso de props: Crea un componente que reciba un nombre como prop.

   function Saludo(props) {
       return <h1>¡Hola, {props.nombre}!</h1>;
   }
       
   // Uso
   <Saludo nombre="Juan" />

3. Implementar state: Crea un componente que cambie su estado al hacer clic en un botón.

   import React, { useState } from 'react';
   
   function Contador() {
       const [contador, setContador] = useState(0);
       
       return (
           <div>
               <p>Contador: {contador}</p>
               <button onClick={() => setContador(contador + 1)}>Incrementar</button>
           </div>
       );
   }

Ejercicios básicos para practicar

1. Crea un componente que muestre tu nombre y lo reciba como prop.
2. Desarrolla un contador que se pueda incrementar y decrementar.
3. Haz un componente que muestre una lista de elementos pasados como props.

function Nombre(props) {
    return <h1>{props.nombre}</h1>;
}

function Contador() {
    const [contador, setContador] = useState(0);
    
    return (
        <div>
            <p>Contador: {contador}</p>
            <button onClick={() => setContador(contador + 1)}>Incrementar</button>
            <button onClick={() => setContador(contador - 1)}>Decrementar</button>
        </div>
    );
}

Errores frecuentes

• No actualizar el estado correctamente: Asegúrate de usar la función de actualización de estado para evitar errores.
• Intentar modificar props: Recuerda que las props son de solo lectura y no deben ser modificadas directamente.
• Olvidar importar React: Si usas JSX, siempre asegúrate de importar React al inicio de tu archivo.

Preguntas frecuentes

¿Qué son los componentes en React?

Son bloques de construcción reutilizables que representan partes de la interfaz de usuario.

¿Qué diferencia hay entre props y state?

Las props son datos que se pasan a los componentes, mientras que el state es manejado internamente y puede cambiar con el tiempo.

¿Cómo se actualiza el estado en un componente?

Se utiliza la función de actualización provista por el hook useState o el método setState en componentes de clase.