Los componentes son la piedra angular de React. En este capítulo, exploraremos a fondo cómo crear y usar componentes funcionales, que son la base para construir interfaces de usuario en React. Desde la versión 16.8 de React, los componentes funcionales son la forma preferida de crear componentes, gracias a la introducción de los hooks.

¿Qué es un Componente Funcional?

Un componente funcional es simplemente una función de JavaScript que devuelve JSX, lo que significa que define una parte de la interfaz de usuario. A diferencia de los componentes de clase, los componentes funcionales no tienen estado interno o métodos del ciclo de vida de React de forma explícita, pero con hooks, pueden manejar estas funcionalidades de manera declarativa.

Ejemplo Básico de un Componente Funcional

Veamos un ejemplo simple de un componente funcional en React:

jsx

En este ejemplo, Welcome es un componente que recibe un objeto props y devuelve un elemento JSX que muestra un mensaje de bienvenida personalizado. El uso de props permite que los componentes funcionales sean reutilizables, ya que pueden recibir diferentes datos de entrada.

JSX en Componentes Funcionales

Como vimos en el capítulo anterior, JSX es la sintaxis que nos permite escribir código similar a HTML en React. Dentro de los componentes funcionales, el uso de JSX es esencial para definir lo que se mostrará en la interfaz de usuario.

Por ejemplo, podemos extender el componente Welcome para que sea más dinámico:

jsx

Este componente ahora devuelve múltiples elementos JSX envueltos en un div. Es una buena práctica envolver múltiples elementos en un contenedor como un div o usar React.Fragment cuando sea necesario.

Props en Componentes Funcionales

Las props (propiedades) son argumentos que se pasan a los componentes, permitiendo que sean dinámicos. Por ejemplo, podríamos reutilizar el componente Welcome para mostrar diferentes nombres:

jsx

Aquí, el componente App utiliza el componente Welcome tres veces, pasando diferentes valores para la propiedad name. De esta manera, los componentes funcionales pueden reutilizarse con diferentes entradas, lo que hace que el desarrollo sea más eficiente y modular.

Default Props

En ocasiones, es útil establecer valores predeterminados para las props si no se proporciona uno explícitamente. Esto se puede hacer utilizando defaultProps:

jsx

Aquí, si name no es proporcionado, el componente mostrará por defecto "Hello, Stranger". Esto asegura que siempre haya un valor presente, lo que evita errores en tiempo de ejecución.

Fragmentos en React

React permite devolver múltiples elementos en un solo componente sin necesidad de un contenedor adicional como div. Esto se logra utilizando React.Fragment o su versión corta <>:

jsx

Esto es útil cuando no queremos agregar nodos adicionales al DOM, manteniendo la estructura limpia y semántica.

Componentes Anidados

En React, puedes anidar componentes funcionales dentro de otros, lo que permite dividir la interfaz en piezas pequeñas y manejables. Veamos un ejemplo de componentes anidados:

jsx

Aquí, el componente App incluye tres componentes: Header, Welcome, y Footer. Este enfoque de dividir la interfaz en componentes pequeños y reutilizables es una de las mejores prácticas de React.

Conclusión

Los componentes funcionales son el núcleo de cualquier aplicación React. Son ligeros, fáciles de leer, y al combinarse con hooks, permiten manejar el estado y el ciclo de vida de la aplicación de manera declarativa.