Componente fragment en React

Autor: | Última modificación: 27 de septiembre de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

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

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

Nota que queremos hacer un return de dos elementos, un h2 y un section, en el componente que hemos creado con las líneas de código anteriores. 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.

¿Qué sigue?

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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!