1
00:00:00,562 --> 00:00:03,600
Bienvenido al próximo desafío de codificación,

2
00:00:03,600 --> 00:00:06,873
que, como puedes imaginar, tiene que ver con el estado.

3
00:00:08,190 --> 00:00:10,620
Entonces, ¿qué quiero que construyas en este desafío?

4
00:00:10,620 --> 00:00:13,530
es este contador de fechas muy simple.

5
00:00:13,530 --> 00:00:15,300
Entonces aquí tenemos la fecha actual,

6
00:00:15,300 --> 00:00:18,000
pero luego, cuando hacemos clic aquí en el ícono más,

7
00:00:18,000 --> 00:00:20,460
ves que la cuenta aumenta a uno

8
00:00:20,460 --> 00:00:22,890
y luego dice dentro de un día,

9
00:00:22,890 --> 00:00:27,890
es el martes 22 de junio, mientras que antes eran las 21.

10
00:00:27,990 --> 00:00:29,700
Entonces, cuando sigamos subiendo,

11
00:00:29,700 --> 00:00:32,970
Básicamente sigue sumando este número de días.

12
00:00:32,970 --> 00:00:34,233
a la fecha actual.

13
00:00:35,160 --> 00:00:37,500
También podemos retroceder en el tiempo,

14
00:00:37,500 --> 00:00:40,923
Hace como seis días, era esta fecha.

15
00:00:42,030 --> 00:00:43,830
Entonces eso es lo más básico,

16
00:00:43,830 --> 00:00:46,800
pero aquí también podemos ajustar el paso.

17
00:00:46,800 --> 00:00:49,860
Así, por ejemplo, si el paso es cinco,

18
00:00:49,860 --> 00:00:52,110
y cada vez que hacemos clic en el botón más,

19
00:00:52,110 --> 00:00:54,000
aumenta en cinco.

20
00:00:54,000 --> 00:00:55,620
Así que ya no por uno.

21
00:00:55,620 --> 00:00:58,740
Entonces 10, 15, 20, y así sucesivamente.

22
00:00:58,740 --> 00:01:01,740
Y el cálculo aquí, por supuesto, sigue siendo el mismo.

23
00:01:02,820 --> 00:01:05,340
Entonces eso es lo que vamos a construir.

24
00:01:05,340 --> 00:01:09,570
Así que abre un nuevo cuadro de envío de código con reaccionar punto nuevo,

25
00:01:09,570 --> 00:01:11,280
o por supuesto, como siempre,

26
00:01:11,280 --> 00:01:14,940
También puedes crear este desafío en tu computadora local.

27
00:01:14,940 --> 00:01:18,000
Entonces, para eso, puedes crear una nueva aplicación React,

28
00:01:18,000 --> 00:01:19,800
tal como lo hemos estado haciendo antes.

29
00:01:21,090 --> 00:01:23,430
Ahora aquí, sólo para asegurarnos de que puedas ver,

30
00:01:23,430 --> 00:01:27,003
Haré esto un poco más grande, tal vez no tan grande.

31
00:01:28,080 --> 00:01:31,200
y luego empezaré a escribir

32
00:01:31,200 --> 00:01:32,763
un poco de código aquí.

33
00:01:33,870 --> 00:01:36,060
Así que sólo para mostrarte lo que realmente quiero,

34
00:01:36,060 --> 00:01:40,233
entonces quiero que crees esta función de contador,

35
00:01:42,750 --> 00:01:47,343
que por ahora solo devolverá prueba,

36
00:01:49,868 --> 00:01:51,450
y luego todo lo que queremos hacer

37
00:01:51,450 --> 00:01:53,823
es incluir ese contador aquí mismo.

38
00:01:58,170 --> 00:01:59,790
y eso es.

39
00:01:59,790 --> 00:02:01,650
Para que puedas dejar todo lo demás igual,

40
00:02:01,650 --> 00:02:04,530
Incluso los estilos, dejémoslos aquí.

41
00:02:04,530 --> 00:02:07,980
y solo concéntrate en esta funcionalidad de contador.

42
00:02:07,980 --> 00:02:10,260
Ahora esta parte aquí con las fechas.

43
00:02:10,260 --> 00:02:11,970
puede ser un poco complicado.

44
00:02:11,970 --> 00:02:14,370
Entonces, ¿en qué quiero que te concentres más?

45
00:02:14,370 --> 00:02:17,400
es en realidad la funcionalidad del contador aquí.

46
00:02:17,400 --> 00:02:19,440
Entonces, si las fechas son demasiado complicadas,

47
00:02:19,440 --> 00:02:21,420
Entonces déjalo hasta el final.

48
00:02:21,420 --> 00:02:25,260
y puedes imprimir el valor de conteo actual aquí abajo.

49
00:02:25,260 --> 00:02:27,540
O también puedes simplemente buscar en Google, por ejemplo,

50
00:02:27,540 --> 00:02:30,720
Script Java en los días hasta la fecha.

51
00:02:30,720 --> 00:02:32,610
Bien, entonces dejaré esto aquí.

52
00:02:32,610 --> 00:02:36,060
para que puedas ver lo que se supone que debes construir

53
00:02:36,060 --> 00:02:37,920
y luego te veré aquí en un minuto

54
00:02:37,920 --> 00:02:39,543
con mi solución.

55
00:02:41,520 --> 00:02:43,440
Muy bien, bienvenido de nuevo.

56
00:02:43,440 --> 00:02:46,740
Esperemos que hayas tenido algún éxito con esto.

57
00:02:46,740 --> 00:02:49,380
Así que en realidad hay muchas partes móviles aquí.

58
00:02:49,380 --> 00:02:52,950
con el manejo de los eventos y de todo el estado.

59
00:02:52,950 --> 00:02:56,220
Así que, con suerte, las conferencias que tuvimos anteriormente

60
00:02:56,220 --> 00:02:59,430
fueron suficientes para que entiendas cómo funciona esto,

61
00:02:59,430 --> 00:03:03,420
pero si no, realmente no hay ningún problema con eso.

62
00:03:03,420 --> 00:03:05,730
Así que espero que hayas hecho algo.

63
00:03:05,730 --> 00:03:07,860
aunque solo sea el contador muy simple.

64
00:03:07,860 --> 00:03:09,660
Eso también está bien.

65
00:03:09,660 --> 00:03:13,170
Pero de todos modos, sabemos que queremos este valor de recuento aquí.

66
00:03:13,170 --> 00:03:14,583
para actualizar en la interfaz de usuario.

67
00:03:15,450 --> 00:03:19,230
Entonces la vista de este componente debería actualizarse.

68
00:03:19,230 --> 00:03:21,960
cada vez que hacemos clic en uno de estos botones.

69
00:03:21,960 --> 00:03:25,833
Entonces esa es una buena señal de que necesitamos algún Estado, ¿verdad?

70
00:03:26,940 --> 00:03:29,763
Entonces, comencemos creando el estado de conteo.

71
00:03:30,930 --> 00:03:35,930
Entonces el recuento constante y el recuento establecido son estados de uso.

72
00:03:40,680 --> 00:03:41,580
Y ahora, por alguna razón,

73
00:03:41,580 --> 00:03:44,580
el estado de uso no se importó automáticamente,

74
00:03:44,580 --> 00:03:46,113
entonces tenemos que hacerlo a mano.

75
00:03:48,150 --> 00:03:50,793
De reaccionar.

76
00:03:51,900 --> 00:03:53,460
lindo.

77
00:03:53,460 --> 00:03:56,970
Y ahora, bueno, necesitamos mostrar este recuento en la pantalla.

78
00:03:56,970 --> 00:03:58,530
y luego necesitamos actualizarlo.

79
00:03:58,530 --> 00:04:00,960
Como siempre, los mismos tres pasos.

80
00:04:00,960 --> 00:04:03,630
Entonces, primero declarando la variable de estado,

81
00:04:03,630 --> 00:04:06,930
luego úselo en JSX y luego actualícelo.

82
00:04:06,930 --> 00:04:09,663
Entonces aquí nos falta el valor predeterminado de cero,

83
00:04:10,950 --> 00:04:15,950
y luego creemos un div con estos dos botones,

84
00:04:16,290 --> 00:04:18,723
y también con el valor del propio contador.

85
00:04:20,010 --> 00:04:21,933
Entonces, comenzando con ese valor, en realidad,

86
00:04:23,220 --> 00:04:28,183
Contemos y luego el valor de conteo.

87
00:04:29,370 --> 00:04:30,633
¿Oh, qué es eso?

88
00:04:34,650 --> 00:04:37,470
Entonces el conteo es cero, eso es correcto,

89
00:04:37,470 --> 00:04:39,690
y ahora necesitamos algunos botones.

90
00:04:39,690 --> 00:04:40,833
Entonces botón,

91
00:04:44,190 --> 00:04:46,530
y al hacer clic,

92
00:04:46,530 --> 00:04:49,050
y aquí en realidad no crearé

93
00:04:49,050 --> 00:04:51,120
la función del controlador de eventos por separado,

94
00:04:51,120 --> 00:04:53,970
pero en lugar de eso, aquí simplemente los definiré en línea.

95
00:04:53,970 --> 00:04:55,410
Pero si lo hicieras por separado,

96
00:04:55,410 --> 00:04:57,573
Por supuesto, eso no es ningún problema.

97
00:04:58,890 --> 00:05:00,900
Entonces, ¿qué queremos hacer aquí?

98
00:05:00,900 --> 00:05:03,213
Entonces este de aquí está disminuyendo el valor.

99
00:05:04,050 --> 00:05:08,070
Así que establecemos el recuento y queremos el nuevo recuento.

100
00:05:08,070 --> 00:05:10,950
para ser el recuento actual menos uno.

101
00:05:10,950 --> 00:05:14,700
Entonces, lo que eso significa es que queremos actualizar el estado del conteo.

102
00:05:14,700 --> 00:05:17,250
basado en el estado actual, y por lo tanto,

103
00:05:17,250 --> 00:05:20,550
aquí ahora deberíamos pasar una función de devolución de llamada.

104
00:05:20,550 --> 00:05:21,960
¿recuerda eso?

105
00:05:21,960 --> 00:05:25,080
Entonces escribiré C para contar.

106
00:05:25,080 --> 00:05:27,210
Entonces esto significa contar, y recuerda,

107
00:05:27,210 --> 00:05:30,807
es el valor actual del estado de conteo.

108
00:05:30,807 --> 00:05:34,623
Y entonces queremos devolver esa cuenta menos uno.

109
00:05:35,970 --> 00:05:37,803
Y eso ya debería ser todo.

110
00:05:39,060 --> 00:05:41,260
Usemos esto aquí para el signo menos.

111
00:05:42,360 --> 00:05:44,973
Muy bien, entonces copiemos y peguemos.

112
00:05:47,880 --> 00:05:51,633
Oh, en realidad cerremos esta barra lateral.

113
00:05:53,190 --> 00:05:56,403
Así que copie y pegue, y aquí, solo más uno.

114
00:05:57,420 --> 00:06:00,000
Así que guárdalo y,

115
00:06:00,000 --> 00:06:03,780
oh, ajustemos un poco la salida aquí,

116
00:06:03,780 --> 00:06:07,680
y hermoso, eso ya está funcionando.

117
00:06:07,680 --> 00:06:10,170
Entonces la vista de componentes se está actualizando.

118
00:06:10,170 --> 00:06:12,660
a medida que actualizamos esta fecha.

119
00:06:12,660 --> 00:06:13,493
excelente,

120
00:06:13,493 --> 00:06:17,433
Y ahora vamos a mostrar también la fecha ahí abajo.

121
00:06:18,630 --> 00:06:21,360
Entonces, para eso, creemos un párrafo.

122
00:06:21,360 --> 00:06:24,333
o primero, calculemos esa fecha.

123
00:06:25,620 --> 00:06:28,803
Entonces tal vez buscaste en Google cómo hacer esto, como te aconsejé.

124
00:06:30,810 --> 00:06:33,480
Así que definamos una variable llamada fecha.

125
00:06:33,480 --> 00:06:35,640
y luego nueva fecha,

126
00:06:35,640 --> 00:06:38,280
y por supuesto podrías dejarlo así

127
00:06:38,280 --> 00:06:40,740
o simplemente puedes pasar una cadena,

128
00:06:40,740 --> 00:06:44,460
por ejemplo, para definir cualquier otra fecha que desees,

129
00:06:44,460 --> 00:06:47,703
por ejemplo, 21 de junio de 2027.

130
00:06:48,943 --> 00:06:50,550
Así que sólo por diversión.

131
00:06:50,550 --> 00:06:53,283
Entonces esa no es la fecha de hoy, como puedes imaginar,

132
00:06:54,720 --> 00:06:58,770
pero de todos modos, ahora aquí podemos, en el objeto de fecha,

133
00:06:58,770 --> 00:07:00,930
Llame al método de fecha establecida.

134
00:07:00,930 --> 00:07:05,930
Y entonces aquí podemos hacer la fecha y obtener la fecha actual.

135
00:07:08,190 --> 00:07:09,393
Vaya, ¿qué es eso?

136
00:07:10,860 --> 00:07:14,670
Sí, punto de fecha, para obtener la fecha actual

137
00:07:14,670 --> 00:07:16,680
y luego agregando un valor.

138
00:07:16,680 --> 00:07:20,463
Entonces ese valor puede ser el recuento.

139
00:07:21,870 --> 00:07:24,720
Muy bien, ahora estamos usando nuestro recuento.

140
00:07:24,720 --> 00:07:28,470
para agregar ese recuento a la fecha actual, básicamente.

141
00:07:28,470 --> 00:07:31,323
Y eso es lo que podemos generar aquí abajo.

142
00:07:33,480 --> 00:07:36,960
Pero nuevamente, esta parte era algo opcional aquí, realmente

143
00:07:36,960 --> 00:07:39,300
esto no es lo que me preocupaba.

144
00:07:39,300 --> 00:07:41,973
Lo que importa es que acertaste en esta parte de la fecha.

145
00:07:42,990 --> 00:07:47,520
Entonces, pero de todos modos, ahora registremos la fecha.

146
00:07:47,520 --> 00:07:50,160
y luego conviértalo en una cadena agradable y legible.

147
00:07:50,160 --> 00:07:51,813
Así que hasta la fecha cadena.

148
00:07:53,460 --> 00:07:56,460
Ahora bien, aquí tenemos algunos problemas.

149
00:07:56,460 --> 00:07:58,920
y eso es porque, sí ahora mismo,

150
00:07:58,920 --> 00:08:02,250
o JSX tiene dos elementos de ruta.

151
00:08:02,250 --> 00:08:07,250
Eso es porque, por error, coloqué esto fuera del div,

152
00:08:07,650 --> 00:08:08,703
pero ahí vamos.

153
00:08:10,080 --> 00:08:12,870
Como ves, eso ya está funcionando.

154
00:08:12,870 --> 00:08:13,703
lindo.

155
00:08:13,703 --> 00:08:15,570
Ahora nos falta esa parte aquí.

156
00:08:15,570 --> 00:08:19,830
eso dice dentro de 30 días, por ejemplo,

157
00:08:19,830 --> 00:08:22,980
o hoy, o hace 10 días.

158
00:08:22,980 --> 00:08:24,633
Así que hagamos eso.

159
00:08:26,760 --> 00:08:31,760
Y para hacer esto, agreguemos quizás otro lapso.

160
00:08:32,160 --> 00:08:34,210
Envuelvamos este en un elemento span.

161
00:08:36,450 --> 00:08:38,790
y creemos un lapso.

162
00:08:38,790 --> 00:08:41,193
Entonces, solo para algún texto en línea,

163
00:08:42,060 --> 00:08:45,990
y ahora vamos a crear esa parte de la cadena.

164
00:08:45,990 --> 00:08:50,253
Entonces, si el conteo es cero, entonces es hoy.

165
00:08:51,780 --> 00:08:56,223
Entonces aquí podemos generar la cadena, hoy es.

166
00:08:57,810 --> 00:09:01,650
Y si no, por ahora no devolvamos nada,

167
00:09:01,650 --> 00:09:03,210
pero aquí tenemos un problema,

168
00:09:03,210 --> 00:09:05,373
eso es porque aquí necesitamos dos puntos.

169
00:09:06,570 --> 00:09:11,570
Muy bien, entonces el conteo no es cero en este momento, pero ahora lo es.

170
00:09:12,600 --> 00:09:15,390
Entonces hoy es esta fecha.

171
00:09:15,390 --> 00:09:18,150
Eso es correcto, pero ahora como alternativa aquí,

172
00:09:18,150 --> 00:09:22,320
También debemos tener en cuenta el pasado y el futuro.

173
00:09:22,320 --> 00:09:25,620
Entonces en realidad necesitamos dos valores diferentes más aquí.

174
00:09:25,620 --> 00:09:28,410
y aquí necesitamos otro operador ternario.

175
00:09:28,410 --> 00:09:32,100
Ahora usar ternarios de nido es bastante feo.

176
00:09:32,100 --> 00:09:34,290
y puede ser bastante ilegible,

177
00:09:34,290 --> 00:09:37,260
Por lo general, desaconsejo usar eso.

178
00:09:37,260 --> 00:09:40,503
pero bueno, rompamos esa regla.

179
00:09:41,550 --> 00:09:44,760
Básicamente aquí tenemos la rama else,

180
00:09:44,760 --> 00:09:49,350
y aquí podemos preguntar si el recuento es mayor que cero,

181
00:09:49,350 --> 00:09:53,403
entonces la cadena debería ser, usemos el literal de plantilla,

182
00:09:54,990 --> 00:09:59,480
entonces el conteo de días a partir de hoy es

183
00:10:01,140 --> 00:10:02,103
Y además,

184
00:10:08,370 --> 00:10:13,293
contar hace días fue.

185
00:10:15,240 --> 00:10:17,730
Así no, está bien.

186
00:10:17,730 --> 00:10:20,583
Así que más guapa se encargó de formatearlo por nosotros,

187
00:10:21,510 --> 00:10:23,973
para que sea al menos un poco más legible.

188
00:10:25,920 --> 00:10:30,743
Entonces eso funciona, cinco es, aquí nos falta el espacio,

189
00:10:32,310 --> 00:10:33,543
y ahora por el pasado.

190
00:10:34,680 --> 00:10:36,993
Entonces hace cuatro días menos fue,

191
00:10:38,130 --> 00:10:43,130
así que hagamos rápidamente un punto matemático absoluto aquí.

192
00:10:45,360 --> 00:10:47,430
Y sí, eso lo soluciona.

193
00:10:47,430 --> 00:10:50,580
Ahora tenemos este contador principal funcionando,

194
00:10:50,580 --> 00:10:52,890
Así que básicamente esta parte aquí está funcionando.

195
00:10:52,890 --> 00:10:54,640
y ahora preocupémonos del paso.

196
00:10:55,650 --> 00:10:58,113
Y el paso va a ser bastante similar.

197
00:11:00,780 --> 00:11:04,143
Entonces constante, paso y conjunto.

198
00:11:04,980 --> 00:11:09,980
Paso y aquí necesito aprender a escribir paso aparentemente,

199
00:11:10,200 --> 00:11:12,690
pero luego usa el estado nuevamente,

200
00:11:12,690 --> 00:11:15,150
y aquí el paso por defecto es uno.

201
00:11:15,150 --> 00:11:17,460
Entonces, porque de forma predeterminada, cuando hacemos clic aquí,

202
00:11:17,460 --> 00:11:20,253
solo queremos que el contador suba uno.

203
00:11:21,690 --> 00:11:25,740
Muy bien, ahora podemos simplemente copiar y pegar esto.

204
00:11:25,740 --> 00:11:27,753
porque se verá muy similar,

205
00:11:28,950 --> 00:11:33,950
pero aquí entonces tenemos el paso, y aquí también el paso,

206
00:11:35,280 --> 00:11:40,280
y aquí, también dicho paso en ambos lugares.

207
00:11:42,690 --> 00:11:46,740
Así que veamos, y sí, eso está funcionando.

208
00:11:46,740 --> 00:11:49,620
Sin embargo, por supuesto, si ahora hacemos clic aquí,

209
00:11:49,620 --> 00:11:52,320
entonces ese paso no se aplica aquí.

210
00:11:52,320 --> 00:11:56,463
Así que todavía estamos simplemente sumando uno o restando uno.

211
00:11:57,300 --> 00:12:00,690
Entonces, ¿cómo juntamos ahora estos dos?

212
00:12:00,690 --> 00:12:03,630
bueno, como acabo de decir, por defecto,

213
00:12:03,630 --> 00:12:06,480
acabábamos de restar o sumar uno,

214
00:12:06,480 --> 00:12:08,130
pero eso ya no es lo que queremos.

215
00:12:08,130 --> 00:12:11,733
En cambio, queremos sumar o restar el paso.

216
00:12:12,570 --> 00:12:14,373
Así que reemplace el que está aquí.

217
00:12:16,320 --> 00:12:19,360
paso, y

218
00:12:20,580 --> 00:12:22,893
sí, eso está funcionando.

219
00:12:25,470 --> 00:12:26,303
lindo.

220
00:12:27,600 --> 00:12:30,810
Y creo que aquí podemos incluso volvernos negativos.

221
00:12:30,810 --> 00:12:32,520
Tal vez deberíamos cambiar eso,

222
00:12:32,520 --> 00:12:34,890
pero no importa, es demasiado trabajo.

223
00:12:34,890 --> 00:12:36,510
Ahora, si sumamos tres,

224
00:12:36,510 --> 00:12:38,310
en realidad estamos yendo al pasado.

225
00:12:39,180 --> 00:12:40,950
Pero sí, eso no es problema.

226
00:12:40,950 --> 00:12:44,160
Genial, esto concluye este desafío.

227
00:12:44,160 --> 00:12:48,780
Funciona exactamente como nos habíamos propuesto construir.

228
00:12:48,780 --> 00:12:51,240
Espero que te hayas divertido un poco con esto.

229
00:12:51,240 --> 00:12:54,240
Ojalá tú también hayas tenido algún éxito.

230
00:12:54,240 --> 00:12:57,000
y entonces sí, sigamos en esta sección.

231
00:12:57,000 --> 00:13:00,120
y de hecho, en la próxima conferencia,

232
00:13:00,120 --> 00:13:03,870
Crear un proyecto nuevo, muy, muy bonito.

233
00:13:03,870 --> 00:13:06,333
Así que espero verte allí lo antes posible.