1
00:00:01,110 --> 00:00:03,150
Otra técnica muy importante

2
00:00:03,150 --> 00:00:06,210
que usamos todo el tiempo en el desarrollo de React

3
00:00:06,210 --> 00:00:08,220
es representación condicional.

4
00:00:08,220 --> 00:00:10,890
Entonces, en este video y los dos siguientes,

5
00:00:10,890 --> 00:00:15,000
hablaremos de tres formas de renderizar algo de JSX,

6
00:00:15,000 --> 00:00:17,340
o incluso un componente completo,

7
00:00:17,340 --> 00:00:19,320
basado en una condición

8
00:00:19,320 --> 00:00:22,893
y comenzando en esta conferencia con el operador &.

9
00:00:24,150 --> 00:00:27,616
Entonces, recuerda hace mucho tiempo creamos esto.

10
00:00:27,616 --> 00:00:31,560
Variable isOpen aquí en el pie de página.

11
00:00:31,560 --> 00:00:34,260
Básicamente esta variable nos dice

12
00:00:34,260 --> 00:00:36,420
si actualmente el restaurante está abierto,

13
00:00:36,420 --> 00:00:41,220
lo cual sucede cuando la hora actual es entre las 12 y las 22.

14
00:00:41,220 --> 00:00:43,380
Y ahora lo que queremos hacer es

15
00:00:43,380 --> 00:00:47,730
básicamente solo representar algo aquí dentro del pie de página

16
00:00:47,730 --> 00:00:50,250
si el restaurante está abierto actualmente.

17
00:00:50,250 --> 00:00:53,430
Y de eso se trata el renderizado condicional.

18
00:00:53,430 --> 00:00:56,670
Básicamente se trata de renderizar una parte de la interfaz de usuario.

19
00:00:56,670 --> 00:00:59,130
no importa si es una pieza de JSX,

20
00:00:59,130 --> 00:01:01,290
o si es un componente completo,

21
00:01:01,290 --> 00:01:03,480
en base a una determinada condición.

22
00:01:03,480 --> 00:01:04,830
Y nuevamente, en este caso,

23
00:01:04,830 --> 00:01:08,040
la condición es simplemente si el restaurante

24
00:01:08,040 --> 00:01:10,113
está actualmente abierto o no.

25
00:01:11,340 --> 00:01:14,280
Así que deshagámonos de todo esto.

26
00:01:14,280 --> 00:01:17,220
Y luego aquí, ya que vamos a usar JavaScript,

27
00:01:17,220 --> 00:01:19,380
entremos en modo JavaScript

28
00:01:19,380 --> 00:01:22,800
usando estas llaves una vez más.

29
00:01:22,800 --> 00:01:25,560
Entonces, como mencioné inicialmente en esta conferencia,

30
00:01:25,560 --> 00:01:27,450
vamos a hacer renderizado condicional

31
00:01:27,450 --> 00:01:29,250
con el operador &

32
00:01:29,250 --> 00:01:32,640
y eso funciona debido al cortocircuito.

33
00:01:32,640 --> 00:01:35,880
Ahora, en caso de que no estés seguro de lo que significa un cortocircuito,

34
00:01:35,880 --> 00:01:38,310
y cómo funciona con el operador &,

35
00:01:38,310 --> 00:01:40,710
entonces por favor regrese a la sección anterior

36
00:01:40,710 --> 00:01:43,740
donde tengo una conferencia completa sobre eso.

37
00:01:43,740 --> 00:01:44,850
Pero en pocas palabras,

38
00:01:44,850 --> 00:01:48,030
si tenemos algún valor verdadero o veraz,

39
00:01:48,030 --> 00:01:49,367
como está abierto,

40
00:01:50,580 --> 00:01:53,100
y si luego usamos el operador &,

41
00:01:53,100 --> 00:01:56,310
luego la segunda parte del operador &,

42
00:01:56,310 --> 00:01:57,720
entonces, lo que sea que venga aquí,

43
00:01:57,720 --> 00:02:01,113
será devuelto en caso de que la condición sea verdadera.

44
00:02:02,820 --> 00:02:05,790
Así que escribamos algo muy simple aquí.

45
00:02:05,790 --> 00:02:07,530
Recién abierto.

46
00:02:07,530 --> 00:02:08,940
Entonces así.

47
00:02:08,940 --> 00:02:10,260
Y vamos a comprobarlo.

48
00:02:10,260 --> 00:02:12,360
Y efectivamente, dice abierto.

49
00:02:12,360 --> 00:02:14,190
Y nuevamente, la razón de eso

50
00:02:14,190 --> 00:02:16,680
es la forma en que funciona el operador &.

51
00:02:16,680 --> 00:02:19,620
Entonces isOpen es actualmente cierto como podemos ver.

52
00:02:19,620 --> 00:02:21,600
desde este console.log aquí,

53
00:02:21,600 --> 00:02:23,760
y entonces, como esto es cierto,

54
00:02:23,760 --> 00:02:28,230
se devolverá la segunda parte del operador &.

55
00:02:28,230 --> 00:02:30,390
Ahora, cambiemos esto aquí.

56
00:02:30,390 --> 00:02:34,290
Decir que el restaurante abre a las 20 horas.

57
00:02:34,290 --> 00:02:36,210
Entonces, aquí obtenemos falso.

58
00:02:36,210 --> 00:02:39,750
Y luego aquí abajo, bueno, básicamente no conseguimos nada.

59
00:02:39,750 --> 00:02:42,420
Y ese es el cortocircuito en acción.

60
00:02:42,420 --> 00:02:46,230
Entonces, el cortocircuito significa que si esta condición,

61
00:02:46,230 --> 00:02:49,890
Entonces, si este valor aquí es falso o falso,

62
00:02:49,890 --> 00:02:51,720
Luego la segunda parte de la operación.

63
00:02:51,720 --> 00:02:53,910
Ni siquiera será ejecutado.

64
00:02:53,910 --> 00:02:56,100
Entonces JavaScript ni siquiera mirará esto.

65
00:02:56,100 --> 00:02:58,560
y luego no se representa nada.

66
00:02:58,560 --> 00:03:01,290
Entonces el resultado aquí es verdadero,

67
00:03:01,290 --> 00:03:02,730
cual es el resultado de esto,

68
00:03:02,730 --> 00:03:04,950
pero React en realidad no se hace realidad

69
00:03:04,950 --> 00:03:07,170
o falso en el DOM.

70
00:03:07,170 --> 00:03:09,300
Y es por eso que esto funciona.

71
00:03:09,300 --> 00:03:12,300
Así que déjame mostrarte esto aquí muy rápido.

72
00:03:12,300 --> 00:03:14,730
Entonces, si escribimos falso aquí,

73
00:03:14,730 --> 00:03:16,530
entonces un valor booleano,

74
00:03:16,530 --> 00:03:19,470
Entonces ves que no aparece aquí.

75
00:03:19,470 --> 00:03:22,890
Y lo mismo ocurre con la verdad.

76
00:03:22,890 --> 00:03:24,393
Entonces eso no está ahí.

77
00:03:25,890 --> 00:03:30,393
Bien, escribamos algo un poco más agradable aquí como,

78
00:03:34,237 --> 00:03:36,813
"Estamos abiertos hasta"

79
00:03:37,830 --> 00:03:41,680
y luego aquí, leamos la hora cerrada.

80
00:03:43,410 --> 00:03:45,393
y luego formatéelo un poco.

81
00:03:48,037 --> 00:03:53,037
"Ven a visitarnos o haz tu pedido en línea".

82
00:03:53,100 --> 00:03:54,630
Y como ya estamos aquí,

83
00:03:54,630 --> 00:03:59,223
Creemos también este pequeño botón que tenemos aquí abajo.

84
00:04:00,990 --> 00:04:03,210
Ahora, ahora mismo aquí no podemos ver nada,

85
00:04:03,210 --> 00:04:05,790
Así que retrasemos el horario de apertura.

86
00:04:05,790 --> 00:04:08,013
para que nuestro restaurante esté realmente abierto.

87
00:04:09,630 --> 00:04:10,770
lindo.

88
00:04:10,770 --> 00:04:13,683
Y ahora resumamos todo esto en una diferencia.

89
00:04:15,660 --> 00:04:20,660
Entonces diferencie con el nombre de clase de "orden".

90
00:04:21,990 --> 00:04:23,800
Entonces terminemos esto aquí.

91
00:04:25,500 --> 00:04:30,167
y luego cree un botón con el nombre de clase de orden "btn".

92
00:04:32,040 --> 00:04:33,480
Y luego obtenemos todos los estilos.

93
00:04:33,480 --> 00:04:37,410
de la hoja de estilo que incluimos al principio.

94
00:04:37,410 --> 00:04:38,970
hermoso.

95
00:04:38,970 --> 00:04:41,310
Ahora sólo observe aquí que estamos haciendo exactamente

96
00:04:41,310 --> 00:04:45,150
lo que aprendimos en la conferencia sobre las reglas de JSX,

97
00:04:45,150 --> 00:04:46,230
y en particular,

98
00:04:46,230 --> 00:04:49,590
Estamos dentro de este modo JavaScript aquí.

99
00:04:49,590 --> 00:04:52,290
devolviendo algo más de JSX,

100
00:04:52,290 --> 00:04:53,700
lo cual está perfectamente bien.

101
00:04:53,700 --> 00:04:55,290
Como aprendimos al final,

102
00:04:55,290 --> 00:04:57,780
Esta también es solo una expresión de JavaScript.

103
00:04:57,780 --> 00:05:00,273
Y es por eso que esto funciona.

104
00:05:01,380 --> 00:05:02,430
lindo.

105
00:05:02,430 --> 00:05:05,670
Este es un buen caso de uso de renderizado condicional.

106
00:05:05,670 --> 00:05:07,920
Veamos otro.

107
00:05:07,920 --> 00:05:11,490
Entonces, digamos que solo queremos mostrar este menú aquí.

108
00:05:11,490 --> 00:05:14,343
en caso de que realmente tengamos algunas pizzas.

109
00:05:15,330 --> 00:05:16,470
Entonces, antes que nada,

110
00:05:16,470 --> 00:05:17,703
en realidad consigamos,

111
00:05:19,530 --> 00:05:21,150
Sí, en realidad está aquí.

112
00:05:21,150 --> 00:05:24,420
Básicamente, sólo queremos mostrar esta lista.

113
00:05:24,420 --> 00:05:26,523
en caso de que tengamos unas pizzas.

114
00:05:27,690 --> 00:05:28,830
Así que para empezar,

115
00:05:28,830 --> 00:05:32,980
De hecho, creemos una nueva variable aquí rápidamente.

116
00:05:33,960 --> 00:05:35,790
que llamaré pizzas

117
00:05:35,790 --> 00:05:38,397
y lo estableceré igual a pizzaData.

118
00:05:40,650 --> 00:05:42,393
Y luego aquí, usemos eso.

119
00:05:45,210 --> 00:05:47,610
Y luego, pizzas.

120
00:05:47,610 --> 00:05:49,910
Y luego hagamos nuevamente el renderizado condicional.

121
00:05:51,210 --> 00:05:55,020
Entonces nuestro primer comienzo de una manera que realmente no va a funcionar.

122
00:05:55,020 --> 00:05:57,510
pero sigamos adelante por ahora.

123
00:05:57,510 --> 00:05:59,253
Entonces podemos volver a hacer pizzas.

124
00:06:01,003 --> 00:06:01,940
y &.

125
00:06:03,330 --> 00:06:05,040
Bueno, entonces esto.

126
00:06:05,040 --> 00:06:08,643
Así que cortemos eso, péguelo aquí,

127
00:06:09,990 --> 00:06:11,550
y ahí vamos.

128
00:06:11,550 --> 00:06:13,650
Y por eso nuestras pizzas siguen aquí.

129
00:06:13,650 --> 00:06:16,440
porque las pizzas son un valor veraz.

130
00:06:16,440 --> 00:06:18,750
Y entonces este comportamiento del operador &

131
00:06:18,750 --> 00:06:21,990
no sólo funciona para valores verdaderos y falsos,

132
00:06:21,990 --> 00:06:25,413
sino también por los valores de verdad y falsedad.

133
00:06:26,640 --> 00:06:28,560
Ahora, el problema con esto es

134
00:06:28,560 --> 00:06:33,000
eso digamos que en realidad no tenemos pizzas.

135
00:06:33,000 --> 00:06:35,403
Entonces pizzas equivale a una matriz vacía.

136
00:06:37,410 --> 00:06:41,070
Bueno, entonces parece que esto está vacío aquí.

137
00:06:41,070 --> 00:06:42,630
Pero si inspeccionamos,

138
00:06:42,630 --> 00:06:47,343
Vemos que la lista en sí debería seguir ahí.

139
00:06:48,870 --> 00:06:51,840
Como ves, tenemos aquí la lista vacía.

140
00:06:51,840 --> 00:06:53,760
Entonces está vacío porque, por supuesto.

141
00:06:53,760 --> 00:06:55,890
no tenemos pizzas para recorrer,

142
00:06:55,890 --> 00:06:58,020
pero UL todavía está aquí.

143
00:06:58,020 --> 00:07:00,600
Entonces esto aquí todavía se está renderizando.

144
00:07:00,600 --> 00:07:04,530
Y eso se debe a que una matriz MT sigue siendo un valor veraz.

145
00:07:04,530 --> 00:07:07,320
Entonces, lo que tenemos que hacer aquí es básicamente verificar

146
00:07:07,320 --> 00:07:09,213
para la longitud de esta matriz.

147
00:07:10,170 --> 00:07:15,170
Entonces hagamos numPizzas=pizzas.length.

148
00:07:19,440 --> 00:07:20,273
está bien.

149
00:07:20,273 --> 00:07:22,320
Y ahora que no hay pizzas,

150
00:07:22,320 --> 00:07:24,210
entonces esto se volverá cero,

151
00:07:24,210 --> 00:07:26,163
y entonces, si verificamos en base a esto,

152
00:07:28,290 --> 00:07:30,240
entonces este es ahora un valor falso.

153
00:07:30,240 --> 00:07:31,650
Y entonces, si es falso,

154
00:07:31,650 --> 00:07:34,650
entonces esto aquí no se renderizará.

155
00:07:34,650 --> 00:07:36,900
Así que veamos qué pasa entonces.

156
00:07:36,900 --> 00:07:38,280
y...

157
00:07:38,280 --> 00:07:40,860
ahora tenemos este extraño cero.

158
00:07:40,860 --> 00:07:42,813
Mmmm, ¿por qué es eso?

159
00:07:43,800 --> 00:07:47,250
Bueno, nuevamente es por un cortocircuito.

160
00:07:47,250 --> 00:07:49,890
Entonces, cuando el operador & hace cortocircuito,

161
00:07:49,890 --> 00:07:52,320
simplemente no evaluará esta parte,

162
00:07:52,320 --> 00:07:54,600
sino el resultado de la operación

163
00:07:54,600 --> 00:07:56,430
se convertirá en este.

164
00:07:56,430 --> 00:07:57,720
Entonces, esto es cero,

165
00:07:57,720 --> 00:08:00,840
y por lo tanto eso es lo que obtenemos en la interfaz de usuario.

166
00:08:00,840 --> 00:08:03,000
Eso no pasó aquí abajo

167
00:08:03,000 --> 00:08:04,320
porque como mencioné,

168
00:08:04,320 --> 00:08:08,130
Reaccionar no generará valores verdaderos o falsos

169
00:08:08,130 --> 00:08:11,070
pero felizmente generará un cero.

170
00:08:11,070 --> 00:08:12,723
Y es por eso que obtenemos un cero.

171
00:08:13,830 --> 00:08:15,030
Entonces como conclusión,

172
00:08:15,030 --> 00:08:19,140
Nunca, jamás deberíamos tener esto aquí como un número.

173
00:08:19,140 --> 00:08:21,180
Así que siempre deberíamos tratar de tener una verdadera

174
00:08:21,180 --> 00:08:22,980
o condición falsa aquí.

175
00:08:22,980 --> 00:08:24,210
Así que hagamos esto.

176
00:08:24,210 --> 00:08:27,330
Si hay más de cero pizzas, haga esto.

177
00:08:27,330 --> 00:08:30,390
Y si no, mientras no renderices nada.

178
00:08:30,390 --> 00:08:33,963
Y este es el resultado que estábamos buscando.

179
00:08:35,280 --> 00:08:38,250
Volvamos a colocarlo sólo para ver.

180
00:08:38,250 --> 00:08:40,593
Y luego nuestras pizzas están de vuelta.

181
00:08:41,490 --> 00:08:42,630
lindo.

182
00:08:42,630 --> 00:08:46,200
Ahora, debido a este comportamiento que acabo de mostrarles,

183
00:08:46,200 --> 00:08:49,620
de modo que a veces puede aparecer un cero en la interfaz de usuario,

184
00:08:49,620 --> 00:08:51,750
mucha gente dice que en realidad deberíamos

185
00:08:51,750 --> 00:08:56,550
nunca utilice el operador & para realizar renderizado condicional.

186
00:08:56,550 --> 00:08:58,650
Ahora realmente no estoy de acuerdo con eso.

187
00:08:58,650 --> 00:09:01,650
porque a veces es bueno hacerlo muy rápido

188
00:09:01,650 --> 00:09:03,960
hacer algo de renderizado condicional con esto,

189
00:09:03,960 --> 00:09:08,010
pero también normalmente prefiero el operador ternario

190
00:09:08,010 --> 00:09:09,600
para hacer renderizado condicional.

191
00:09:09,600 --> 00:09:13,203
Y ese operador será el siguiente en la próxima conferencia.