Introducción rápida a los componentes

Los componentes son la base de cualquier aplicación en React. Un componente representa una parte de la interfaz de usuario y puede ser tan simple como un botón o tan complejo como toda una página.

1. Componentes de función y de clase #

React nos permite crear dos tipos principales de componentes: de función y de clase.

• Componentes de función: Son más simples y recomendados para la mayoría de los casos. Se escriben como funciones de JavaScript y pueden usar Hooks para manejar el estado y efectos.

Ejemplo de componente de función:

• Componentes de clase: Eran la forma principal de crear componentes en React antes de que existieran los Hooks. Utilizan la palabra clave class y un método render() para devolver el contenido.

Ejemplo de componente de clase:

Importante: Los componentes de clase están en desuso y se recomienda usar componentes de función con Hooks.

2. Props y Children #

Las props (propiedades) son la manera de pasar datos de un componente a otro. Las props son inmutables, lo que significa que el componente que las recibe no puede cambiarlas.

Ejemplo de props:

Children es una prop especial que permite pasar contenido entre etiquetas de un componente. Esto es útil cuando queremos que un componente envuelva a otros.

Ejemplo de uso de children:

3. Ciclo de vida de los componentes #

El ciclo de vida de un componente es el conjunto de fases por las que pasa desde su creación hasta su destrucción. Solo los componentes de clase tienen métodos de ciclo de vida, aunque los Hooks en componentes de función permiten manejar estas etapas de manera similar.

Algunos métodos de ciclo de vida más comunes son:

• componentDidMount(): Se ejecuta una vez cuando el componente se monta (ideal para hacer peticiones de datos).
• componentDidUpdate(): Se ejecuta cuando el componente se actualiza.
• componentWillUnmount(): Se ejecuta cuando el componente se va a desmontar.

Con Hooks (en componentes de función), podemos manejar el ciclo de vida con useEffect:

4. Comunicación entre componentes (padre-hijo) #

La comunicación entre componentes en React suele ser unidireccional, lo que significa que los datos fluyen de padres a hijos a través de las props. Si un hijo necesita enviar datos al padre, se puede pasar una función del padre como prop.

Ejemplo de comunicación padre-hijo:

En este caso, el Padre pasa la función recibirMensaje como prop al Hijo, y el hijo la llama para enviar un mensaje al padre.

5. Manejo del estado #

El estado es un objeto que contiene datos que pueden cambiar a lo largo del tiempo. En React, el estado se maneja con el método setState.

6. Ejercicio práctico: Creación de una lista de tareas #

Ahora vamos a crear una lista de tareas donde podamos agregar y eliminar elementos. Usaremos un componente de función con useState para manejar el estado.

En este código:

• nuevaTarea guarda el texto que se escribe en el input.
• tareas es un arreglo que guarda todas las tareas.
• agregarTarea añade una tarea al arreglo tareas.
• eliminarTarea elimina la tarea seleccionada.