1
00:00:01,080 --> 00:00:04,920
Recuerde que dije antes que la representación de listas es una

2
00:00:04,920 --> 00:00:08,520
¿Cuáles son las tareas más comunes en el desarrollo de React?

3
00:00:08,520 --> 00:00:11,790
Bueno, esta aplicación no es una excepción.

4
00:00:11,790 --> 00:00:15,693
Y ahora rendericemos la lista de elementos picoteados.

5
00:00:17,040 --> 00:00:21,390
Y antes que nada, vayamos a nuestro archivo CSS.

6
00:00:21,390 --> 00:00:23,890
porque ahí es nuevamente donde pegué

7
00:00:25,020 --> 00:00:26,883
este conjunto de elementos iniciales.

8
00:00:27,870 --> 00:00:29,643
Así que aprovechemos eso.

9
00:00:32,250 --> 00:00:34,770
También podemos cerrar index.js

10
00:00:34,770 --> 00:00:36,820
y lo pegaré aquí en la parte superior.

11
00:00:40,110 --> 00:00:42,540
Entonces ves que tenemos una vez más

12
00:00:42,540 --> 00:00:45,660
una matriz con algunos objetos, y en este caso

13
00:00:45,660 --> 00:00:49,410
cada objeto describe un artículo que se va a empaquetar.

14
00:00:49,410 --> 00:00:52,683
Entonces cada uno de ellos tiene un ID, una descripción, una cantidad,

15
00:00:53,835 --> 00:00:54,668
Propiedad empaquetada NT OD

16
00:00:54,668 --> 00:00:59,430
lo que nos dice si éste ha sido empaquetado o no.

17
00:00:59,430 --> 00:01:00,390
Entonces basado en esto

18
00:01:00,390 --> 00:01:03,810
Luego mostraremos el artículo de forma un poco diferente.

19
00:01:03,810 --> 00:01:07,290
Entonces aquí, bueno aquí no tenemos ninguno.

20
00:01:07,290 --> 00:01:08,613
Entonces aquí en la aplicación de demostración.

21
00:01:09,540 --> 00:01:13,320
Entonces ves ahorita no está empacado, pero si está empacado

22
00:01:13,320 --> 00:01:15,873
entonces ves que es como tachado.

23
00:01:17,400 --> 00:01:20,940
Bien, ahora tomemos estos elementos de aquí y

24
00:01:20,940 --> 00:01:23,643
renderícelos como una lista en nuestra interfaz de usuario.

25
00:01:25,170 --> 00:01:26,610
Así como lo dice el nombre

26
00:01:26,610 --> 00:01:29,133
vamos a hacer eso en la lista de empaque.

27
00:01:30,060 --> 00:01:33,810
Primero que nada, usemos nuevamente HTML semántico.

28
00:01:33,810 --> 00:01:37,680
y convierta esta diferencia en un UL.

29
00:01:37,680 --> 00:01:39,783
Entonces en una lista desordenada.

30
00:01:41,880 --> 00:01:42,720
¿está bien?

31
00:01:42,720 --> 00:01:46,140
Y luego inmediatamente aquí ingresamos al modo JavaScript.

32
00:01:46,140 --> 00:01:49,635
porque ¿recuerdas cómo representamos listas en React?

33
00:01:49,635 --> 00:01:53,790
Bueno, simplemente usamos el método del mapa que ya conocemos.

34
00:01:53,790 --> 00:01:55,113
en la matriz.

35
00:01:56,400 --> 00:02:00,090
Así que los puntos iniciales, y más adelante, por supuesto,

36
00:02:00,090 --> 00:02:03,810
luego, cuando hagamos esto dinámico, use otra matriz aquí.

37
00:02:03,810 --> 00:02:07,320
Pero de nuevo, por ahora sólo queremos representar algo

38
00:02:07,320 --> 00:02:08,673
así que solo para que esto funcione.

39
00:02:10,890 --> 00:02:11,760
¿bueno?

40
00:02:11,760 --> 00:02:13,830
Luego dentro del método del mapa.

41
00:02:13,830 --> 00:02:17,463
cada uno de los elementos será, digamos, un ítem.

42
00:02:19,650 --> 00:02:21,480
¿está bien? Y luego para cada elemento

43
00:02:21,480 --> 00:02:25,380
lo que queremos representar es un componente de elemento.

44
00:02:25,380 --> 00:02:27,030
Así que escribamos eso aquí inmediatamente.

45
00:02:27,030 --> 00:02:30,303
y luego crearemos el componente del artículo en un minuto.

46
00:02:31,440 --> 00:02:36,153
Entonces el elemento, y luego pasamos como accesorio, el elemento completo.

47
00:02:38,070 --> 00:02:43,070
Entonces, elemento y luego elemento nuevamente, cerremos esto aquí.

48
00:02:44,400 --> 00:02:47,460
Como ves, tenemos muchos artículos aquí.

49
00:02:47,460 --> 00:02:50,190
Entonces el nombre del componente, el nombre del accesorio,

50
00:02:50,190 --> 00:02:52,710
y luego aquí el objeto mismo

51
00:02:52,710 --> 00:02:54,900
cuál, recuerda, es el argumento

52
00:02:54,900 --> 00:02:59,700
de esta función de devolución de llamada en cada iteración sobre esta matriz.

53
00:02:59,700 --> 00:03:01,833
Espero que no haya nada nuevo aquí en este momento.

54
00:03:02,670 --> 00:03:05,970
Por lo tanto, un regalo es una caja fuerte, pero, por supuesto, el artículo no está definido.

55
00:03:05,970 --> 00:03:09,450
Así que ocupémonos rápidamente de eso.

56
00:03:09,450 --> 00:03:13,740
Y ahora tenemos que aceptar los accesorios, ¿verdad?

57
00:03:13,740 --> 00:03:18,150
Entonces podemos hacerlo así, recuerda, pero aún mejor.

58
00:03:18,150 --> 00:03:19,977
podemos desestructurar esto inmediatamente

59
00:03:19,977 --> 00:03:22,260
y luego dale el nombre aquí

60
00:03:22,260 --> 00:03:25,770
del accesorio que pasamos, que es el elemento.

61
00:03:25,770 --> 00:03:27,630
Y nuevamente, podría ser cualquier cosa.

62
00:03:27,630 --> 00:03:32,630
Podría ser un objeto como O, B, G, X o cualquier cosa.

63
00:03:32,790 --> 00:03:35,910
Pero sí, aquí es más fácil llamarlo elemento.

64
00:03:35,910 --> 00:03:37,710
porque eso es lo que es.

65
00:03:37,710 --> 00:03:40,593
Es sólo un artículo de embalaje, por así decirlo.

66
00:03:42,360 --> 00:03:46,740
Entonces aquí, este elemento debería ser ahora un elemento LI.

67
00:03:46,740 --> 00:03:50,790
Entonces, un elemento de la lista, porque eso es lo que normalmente dirige a los niños.

68
00:03:50,790 --> 00:03:54,960
de la UI o del elemento UL debe ser.

69
00:03:54,960 --> 00:03:58,176
Y luego solo para empezar, solo para ver si está funcionando.

70
00:03:58,176 --> 00:04:03,150
Simplemente rendericemos, creo que se llama descripción.

71
00:04:03,150 --> 00:04:04,770
si eso es.

72
00:04:04,770 --> 00:04:06,750
En realidad, simplemente lo copiaremos.

73
00:04:06,750 --> 00:04:10,110
Entonces, descripción del punto del artículo, dale una caja fuerte.

74
00:04:10,110 --> 00:04:11,940
Y ahí está.

75
00:04:11,940 --> 00:04:14,280
Entonces tenemos pasaportes y calcetines.

76
00:04:14,280 --> 00:04:16,931
Ahora el estilo aquí está un poco fuera de lugar.

77
00:04:16,931 --> 00:04:18,780
Y la razón de esto es

78
00:04:18,780 --> 00:04:23,695
que aquí realmente cometí un error en el HTML.

79
00:04:23,695 --> 00:04:28,263
Así que aquí vamos a crear una diferencia y luego

80
00:04:29,610 --> 00:04:33,663
es esta diferencia la que se supone que tiene la clase de lista.

81
00:04:35,400 --> 00:04:36,450
¿está bien?

82
00:04:36,450 --> 00:04:38,790
Y la razón de esto es que más adelante

83
00:04:38,790 --> 00:04:42,540
Tendremos otro elemento aquí para estos filtros.

84
00:04:42,540 --> 00:04:46,023
Entonces tendremos una diferencia para estas dos cosas aquí abajo.

85
00:04:47,970 --> 00:04:49,480
está bien.

86
00:04:49,480 --> 00:04:51,090
Por supuesto, para mí eso es fácil de ver ahora.

87
00:04:51,090 --> 00:04:54,030
porque ya creé la aplicación de antemano.

88
00:04:54,030 --> 00:04:56,550
Pero una vez que empieces a crear tus aplicaciones por tu cuenta

89
00:04:56,550 --> 00:04:58,650
habrá mucho más ida y vuelta

90
00:04:58,650 --> 00:05:00,900
lo cual por supuesto no puedo hacer aquí en este curso

91
00:05:00,900 --> 00:05:03,333
porque entonces tomará una eternidad.

92
00:05:04,890 --> 00:05:09,570
Bien, pero de todos modos, ahora agreguemos algo más aquí.

93
00:05:09,570 --> 00:05:12,030
Entonces no solo queremos una descripción.

94
00:05:12,030 --> 00:05:17,030
También queremos este ícono aquí para el líder.

95
00:05:17,310 --> 00:05:19,290
Y luego querremos esta casilla de verificación.

96
00:05:19,290 --> 00:05:21,573
pero en realidad dejemos eso para más tarde.

97
00:05:22,800 --> 00:05:26,670
Entonces aquí, creemos un elemento de giro.

98
00:05:26,670 --> 00:05:31,670
Entonces, para el texto, tomémoslo y péguelo aquí.

99
00:05:32,580 --> 00:05:35,973
Y luego también queremos el punto del elemento.

100
00:05:37,260 --> 00:05:40,773
Veamos, es exactamente la cantidad de puntos del artículo.

101
00:05:40,773 --> 00:05:44,580
Entonces, cantidad de puntos del artículo.

102
00:05:44,580 --> 00:05:48,300
Y fíjate como a veces creas más bonitas como

103
00:05:48,300 --> 00:05:51,060
estas cadenas vacías aquí en nuestro JSX

104
00:05:51,060 --> 00:05:53,193
muchas veces esto no es necesario.

105
00:05:54,397 --> 00:05:55,890
Así que deshazte de eso.

106
00:05:55,890 --> 00:05:58,293
Y ahora, finalmente, necesitamos el botón Eliminar.

107
00:06:00,900 --> 00:06:04,530
Y por ahora, no adjuntaremos ningún controlador de eventos aquí.

108
00:06:04,530 --> 00:06:09,030
pero aquí simplemente colocaremos un ícono en forma de emoji.

109
00:06:09,030 --> 00:06:10,743
Entonces tal vez así.

110
00:06:11,610 --> 00:06:13,143
Entonces esta X aquí.

111
00:06:14,169 --> 00:06:16,234
Y nuevamente, si no puedes hacer que esto funcione

112
00:06:16,234 --> 00:06:21,087
entonces puedes escribir la X así o también así.

113
00:06:22,440 --> 00:06:24,213
Entonces eso también funcionaría.

114
00:06:26,460 --> 00:06:30,450
Muy bien, esto ahora se ha renderizado aquí según

115
00:06:30,450 --> 00:06:31,710
fuera de esta lista.

116
00:06:31,710 --> 00:06:35,490
Y si duplicamos esto y agregamos algo más aquí

117
00:06:35,490 --> 00:06:40,490
como un cargador, un cargador, y ahí está.

118
00:06:41,760 --> 00:06:45,813
Ahora, para terminar, marquemos uno de ellos como empaquetado.

119
00:06:46,890 --> 00:06:48,510
Haz esto realidad

120
00:06:48,510 --> 00:06:51,780
para que podamos agregar algún estilo adicional aquí.

121
00:06:51,780 --> 00:06:55,642
Así que básicamente queremos lograr una huelga por ahí.

122
00:06:55,642 --> 00:06:58,440
Entonces eso es algo simple.

123
00:06:58,440 --> 00:07:00,600
Así que vayamos aquí al tema.

124
00:07:00,600 --> 00:07:04,590
Y ahora agregaremos condicionalmente algo de estilo.

125
00:07:04,590 --> 00:07:07,830
Entonces, en lugar de agregar condicionalmente una clase aquí

126
00:07:07,830 --> 00:07:11,430
Quiero simplemente agregar algo de estilo de manera condicional.

127
00:07:11,430 --> 00:07:13,440
Así que escribamos estilo.

128
00:07:13,440 --> 00:07:16,410
y luego ingresa inmediatamente al modo JavaScript.

129
00:07:16,410 --> 00:07:19,800
Pero ahora no escribiré el objeto inmediatamente.

130
00:07:19,800 --> 00:07:21,690
de propiedades CSS.

131
00:07:21,690 --> 00:07:24,887
En lugar de eso, usemos el operador ary para

132
00:07:24,887 --> 00:07:29,433
decide qué objeto debería recibir realmente el estilo.

133
00:07:30,270 --> 00:07:35,270
Entonces, si el artículo está empacado y aquí realmente no lo hacemos.

134
00:07:35,400 --> 00:07:39,090
Necesito una condición porque esto ya es un lingote.

135
00:07:39,090 --> 00:07:40,440
Entonces si está lleno

136
00:07:40,440 --> 00:07:44,550
entonces queremos un objeto que contendrá algo de CSS

137
00:07:44,550 --> 00:07:47,400
para el tachado, pero si no,

138
00:07:47,400 --> 00:07:49,230
así que si el artículo no está embalado,

139
00:07:49,230 --> 00:07:52,530
entonces querremos devolver este objeto vacío.

140
00:07:52,530 --> 00:07:54,993
Y entonces no se aplicarán estilos.

141
00:07:56,640 --> 00:07:59,730
Entonces la propiedad CSS que estamos buscando

142
00:07:59,730 --> 00:08:03,250
se llama decoración de texto

143
00:08:04,200 --> 00:08:07,983
y vamos a configurarlo para que se alinee así.

144
00:08:11,356 --> 00:08:13,053
Y eso funcionó bastante bien.

145
00:08:14,520 --> 00:08:19,520
Muy bien, probemos con otro sólo por diversión.

146
00:08:19,950 --> 00:08:21,510
Y sí, inmediatamente ves

147
00:08:21,510 --> 00:08:23,793
que también se tache.

148
00:08:24,660 --> 00:08:26,640
Entonces esta era otra manera

149
00:08:26,640 --> 00:08:29,430
de utilizar el operador de respuesta para

150
00:08:29,430 --> 00:08:31,080
establece algo de estilo aquí.

151
00:08:31,080 --> 00:08:33,870
Como ves, tenemos mucha libertad en React,

152
00:08:33,870 --> 00:08:36,570
y nuevamente simplemente usamos las herramientas de JavaScript

153
00:08:36,570 --> 00:08:39,483
que ya tenemos para este tipo de cosas.