Componente fragment en React

React es una librería de JavaScript que ha desarrollado muchos pequeños detalles para facilitar la ejecución de código JavaScript y HTML a la vez. En este post, te enseñaremos qué es y cómo funciona el componente fragment en React, ideal para reemplazar al elemento div.

Antes de empezar con el componente fragment en React

Para enseñarte qué es el componente fragment en React y cómo funciona, usaremos un ejemplo. Supongamos que tenemos el siguiente componente que hemos denominado Page. Este componente recibe las props title y children y devuelve dos elementos HTML con sus correspondientes clases y llamadas a props.

function Page ({title, children}) {
return <h2 className = "layout-title bordered">{title}</h2>
<section className = "layout-content"> {children} </section>
}
export default Page

En estos casos, React nos dirá que solo podemos hacer un return de un elemento. ¿Por qué? Pues porque en React el retorno de un componente es un el resultado de un React.createElement, comando al que le pasamos un solo elemento.

Entonces, cuando queramos pasar más de un elemento por el return de un componente, necesitaremos usar un elemento mayor que encapsule los demás. Aunque podríamos encapsularlos en un elemento div, pasar un div por la mitad puede llegar a romper la semántica HTML de una página o incluso romper los estilos. Esto sucede porque estamos agregando un elemento extra al DOM que no teníamos previsto.

Por todo lo anterior, te recomendamos usar el componente fragment en React. A continuación, te enseñamos qué es y cómo funciona.

¿Qué es el componente fragment en React?

El componente fragment en React es un componente desarrollado por esta librería JavaScript para agrupar elementos sin introducir elementos extra a nivel de DOM. En este sentido, es un componente hueco que no te romperá estilos ni semántica.

Ya que fragment es un componente especial de React, deberemos importarlo en nuestros archivos usando la siguiente linea de código:

import {Fragment} from 'react';

A continuación, te mostramos cómo utilizar el componente fragment en React con las líneas de código del ejemplo anterior:

function Page ({title, children}) {
return(
<Fragment>
<h2 className = "layout-title bordered">{title}</h2>
<section className = "layout-content"> {children} </section>
</Fragment>
);
}
export default Page;

El elemento fragment es tan común que hay quienes instalan plugins para utilizarlo sin la palabra Fragment. Es decir, cuando veas <> y </> en algún tutorial de React, estos símbolos son realmente este componente.

Tras leer este post, sabes cómo usar el componente fragment en React para agrupar tus elementos sin afectar al DOM. Sin embargo, ¡todavía queda mucho que aprender sobre esta librería! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás a dominar herramientas y lenguajes fundamentales como React, JavaScript, HTML, CSS y JSX. ¡No te lo pierdas y solicita más informción!