1
00:00:01,020 --> 00:00:04,350
Aprendamos ahora qué es un fragmento de React

2
00:00:04,350 --> 00:00:07,023
y cuándo exactamente podríamos necesitar uno.

3
00:00:08,580 --> 00:00:11,850
Entonces, vayamos aquí a la versión final.

4
00:00:11,850 --> 00:00:14,640
de la aplicación para que pueda mostrarte

5
00:00:14,640 --> 00:00:17,340
que en realidad todavía nos falta algo

6
00:00:17,340 --> 00:00:20,100
y esa es esta frase de aquí.

7
00:00:20,100 --> 00:00:23,010
Entonces hay un párrafo de texto aquí

8
00:00:23,010 --> 00:00:25,583
que solo voy a copiar ahora

9
00:00:25,583 --> 00:00:29,250
y tal vez puedas pausar el video y escribirlo,

10
00:00:29,250 --> 00:00:31,473
o simplemente puedes escribir algo más corto.

11
00:00:32,700 --> 00:00:35,883
Así que por ahora coloquemos ese párrafo aquí,

12
00:00:36,930 --> 00:00:41,930
Guárdalo y sí, entonces se verá exactamente igual.

13
00:00:43,170 --> 00:00:46,443
Pero ¿y ahora qué pasa si no tenemos pizzas?

14
00:00:47,490 --> 00:00:49,320
Entonces en este caso,

15
00:00:49,320 --> 00:00:53,130
Bueno, entonces en realidad no queremos mostrar esto.

16
00:00:53,130 --> 00:00:57,180
Entonces esta oración de aquí, solo queremos esta,

17
00:00:57,180 --> 00:00:58,650
entonces el que viene aquí

18
00:00:58,650 --> 00:01:00,333
de nuestra interpretación condicional.

19
00:01:01,800 --> 00:01:04,383
Así que dejemos eso atrás.

20
00:01:06,540 --> 00:01:09,960
Y ahora lo que eso significa es que sólo queremos

21
00:01:09,960 --> 00:01:13,023
presentar este párrafo aquí en esta situación.

22
00:01:14,280 --> 00:01:18,093
Así que tomemos ese párrafo y colóquelo aquí,

23
00:01:19,590 --> 00:01:22,350
porque nuevamente queremos representar este párrafo

24
00:01:22,350 --> 00:01:24,570
y este UL en este caso,

25
00:01:24,570 --> 00:01:28,260
pero inmediatamente React comienza a gritarnos.

26
00:01:28,260 --> 00:01:32,250
Entonces las expresiones JSX deben tener un elemento principal.

27
00:01:32,250 --> 00:01:34,830
Y esto es exactamente lo que aprendimos.

28
00:01:34,830 --> 00:01:38,220
en la conferencia Reglas de JSX.

29
00:01:38,220 --> 00:01:42,240
Entonces, una parte de JSX, sin importar dónde esté definida.

30
00:01:42,240 --> 00:01:46,470
De hecho, solo puede tener un elemento raíz.

31
00:01:46,470 --> 00:01:48,390
Y esto nos ha pasado antes

32
00:01:48,390 --> 00:01:50,130
y la forma en que siempre solucionamos esto

33
00:01:50,130 --> 00:01:52,380
fue simplemente envolviendo todo

34
00:01:52,380 --> 00:01:57,380
en un div o algún otro componente, así que intentémoslo.

35
00:01:58,380 --> 00:02:00,060
No tienes que hacer esto.

36
00:02:00,060 --> 00:02:01,650
Y esto es sólo para mostrarte

37
00:02:01,650 --> 00:02:05,190
que esto en realidad arruinará nuestro formato aquí.

38
00:02:05,190 --> 00:02:07,860
Así que esto no es realmente lo que queremos.

39
00:02:07,860 --> 00:02:11,130
No queremos renderizar un elemento.

40
00:02:11,130 --> 00:02:13,050
que contiene estos dos,

41
00:02:13,050 --> 00:02:16,260
pero realmente queremos representar estos dos elementos aquí,

42
00:02:16,260 --> 00:02:18,840
entonces estos dos elementos por separado

43
00:02:18,840 --> 00:02:23,840
sin tener un elemento como padre de estos dos, cierto.

44
00:02:24,300 --> 00:02:29,130
Y este es el caso en el que necesitamos un Fragmento de React.

45
00:02:29,130 --> 00:02:33,390
Entonces, un Fragmento de React básicamente nos permite agrupar algunos elementos.

46
00:02:33,390 --> 00:02:38,390
sin dejar ningún rastro en el árbol HTML, por lo tanto en el DOM.

47
00:02:39,150 --> 00:02:42,840
Entonces parece que aquí necesitamos un fragmento de reacción.

48
00:02:42,840 --> 00:02:44,340
y eso es muy fácil.

49
00:02:44,340 --> 00:02:48,250
Todo lo que tenemos que hacer es básicamente borrar todo aquí.

50
00:02:50,070 --> 00:02:53,730
Así, por lo que ahora es un fragmento.

51
00:02:53,730 --> 00:02:57,900
Así que guardemos y luego volvemos a lo que teníamos antes.

52
00:02:57,900 --> 00:03:00,510
Entonces ahora inspeccionemos el árbol DOM,

53
00:03:00,510 --> 00:03:03,060
como decía, solo para mostrarte

54
00:03:03,060 --> 00:03:07,410
que en realidad esto no creó ningún elemento nuevo en absoluto.

55
00:03:07,410 --> 00:03:09,090
Entonces aquí tenemos el encabezado.

56
00:03:09,090 --> 00:03:12,963
y veo que todavía tenemos esa clase de pie de página allí.

57
00:03:14,070 --> 00:03:15,783
Por supuesto, deshagámonos de eso.

58
00:03:17,820 --> 00:03:18,663
está bien.

59
00:03:20,760 --> 00:03:23,430
Entonces tenemos nuestro contenedor, luego tenemos el menú,

60
00:03:23,430 --> 00:03:27,630
luego tenemos el h2, entonces este, y luego exactamente,

61
00:03:27,630 --> 00:03:31,350
tenemos el párrafo y la UL, pero por separado,

62
00:03:31,350 --> 00:03:33,930
así que no envuelto en nada.

63
00:03:33,930 --> 00:03:36,000
Entonces esto es completamente invisible aquí.

64
00:03:36,000 --> 00:03:39,000
y es exactamente lo que estábamos buscando.

65
00:03:39,000 --> 00:03:42,060
Y eso es todo, eso es todo lo que es un Fragmento de React

66
00:03:42,060 --> 00:03:44,490
y es todo lo que hace.

67
00:03:44,490 --> 00:03:48,750
Ahora, a veces necesitamos agregar una clave a un Fragmento de React,

68
00:03:48,750 --> 00:03:52,350
entonces, por ejemplo, cuando lo usamos para representar una lista

69
00:03:52,350 --> 00:03:54,780
y entonces tenemos que escribirlo

70
00:03:54,780 --> 00:03:56,180
de una manera ligeramente diferente.

71
00:03:57,060 --> 00:04:00,540
Primero, asegurémonos de haber importado React.

72
00:04:00,540 --> 00:04:02,680
y lo hacemos, así que está aquí

73
00:04:03,540 --> 00:04:08,043
y entonces podemos escribir React.Fragment.

74
00:04:11,190 --> 00:04:16,020
Y luego aquí abajo necesitamos cerrar ese React.Fragment

75
00:04:16,020 --> 00:04:19,020
y entonces el resultado es exactamente el mismo.

76
00:04:19,020 --> 00:04:22,390
Pero si lo necesitamos, aquí podríamos agregar una clave.

77
00:04:23,610 --> 00:04:25,500
de cualquier cosa.

78
00:04:25,500 --> 00:04:27,690
Muy bien, ahora no necesitamos una llave.

79
00:04:27,690 --> 00:04:30,750
entonces podemos optar por la versión corta,

80
00:04:30,750 --> 00:04:35,340
que por supuesto es mucho mejor, de acuerdo.

81
00:04:35,340 --> 00:04:37,680
Intentemos tal vez algo más.

82
00:04:37,680 --> 00:04:42,270
Digamos que aquí en realidad no queríamos este contenedor,

83
00:04:42,270 --> 00:04:45,030
entonces tal vez solo necesitábamos todos nuestros elementos

84
00:04:45,030 --> 00:04:47,610
aquí mismo directamente en la raíz.

85
00:04:47,610 --> 00:04:50,520
Básicamente lo que queríamos en este caso.

86
00:04:50,520 --> 00:04:53,910
es el componente de la aplicación para devolver tres componentes,

87
00:04:53,910 --> 00:04:58,050
entonces estos tres elementos están hechos de estos tres componentes.

88
00:04:58,050 --> 00:05:00,123
Y entonces eso sería muy simple.

89
00:05:01,560 --> 00:05:02,580
Ahora bien, en nuestro caso,

90
00:05:02,580 --> 00:05:05,160
por supuesto que va a estropear el formato

91
00:05:05,160 --> 00:05:08,250
porque entonces nos falta la clase contenedora,

92
00:05:08,250 --> 00:05:10,170
pero solo como ejemplo,

93
00:05:10,170 --> 00:05:13,380
así es como se vería al final.

94
00:05:13,380 --> 00:05:14,820
Así tendríamos nuestra raíz

95
00:05:14,820 --> 00:05:18,093
con inmediatamente estos tres como hijos directos.

96
00:05:19,770 --> 00:05:21,690
Pero volvamos a poner todo en orden.

97
00:05:21,690 --> 00:05:23,400
Y sí, creo que eso es todo.

98
00:05:23,400 --> 00:05:25,650
que necesitas saber sobre React Fragments.

99
00:05:25,650 --> 00:05:27,300
Es un concepto muy simple,

100
00:05:27,300 --> 00:05:29,490
lo que básicamente nos permite tener más

101
00:05:29,490 --> 00:05:33,363
que solo un elemento dentro de una pieza de JSX.