Aprendamos ahora qué es un fragmento de React
y cuándo exactamente podríamos necesitar uno.
Entonces, vayamos aquí a la versión final.
de la aplicación para que pueda mostrarte
que en realidad todavía nos falta algo
y esa es esta frase de aquí.
Entonces hay un párrafo de texto aquí
que solo voy a copiar ahora
y tal vez puedas pausar el video y escribirlo,
o simplemente puedes escribir algo más corto.
Así que por ahora coloquemos ese párrafo aquí,
Guárdalo y sí, entonces se verá exactamente igual.
Pero ¿y ahora qué pasa si no tenemos pizzas?
Entonces en este caso,
Bueno, entonces en realidad no queremos mostrar esto.
Entonces esta oración de aquí, solo queremos esta,
entonces el que viene aquí
de nuestra interpretación condicional.
Así que dejemos eso atrás.
Y ahora lo que eso significa es que sólo queremos
presentar este párrafo aquí en esta situación.
Así que tomemos ese párrafo y colóquelo aquí,
porque nuevamente queremos representar este párrafo
y este UL en este caso,
pero inmediatamente React comienza a gritarnos.
Entonces las expresiones JSX deben tener un elemento principal.
Y esto es exactamente lo que aprendimos.
en la conferencia Reglas de JSX.
Entonces, una parte de JSX, sin importar dónde esté definida.
De hecho, solo puede tener un elemento raíz.
Y esto nos ha pasado antes
y la forma en que siempre solucionamos esto
fue simplemente envolviendo todo
en un div o algún otro componente, así que intentémoslo.
No tienes que hacer esto.
Y esto es sólo para mostrarte
que esto en realidad arruinará nuestro formato aquí.
Así que esto no es realmente lo que queremos.
No queremos renderizar un elemento.
que contiene estos dos,
pero realmente queremos representar estos dos elementos aquí,
entonces estos dos elementos por separado
sin tener un elemento como padre de estos dos, cierto.
Y este es el caso en el que necesitamos un Fragmento de React.
Entonces, un Fragmento de React básicamente nos permite agrupar algunos elementos.
sin dejar ningún rastro en el árbol HTML, por lo tanto en el DOM.
Entonces parece que aquí necesitamos un fragmento de reacción.
y eso es muy fácil.
Todo lo que tenemos que hacer es básicamente borrar todo aquí.
Así, por lo que ahora es un fragmento.
Así que guardemos y luego volvemos a lo que teníamos antes.
Entonces ahora inspeccionemos el árbol DOM,
como decía, solo para mostrarte
que en realidad esto no creó ningún elemento nuevo en absoluto.
Entonces aquí tenemos el encabezado.
y veo que todavía tenemos esa clase de pie de página allí.
Por supuesto, deshagámonos de eso.
está bien.
Entonces tenemos nuestro contenedor, luego tenemos el menú,
luego tenemos el h2, entonces este, y luego exactamente,
tenemos el párrafo y la UL, pero por separado,
así que no envuelto en nada.
Entonces esto es completamente invisible aquí.
y es exactamente lo que estábamos buscando.
Y eso es todo, eso es todo lo que es un Fragmento de React
y es todo lo que hace.
Ahora, a veces necesitamos agregar una clave a un Fragmento de React,
entonces, por ejemplo, cuando lo usamos para representar una lista
y entonces tenemos que escribirlo
de una manera ligeramente diferente.
Primero, asegurémonos de haber importado React.
y lo hacemos, así que está aquí
y entonces podemos escribir React.Fragment.
Y luego aquí abajo necesitamos cerrar ese React.Fragment
y entonces el resultado es exactamente el mismo.
Pero si lo necesitamos, aquí podríamos agregar una clave.
de cualquier cosa.
Muy bien, ahora no necesitamos una llave.
entonces podemos optar por la versión corta,
que por supuesto es mucho mejor, de acuerdo.
Intentemos tal vez algo más.
Digamos que aquí en realidad no queríamos este contenedor,
entonces tal vez solo necesitábamos todos nuestros elementos
aquí mismo directamente en la raíz.
Básicamente lo que queríamos en este caso.
es el componente de la aplicación para devolver tres componentes,
entonces estos tres elementos están hechos de estos tres componentes.
Y entonces eso sería muy simple.
Ahora bien, en nuestro caso,
por supuesto que va a estropear el formato
porque entonces nos falta la clase contenedora,
pero solo como ejemplo,
así es como se vería al final.
Así tendríamos nuestra raíz
con inmediatamente estos tres como hijos directos.
Pero volvamos a poner todo en orden.
Y sí, creo que eso es todo.
que necesitas saber sobre React Fragments.
Es un concepto muy simple,
lo que básicamente nos permite tener más
que solo un elemento dentro de una pieza de JSX.