1
00:00:01,020 --> 00:00:04,500
Las listas de renderizado es una de las cosas más comunes.

2
00:00:04,500 --> 00:00:08,610
que hacemos básicamente en todas las aplicaciones de React.

3
00:00:08,610 --> 00:00:11,250
Probablemente lo harás como 100 veces.

4
00:00:11,250 --> 00:00:12,810
a lo largo de este curso

5
00:00:12,810 --> 00:00:16,683
Entonces, ahora aprendamos cómo representar listas en React.

6
00:00:18,030 --> 00:00:20,520
Pero antes que nada, ¿a qué nos referimos realmente?

7
00:00:20,520 --> 00:00:22,470
renderizando listas?

8
00:00:22,470 --> 00:00:26,280
Bueno, básicamente renderizar una lista es cuando tenemos una matriz.

9
00:00:26,280 --> 00:00:28,440
y queremos crear un componente

10
00:00:28,440 --> 00:00:31,020
para cada elemento de la matriz.

11
00:00:31,020 --> 00:00:36,020
Entonces, por ejemplo, aquí tenemos todos los datos iniciales, ¿recuerdas?

12
00:00:36,330 --> 00:00:39,300
Entonces aquí tenemos una serie de estos objetos.

13
00:00:39,300 --> 00:00:42,030
donde cada objeto es una pizza.

14
00:00:42,030 --> 00:00:43,560
Y como puedes imaginar,

15
00:00:43,560 --> 00:00:46,890
Ahora básicamente queremos representar esta lista.

16
00:00:46,890 --> 00:00:49,410
Básicamente queremos tomar esta matriz,

17
00:00:49,410 --> 00:00:51,960
y para cada uno de estos objetos de pizza,

18
00:00:51,960 --> 00:00:55,710
queremos crear automáticamente un componente de pizza aquí

19
00:00:55,710 --> 00:00:57,573
en nuestra interfaz de usuario.

20
00:00:58,920 --> 00:01:02,430
Entonces en lugar de llamar o usar aquí

21
00:01:02,430 --> 00:01:05,550
el componente de pizza manualmente uno por uno,

22
00:01:05,550 --> 00:01:08,430
queremos hacerlo todo a la vez de forma dinámica.

23
00:01:08,430 --> 00:01:11,550
Entonces, si tenemos como cuatro pizzas en el conjunto,

24
00:01:11,550 --> 00:01:14,430
entonces queremos que se representen cuatro componentes.

25
00:01:14,430 --> 00:01:17,040
Pero si tenemos como seis o 10,

26
00:01:17,040 --> 00:01:21,806
entonces queremos que aparezcan 10 componentes aquí en nuestra aplicación.

27
00:01:21,806 --> 00:01:25,860
Bien, ahora aprendamos cómo hacer esto.

28
00:01:25,860 --> 00:01:29,640
Ahora, la belleza de React es que, para muchas cosas,

29
00:01:29,640 --> 00:01:32,520
Todo lo que realmente necesitamos es el conocimiento de JavaScript.

30
00:01:32,520 --> 00:01:34,290
que ya tenemos.

31
00:01:34,290 --> 00:01:36,510
Así, por ejemplo, para representar listas,

32
00:01:36,510 --> 00:01:39,690
No hay nada nuevo sobre React que debamos aprender.

33
00:01:39,690 --> 00:01:43,260
Entonces no nos da un elemento de lista que podamos usar.

34
00:01:43,260 --> 00:01:44,910
o algo como esto.

35
00:01:44,910 --> 00:01:47,640
Todo lo que necesitamos es el conocimiento de JavaScript.

36
00:01:47,640 --> 00:01:48,960
que ya tenemos.

37
00:01:48,960 --> 00:01:52,473
Y en este caso, todo lo que necesitamos es el método del mapa.

38
00:01:53,610 --> 00:01:57,720
Entonces déjame mostrarte cómo después de toda esta charla.

39
00:01:57,720 --> 00:01:59,670
Así que creemos una nueva diferencia aquí.

40
00:01:59,670 --> 00:02:03,780
y luego convertiremos esto en un elemento de lista real

41
00:02:03,780 --> 00:02:06,600
pero comencemos con cualquier elemento aquí.

42
00:02:06,600 --> 00:02:08,350
Realmente no importa cuál.

43
00:02:09,690 --> 00:02:13,800
Y para empezar, comentemos también este código.

44
00:02:13,800 --> 00:02:17,520
aquí mismo y tal vez te hayas dado cuenta aquí por cierto,

45
00:02:17,520 --> 00:02:20,940
que un comentario en JSX es simplemente otra vez

46
00:02:20,940 --> 00:02:24,900
ingresando al modo JavaScript así que con estas llaves

47
00:02:24,900 --> 00:02:27,420
y luego esto es solo un comentario de JavaScript.

48
00:02:27,420 --> 00:02:31,230
Entonces esta es una de las reglas de JSX que en realidad fue

49
00:02:31,230 --> 00:02:32,940
en una de las diapositivas

50
00:02:32,940 --> 00:02:36,450
o en realidad en la única diapositiva de la conferencia anterior.

51
00:02:36,450 --> 00:02:40,260
Entonces, si lees eso, entonces ya estás familiarizado con esto.

52
00:02:40,260 --> 00:02:44,523
Pero de todos modos, ahora rendericemos nuestra lista de pizzas.

53
00:02:45,450 --> 00:02:48,903
Recordemos, sí, se llama datos de pizza.

54
00:02:51,300 --> 00:02:53,850
Así que ingresemos al modo JavaScript aquí.

55
00:02:53,850 --> 00:02:56,640
y luego tomemos nuestros datos de pizza,

56
00:02:56,640 --> 00:02:59,130
que recuerde es solo una matriz.

57
00:02:59,130 --> 00:03:03,120
Y luego mapeemos sobre ello.

58
00:03:03,120 --> 00:03:05,910
Entonces, en el mapa, básicamente recorremos esta matriz

59
00:03:05,910 --> 00:03:08,250
y crear una nueva matriz.

60
00:03:08,250 --> 00:03:12,123
Entonces, en estos datos de pizza, cada elemento es una pizza.

61
00:03:13,770 --> 00:03:17,760
Entonces hagamos esto y lo que queremos en esta nueva matriz,

62
00:03:17,760 --> 00:03:21,030
entonces en la nueva matriz ese será el resultado del mapa

63
00:03:21,030 --> 00:03:25,560
es para cada pizza, un componente de pizza.

64
00:03:25,560 --> 00:03:28,800
Y ahora podemos simplemente pasar todos estos accesorios.

65
00:03:28,800 --> 00:03:30,303
en dinámicamente aquí.

66
00:03:31,710 --> 00:03:34,053
Primero cerrémoslo así.

67
00:03:36,030 --> 00:03:41,030
Entonces ahora podemos decir pizza. y creo que es el nombre,

68
00:03:41,670 --> 00:03:43,260
pero comprobemos.

69
00:03:43,260 --> 00:03:46,350
Sí, tenemos nombre, ingredientes, precio, datos fotográficos.

70
00:03:46,350 --> 00:03:48,093
e incluso esta otra propiedad.

71
00:03:49,440 --> 00:03:51,420
Entonces, si lo guardo ahora mismo,

72
00:03:51,420 --> 00:03:54,990
ya deberíamos ver los seis componentes allí

73
00:03:54,990 --> 00:03:57,933
y de hecho, hermosa.

74
00:03:59,130 --> 00:04:00,240
allí están.

75
00:04:00,240 --> 00:04:04,410
Aqui les falta la imagen y los precios supongo.

76
00:04:04,410 --> 00:04:07,410
Pero en principio ya funciona.

77
00:04:07,410 --> 00:04:11,310
Como puede ver aquí, ahora obtenemos estos console.logs aquí.

78
00:04:11,310 --> 00:04:15,780
Para cada una de las pizzas, exactamente cuáles son los nombres que tenemos aquí.

79
00:04:15,780 --> 00:04:20,310
Y ahora ya estamos generando una lista.

80
00:04:20,310 --> 00:04:23,910
Entonces, una lista basada en estos datos de pizza.

81
00:04:23,910 --> 00:04:26,370
Ahora podríamos seguir aquí

82
00:04:26,370 --> 00:04:29,010
y básicamente agregar otra propiedad ahora

83
00:04:29,010 --> 00:04:32,460
para el nombre de la foto, por ejemplo.

84
00:04:32,460 --> 00:04:37,460
Entonces podemos hacer pizza.photoname y así sucesivamente.

85
00:04:39,300 --> 00:04:41,850
Pero normalmente no es así como lo hacemos.

86
00:04:41,850 --> 00:04:45,660
Normalmente lo que hacemos es pasar el objeto completo.

87
00:04:45,660 --> 00:04:47,880
en el componente más específico,

88
00:04:47,880 --> 00:04:49,680
entonces eso es pizza en este caso,

89
00:04:49,680 --> 00:04:53,130
y luego dentro de ese componente, entonces tendríamos

90
00:04:53,130 --> 00:04:57,690
sacar la información que queremos del objeto.

91
00:04:57,690 --> 00:05:01,650
Así que ahora cambiemos la forma en que pasamos los accesorios a esta pizza.

92
00:05:01,650 --> 00:05:06,650
y simplemente pasa pizza y digamos tal vez objeto de pizza

93
00:05:08,280 --> 00:05:11,130
solo para hacerlo un poco menos confuso

94
00:05:11,130 --> 00:05:12,880
y luego o modo JavaScript

95
00:05:13,860 --> 00:05:15,933
y luego el objeto de pizza actual.

96
00:05:18,000 --> 00:05:20,310
Está bien y ahora todo se rompe aquí.

97
00:05:20,310 --> 00:05:23,940
Porque necesitamos adaptar, por supuesto, nuestra pizza.

98
00:05:23,940 --> 00:05:28,067
Ahora aquí tenemos props.pizzaobject.photoname, ¿verdad?

99
00:05:32,790 --> 00:05:37,790
Entonces peguemos esto aquí en todas partes.

100
00:05:38,280 --> 00:05:41,910
y aquí y aquí y aquí.

101
00:05:41,910 --> 00:05:44,460
Y un poco más tarde nos haremos la vida un poco más fácil.

102
00:05:44,460 --> 00:05:46,320
con algunas técnicas adicionales.

103
00:05:46,320 --> 00:05:48,570
Pero por ahora, sigamos con esto.

104
00:05:48,570 --> 00:05:50,400
Y ahí lo tienes.

105
00:05:50,400 --> 00:05:53,250
Ahí tienes una lista de todas las pizzas.

106
00:05:53,250 --> 00:05:56,910
basado en nuestra matriz de datos de pizza.

107
00:05:56,910 --> 00:05:58,380
Deshagámonos de esto.

108
00:05:58,380 --> 00:06:02,163
y claro, si ahora quitamos algo de aquí,

109
00:06:03,450 --> 00:06:06,513
Entonces esa última pizza de allí va a desaparecer.

110
00:06:08,130 --> 00:06:13,130
Verás, pero volvamos a colocarlo y sí, ahí está.

111
00:06:14,820 --> 00:06:18,840
Ahora observe cómo tenemos un error aquí en la consola.

112
00:06:18,840 --> 00:06:21,990
Así que avancemos un poco y veamos qué obtenemos.

113
00:06:21,990 --> 00:06:24,750
Entonces tenemos esta advertencia que dice que cada niño

114
00:06:24,750 --> 00:06:28,080
en una lista debe tener una propiedad clave única.

115
00:06:28,080 --> 00:06:31,020
Básicamente, lo que esto significa es que cada vez que renderizamos

116
00:06:31,020 --> 00:06:33,303
una lista como esta.

117
00:06:34,950 --> 00:06:36,720
¿Dónde está?

118
00:06:36,720 --> 00:06:40,080
Sí, cada vez que representamos una lista con el método del mapa,

119
00:06:40,080 --> 00:06:42,510
cada uno de los elementos que se renderizan

120
00:06:42,510 --> 00:06:45,000
necesita una propiedad clave única.

121
00:06:45,000 --> 00:06:50,000
Entonces, la clave es básicamente un accesorio interno de React,

122
00:06:50,220 --> 00:06:53,910
que necesita para algunas optimizaciones de rendimiento

123
00:06:53,910 --> 00:06:56,760
y por ahora, no es realmente importante lo que eso significa

124
00:06:56,760 --> 00:07:00,330
como aprenderemos más adelante qué es exactamente esta propiedad K

125
00:07:00,330 --> 00:07:01,680
y lo que hace.

126
00:07:01,680 --> 00:07:04,440
Por ahora lo que importa es que pasemos algo por aquí

127
00:07:04,440 --> 00:07:06,723
que es único para cada elemento.

128
00:07:07,920 --> 00:07:11,520
Entonces a cada pizza en este caso, y ese es el nombre.

129
00:07:11,520 --> 00:07:15,360
Entonces el nombre en este ejemplo es siempre único.

130
00:07:15,360 --> 00:07:18,510
Entonces podemos usar esa como clave única.

131
00:07:18,510 --> 00:07:20,433
y entonces la advertencia aquí desapareció.

132
00:07:21,570 --> 00:07:25,200
Bien, ahora lo siguiente que quiero hacer es convertir esto aquí.

133
00:07:25,200 --> 00:07:30,063
desde una simple diferencia hasta un UL, por lo que es una lista desordenada.

134
00:07:32,520 --> 00:07:35,790
Y luego cada una de estas pizzas.

135
00:07:35,790 --> 00:07:40,590
debe ser un elemento de lista o un elemento de lista, por lo que un LI.

136
00:07:40,590 --> 00:07:43,530
Por eso es muy importante que escribamos marcado semántico.

137
00:07:43,530 --> 00:07:46,560
como este, que muchos cursos de alguna manera pasan por alto

138
00:07:46,560 --> 00:07:48,780
pero creo que es bastante importante.

139
00:07:48,780 --> 00:07:52,980
Y aquí también nos falta un nombre de clase importante.

140
00:07:52,980 --> 00:07:56,520
para finalmente aplicar un poco más de estilo aquí,

141
00:07:56,520 --> 00:07:58,830
que son solo pizzas

142
00:07:58,830 --> 00:08:01,830
y entonces esto pone las pizzas muy bien

143
00:08:01,830 --> 00:08:05,610
en esta cuadrícula y hace que se vea aún mejor.

144
00:08:05,610 --> 00:08:10,610
Así que estoy muy feliz aquí con este diseño como este.

145
00:08:10,950 --> 00:08:14,130
Y ya empieza a parecerme muy familiar.

146
00:08:14,130 --> 00:08:16,586
a lo que tenemos aquí, verdad.

147
00:08:16,586 --> 00:08:18,510
Nos falta este botón.

148
00:08:18,510 --> 00:08:21,270
El texto aquí es un poco diferente y tenemos

149
00:08:21,270 --> 00:08:24,750
Un estilo especial aquí cuando la pizza está agotada.

150
00:08:24,750 --> 00:08:28,410
Por eso hablaremos de esto aquí muy pronto.

151
00:08:28,410 --> 00:08:31,530
Pero por ahora, repasemos rápidamente lo que hicimos.

152
00:08:31,530 --> 00:08:33,240
en esta conferencia

153
00:08:33,240 --> 00:08:37,140
Y esa es fundamentalmente esta parte de aquí.

154
00:08:37,140 --> 00:08:40,500
Entonces el objetivo era renderizar un elemento de pizza.

155
00:08:40,500 --> 00:08:43,020
para cada uno de los objetos que hay dentro

156
00:08:43,020 --> 00:08:44,640
la matriz de datos de pizza.

157
00:08:44,640 --> 00:08:47,550
Y la forma en que lo hacemos en React es simplemente usando

158
00:08:47,550 --> 00:08:50,250
el método de mapa en esta matriz,

159
00:08:50,250 --> 00:08:52,170
y en caso de que no estés del todo seguro

160
00:08:52,170 --> 00:08:54,660
qué hace el método del mapa, por favor regrese

161
00:08:54,660 --> 00:08:57,450
a la sección anterior donde te presentaré

162
00:08:57,450 --> 00:08:59,580
a todos los métodos de matriz más importantes

163
00:08:59,580 --> 00:09:01,410
que utilizamos todo el tiempo.

164
00:09:01,410 --> 00:09:04,380
Y éste es probablemente el más importante.

165
00:09:04,380 --> 00:09:06,750
Entonces creará una nueva matriz,

166
00:09:06,750 --> 00:09:09,060
y en esta matriz, en cada posición,

167
00:09:09,060 --> 00:09:12,510
Habrá un nuevo componente de pizza.

168
00:09:12,510 --> 00:09:15,060
Y en cada uno de estos componentes de la pizza,

169
00:09:15,060 --> 00:09:20,060
Pasamos como accesorio el objeto pizza actual, ¿verdad?

170
00:09:20,370 --> 00:09:23,610
Entonces lo recibimos aquí como apoyo, y desde allí,

171
00:09:23,610 --> 00:09:25,983
leemos todos los datos que nos interesan.

172
00:09:28,020 --> 00:09:32,340
Muy bien, ahora por supuesto tampoco podríamos tener

173
00:09:32,340 --> 00:09:33,450
este componente.

174
00:09:33,450 --> 00:09:35,733
Déjame mostrarte eso rápidamente a ti también.

175
00:09:37,110 --> 00:09:38,950
Así que copiemos esto.

176
00:09:40,050 --> 00:09:45,050
Y bueno, entonces simplemente podemos reemplazarlo aquí y pegarlo allí.

177
00:09:46,020 --> 00:09:50,913
Y luego, por supuesto, tenemos que deshacernos de todo esto.

178
00:09:52,500 --> 00:09:54,990
Entonces los estoy reemplazando todos al mismo tiempo.

179
00:09:54,990 --> 00:09:57,510
y por favor no siga este código aquí.

180
00:09:57,510 --> 00:09:59,340
Entonces no es necesario que hagas esto.

181
00:09:59,340 --> 00:10:01,980
Solo quiero mostrarles que también podríamos haberlo hecho.

182
00:10:01,980 --> 00:10:04,953
sin como el componente intermediario.

183
00:10:05,820 --> 00:10:10,113
Entonces lo único que importa aquí es que devolvamos algo de JSX.

184
00:10:11,431 --> 00:10:13,380
Entonces podemos escribir directamente un JSX aquí.

185
00:10:13,380 --> 00:10:16,920
pero normalmente lo que hacemos es colocar ese JSX

186
00:10:16,920 --> 00:10:18,213
en otro componente.

187
00:10:21,000 --> 00:10:24,273
Así que volvamos y allá vamos.

188
00:10:25,200 --> 00:10:27,420
Ahora, habrás pensado que tal vez aquí usamos

189
00:10:27,420 --> 00:10:31,140
a para cada uno porque suena un poco más lógico.

190
00:10:31,140 --> 00:10:35,970
Quizás quisiéramos hacer una pizza para cada uno de estos.

191
00:10:35,970 --> 00:10:37,470
pero eso realmente no funcionaría.

192
00:10:39,900 --> 00:10:43,890
Intentemos eso y verás que luego no pasó nada.

193
00:10:43,890 --> 00:10:46,920
Y eso es porque aquí dentro de este UL

194
00:10:46,920 --> 00:10:49,350
De hecho, necesitamos algo de JSX.

195
00:10:49,350 --> 00:10:54,350
Y la única forma de conseguir ese JSX es creando una nueva matriz.

196
00:10:54,390 --> 00:10:56,160
Y eso es lo que hace MAP.

197
00:10:56,160 --> 00:10:59,130
Entonces crea una nueva matriz, que, en este caso,

198
00:10:59,130 --> 00:11:01,890
contienen estas seis pizzas.

199
00:11:01,890 --> 00:11:04,560
Y entonces aquí tendremos esta matriz.

200
00:11:04,560 --> 00:11:07,260
con todas estas pizzas y luego React lo sabe

201
00:11:07,260 --> 00:11:08,343
cómo renderizar eso.

202
00:11:10,530 --> 00:11:13,110
Bien, una técnica muy, muy importante.

203
00:11:13,110 --> 00:11:15,120
Asegúrate de memorizar esto.

204
00:11:15,120 --> 00:11:17,970
o si no quieres memorizar, no te preocupes,

205
00:11:17,970 --> 00:11:20,520
porque harás esto docenas de veces

206
00:11:20,520 --> 00:11:21,663
A lo largo del curso.