1
00:00:01,112 --> 00:00:03,510
[Instructor Jonas] Para terminar este proyecto aprendamos

2
00:00:03,510 --> 00:00:07,650
cómo establecer condicionalmente algún texto dentro de elementos

3
00:00:07,650 --> 00:00:10,953
y también cómo establecer condicionalmente nombres de clases.

4
00:00:12,600 --> 00:00:16,710
Entonces, si echamos un último vistazo a nuestro proyecto final

5
00:00:16,710 --> 00:00:19,620
la única diferencia es que esta pizza aquí

6
00:00:19,620 --> 00:00:21,150
eso esta agotado

7
00:00:21,150 --> 00:00:24,780
tiene este texto de agotado en lugar del precio.

8
00:00:24,780 --> 00:00:29,780
Y todo el elemento aquí está atenuado.

9
00:00:29,940 --> 00:00:32,550
Sólo para mostrar que no está disponible.

10
00:00:32,550 --> 00:00:34,683
Y ahora hagámoslo.

11
00:00:36,030 --> 00:00:38,430
Ahora mismo tenemos esta línea de código aquí.

12
00:00:38,430 --> 00:00:41,040
lo que hace que la pizza esté agotada

13
00:00:41,040 --> 00:00:42,720
ni siquiera se muestra.

14
00:00:42,720 --> 00:00:45,750
Así que comencemos por deshacernos de eso.

15
00:00:45,750 --> 00:00:49,620
Y ahora estamos listos para mostrar condicionalmente algo de texto.

16
00:00:49,620 --> 00:00:52,950
y lo vamos a hacer aquí mismo.

17
00:00:52,950 --> 00:00:56,520
Entonces la diferencia entre lo que hicimos antes es que

18
00:00:56,520 --> 00:01:00,927
antes de renderizar condicionalmente todo este elemento aquí

19
00:01:00,927 --> 00:01:03,120
pero ahora eso no es lo que queremos.

20
00:01:03,120 --> 00:01:07,260
Ahora ya sabemos que queremos este elemento span aquí.

21
00:01:07,260 --> 00:01:09,180
pero todavía no queremos el contenido.

22
00:01:09,180 --> 00:01:12,120
Y ahora establezcamos eso condicionalmente,

23
00:01:12,120 --> 00:01:13,740
y eso es muy fácil.

24
00:01:13,740 --> 00:01:17,283
Una vez más, usaremos nuestro operador ternario.

25
00:01:19,500 --> 00:01:22,960
Entonces digamos objeto de pizza

26
00:01:24,120 --> 00:01:25,683
punto agotado,

27
00:01:27,240 --> 00:01:29,640
entonces el texto aquí debería ser,

28
00:01:29,640 --> 00:01:32,490
¿Y ahora qué crees que necesitamos aquí?

29
00:01:32,490 --> 00:01:35,283
Bueno, en realidad es sólo una cuerda.

30
00:01:36,420 --> 00:01:38,040
Entonces, agotado.

31
00:01:38,040 --> 00:01:41,373
Y si no, entonces queremos el precio de la pizza.

32
00:01:42,270 --> 00:01:45,120
Guárdalo y,

33
00:01:45,120 --> 00:01:48,330
Sí, bien, eso funcionó.

34
00:01:48,330 --> 00:01:50,460
Pongámoslo en mayúsculas.

35
00:01:50,460 --> 00:01:52,290
Debería ser manejado por el CSS,

36
00:01:52,290 --> 00:01:57,210
pero también podemos hacerlo así ahora, ¿verdad?

37
00:01:57,210 --> 00:02:00,060
Así que apreciemos nuevamente la diferencia aquí.

38
00:02:00,060 --> 00:02:03,300
Entonces no estamos configurando el elemento condicionalmente,

39
00:02:03,300 --> 00:02:05,520
que por supuesto podríamos.

40
00:02:05,520 --> 00:02:08,940
Hagámoslo rápidamente porque ¿por qué no?

41
00:02:08,940 --> 00:02:09,963
Entonces podríamos decir,

42
00:02:11,070 --> 00:02:13,500
si pizza objeto

43
00:02:13,500 --> 00:02:14,680
no agotado

44
00:02:17,790 --> 00:02:21,700
luego muestra este lapso con agotado

45
00:02:23,550 --> 00:02:24,383
y si no

46
00:02:25,830 --> 00:02:29,530
luego muestra el lapso con pizza

47
00:02:32,640 --> 00:02:34,473
precio punto.

48
00:02:35,310 --> 00:02:37,800
Entonces el resultado va a ser exactamente el mismo.

49
00:02:37,800 --> 00:02:39,660
como vemos aquí abajo,

50
00:02:39,660 --> 00:02:42,570
pero lo que hicimos es fundamentalmente diferente.

51
00:02:42,570 --> 00:02:45,720
Entonces aquí ya sabemos que queremos un elemento span.

52
00:02:45,720 --> 00:02:48,420
simplemente aún no sabemos el contenido.

53
00:02:48,420 --> 00:02:51,810
Mientras estamos aquí, aparentemente tampoco lo sabemos todavía

54
00:02:51,810 --> 00:02:53,670
qué elemento queremos.

55
00:02:53,670 --> 00:02:57,300
Aunque en ambos casos estamos usando un lapso.

56
00:02:57,300 --> 00:03:00,180
Por eso creo que es mucho mejor hacerlo así.

57
00:03:00,180 --> 00:03:04,020
Entonces, para establecer condicionalmente el contenido de texto de un elemento

58
00:03:04,020 --> 00:03:07,170
En mi opinión, esto es mucho más limpio.

59
00:03:07,170 --> 00:03:10,833
Pero sólo como referencia, dejaré este aquí también.

60
00:03:11,760 --> 00:03:16,110
bueno. Y ahora, finalmente, en cuanto al nombre de la clase,

61
00:03:16,110 --> 00:03:18,660
cada vez que la pizza se agota,

62
00:03:18,660 --> 00:03:22,680
podemos agregar la clase agotada al LI,

63
00:03:22,680 --> 00:03:25,410
que luego lo atenuará.

64
00:03:25,410 --> 00:03:27,391
Déjame mostrarte eso.

65
00:03:27,391 --> 00:03:29,763
Simplemente puedes agregarlo a todos ellos.

66
00:03:31,110 --> 00:03:34,080
Y entonces verás que este es el resultado que buscamos,

67
00:03:34,080 --> 00:03:37,170
pero por supuesto solo queremos esta parte aquí

68
00:03:37,170 --> 00:03:40,083
cuando la pizza está realmente agotada.

69
00:03:40,920 --> 00:03:45,000
Entonces usemos nuevamente nuestro operador ternario para eso.

70
00:03:45,000 --> 00:03:46,890
Entonces así es como lo vamos a hacer.

71
00:03:46,890 --> 00:03:50,190
Ahora usaremos en lugar de una cadena normal,

72
00:03:50,190 --> 00:03:51,930
un literal de plantilla.

73
00:03:51,930 --> 00:03:55,440
Entonces eliminando la cita y eliminando esto.

74
00:03:55,440 --> 00:03:58,380
Pero ahora esto es en realidad JavaScript.

75
00:03:58,380 --> 00:04:01,260
Entonces un literal de plantilla es JavaScript

76
00:04:01,260 --> 00:04:04,023
por lo tanto, ingresemos al modo JavaScript.

77
00:04:04,950 --> 00:04:05,910
Guárdalo.

78
00:04:05,910 --> 00:04:09,150
Y por ahora, es exactamente lo que teníamos antes.

79
00:04:09,150 --> 00:04:13,620
Pero ahora, dentro de esta plantilla literal, podemos,

80
00:04:13,620 --> 00:04:16,380
bueno, ingrese el literal de la plantilla

81
00:04:16,380 --> 00:04:19,230
Modo JavaScript también de esta manera.

82
00:04:19,230 --> 00:04:22,260
Así que recuerda que en realidad es bastante similar.

83
00:04:22,260 --> 00:04:27,260
La idea es ingresar al modo JavaScript dentro de JSX, ¿verdad?

84
00:04:28,230 --> 00:04:31,020
La diferencia aquí es que en el literal de plantilla

85
00:04:31,020 --> 00:04:36,020
Para agregar algún fragmento de código también necesitamos este, ¿verdad?

86
00:04:36,780 --> 00:04:38,850
Entonces este signo de dólar.

87
00:04:38,850 --> 00:04:41,010
Pero aquí podemos una vez más

88
00:04:41,010 --> 00:04:44,073
haz uso de nuestro amigo el operador ternario.

89
00:04:44,940 --> 00:04:48,400
Entonces podemos decir objeto de pizza.

90
00:04:49,770 --> 00:04:50,733
agotado.

91
00:04:51,750 --> 00:04:56,713
En caso afirmativo, aquí danos la cadena de agotados.

92
00:04:58,110 --> 00:05:00,633
Pero si no, entonces sólo una cadena vacía.

93
00:05:01,740 --> 00:05:03,840
Y esto debería ser suficiente.

94
00:05:03,840 --> 00:05:06,450
Y sí, hermosa.

95
00:05:06,450 --> 00:05:09,153
Así que esto es exactamente lo que buscábamos.

96
00:05:10,320 --> 00:05:12,750
Entonces, recapitulemos por qué funcionó esto.

97
00:05:12,750 --> 00:05:14,880
Entonces tenemos nuestra plantilla literal,

98
00:05:14,880 --> 00:05:18,660
y luego aquí simplemente escribimos una expresión JavaScript.

99
00:05:18,660 --> 00:05:20,820
Y entonces con el operador ternario,

100
00:05:20,820 --> 00:05:24,630
comprobamos si esto existe y si es así.

101
00:05:24,630 --> 00:05:26,040
Entonces, si esto es cierto,

102
00:05:26,040 --> 00:05:29,760
entonces el resultado de este operador se agotará.

103
00:05:29,760 --> 00:05:33,360
Y entonces todo esto aquí se agota.

104
00:05:33,360 --> 00:05:36,240
Y luego la cuerda es exactamente la que teníamos antes.

105
00:05:36,240 --> 00:05:39,210
Así que el espacio para pizzas se agotó.

106
00:05:39,210 --> 00:05:40,920
Pero si esto es falso,

107
00:05:40,920 --> 00:05:43,350
entonces simplemente no devolveremos nada aquí.

108
00:05:43,350 --> 00:05:45,600
Entonces la cuerda es solo pizza,

109
00:05:45,600 --> 00:05:49,533
que es lo que tenemos aquí en todos estos casos.

110
00:05:51,030 --> 00:05:52,980
Entonces ves aquí, la clase es solo pizza.

111
00:05:54,210 --> 00:05:56,490
con el espacio por supuesto que tenemos aquí,

112
00:05:56,490 --> 00:05:58,770
pero eso no es ningún problema.

113
00:05:58,770 --> 00:06:01,830
Y aquí tenemos la pizza agotada.

114
00:06:01,830 --> 00:06:04,650
excelente. Así es como establecemos condicionalmente

115
00:06:04,650 --> 00:06:08,040
algunas clases de CSS en elementos.

116
00:06:08,040 --> 00:06:11,370
Entonces todo sin usar la propiedad sin clases.

117
00:06:11,370 --> 00:06:14,580
que tendríamos que usar en Vanilla JavaScript.

118
00:06:14,580 --> 00:06:18,630
Y para esto de aquí abajo, recuerda en Vanilla JavaScript

119
00:06:18,630 --> 00:06:21,120
Tendríamos que hacer alguna manipulación de daños.

120
00:06:21,120 --> 00:06:23,190
con la propiedad de contenido de texto

121
00:06:23,190 --> 00:06:26,310
o HTML interno o algo así.

122
00:06:26,310 --> 00:06:30,540
Pero aquí con la naturaleza declarativa de JSX y React

123
00:06:30,540 --> 00:06:33,210
todo se vuelve un poquito más fácil

124
00:06:33,210 --> 00:06:35,040
y es más agradable trabajar con él.

125
00:06:35,040 --> 00:06:37,620
Y ahora sólo un último detalle.

126
00:06:37,620 --> 00:06:41,310
Vayamos aquí a nuestra carpeta pública.

127
00:06:41,310 --> 00:06:43,590
Y en el índice punto HTML

128
00:06:43,590 --> 00:06:47,220
querremos establecer ahora el título del documento.

129
00:06:47,220 --> 00:06:50,730
Así que aquí tenemos Fast React Pizza Co.

130
00:06:50,730 --> 00:06:55,730
Pero aquí solo dice React Up predeterminado, lo cual es un poco feo.

131
00:06:55,950 --> 00:07:00,783
Entonces digamos Fast React Pizza Co.

132
00:07:02,040 --> 00:07:05,370
y eso es.

133
00:07:05,370 --> 00:07:08,460
Entonces, con esto, realmente terminamos nuestra aplicación.

134
00:07:08,460 --> 00:07:10,500
y nuestro primer proyecto.

135
00:07:10,500 --> 00:07:14,010
Así que felicidades por llegar hasta aquí.

136
00:07:14,010 --> 00:07:17,310
hasta el final de esta larga sección.

137
00:07:17,310 --> 00:07:19,560
Y ahora solo para terminar esta sección.

138
00:07:19,560 --> 00:07:22,080
tendremos una conferencia para repasar todo

139
00:07:22,080 --> 00:07:25,380
que simplemente aprendimos porque fue mucho.

140
00:07:25,380 --> 00:07:26,640
Y finalmente,

141
00:07:26,640 --> 00:07:29,700
hay otro desafío de codificación esperándote

142
00:07:29,700 --> 00:07:32,850
solo para que puedas practicar nuevamente lo que aprendiste aquí

143
00:07:32,850 --> 00:07:35,040
en las últimas conferencias.

144
00:07:35,040 --> 00:07:38,130
Pero antes de ir allí, te invito una vez más a

145
00:07:38,130 --> 00:07:41,760
consulte el código completo que escribimos aquí juntos

146
00:07:41,760 --> 00:07:44,820
ver cómo se relacionan todos los componentes

147
00:07:44,820 --> 00:07:46,680
y realmente mira de nuevo

148
00:07:46,680 --> 00:07:49,410
todo lo que aprendiste incluso antes de pagar

149
00:07:49,410 --> 00:07:52,200
esa conferencia resumida que va a seguir.

150
00:07:52,200 --> 00:07:53,970
Y después de eso, por supuesto,

151
00:07:53,970 --> 00:07:57,603
Mire esa conferencia para transmitir realmente el mensaje.