1
00:00:01,050 --> 00:00:03,600
Ahora solo por diversión quiero mostrarte

2
00:00:03,600 --> 00:00:07,680
cómo podemos escribir código React sin ninguna herramienta moderna

3
00:00:07,680 --> 00:00:09,420
y cualquier paso de construcción.

4
00:00:09,420 --> 00:00:12,870
Entonces, dentro de un archivo HTML normal.

5
00:00:12,870 --> 00:00:15,537
Entonces, esto es lo que yo llamo React puro.

6
00:00:15,537 --> 00:00:17,670
Y te mostrará por qué las herramientas

7
00:00:17,670 --> 00:00:20,613
de los que hablaremos a continuación son muy útiles.

8
00:00:22,050 --> 00:00:25,830
Entonces, para comenzar, creemos nuestra primera carpeta de proyecto.

9
00:00:25,830 --> 00:00:28,380
que estoy haciendo aquí mismo en el escritorio

10
00:00:28,380 --> 00:00:31,890
donde también tengo los archivos de GitHub que descargamos

11
00:00:31,890 --> 00:00:34,230
en la primera sección del curso.

12
00:00:34,230 --> 00:00:36,990
Pero, por supuesto, puedes hacerlo donde quieras.

13
00:00:36,990 --> 00:00:38,250
Y simplemente voy a llamar

14
00:00:38,250 --> 00:00:42,077
este primero, "01-pure-React".

15
00:00:44,625 --> 00:00:45,840
está bien.

16
00:00:45,840 --> 00:00:49,050
Y ahora todo lo que tenemos que hacer es abrir esta carpeta.

17
00:00:49,050 --> 00:00:51,870
como una carpeta de proyecto en VS Code.

18
00:00:51,870 --> 00:00:55,740
Y una forma de hacerlo es arrastrar y soltar esta carpeta.

19
00:00:55,740 --> 00:00:59,460
en el icono de VS Code aquí abajo.

20
00:00:59,460 --> 00:01:02,195
O, por supuesto, puedes abrir la carpeta del proyecto.

21
00:01:02,195 --> 00:01:06,360
aquí desde este menú o simplemente aquí.

22
00:01:06,360 --> 00:01:07,803
Así que aquí, abre la carpeta.

23
00:01:09,960 --> 00:01:12,660
Entonces, ahora mismo tenemos una carpeta vacía.

24
00:01:12,660 --> 00:01:17,400
Entonces, creemos index.HTML.

25
00:01:17,400 --> 00:01:21,420
Y para crear una estructura HTML vacía en VS Code,

26
00:01:21,420 --> 00:01:25,650
simplemente podemos escribir el signo de exclamación, presionar enter,

27
00:01:25,650 --> 00:01:28,683
y luego tenemos una estructura HTML vacía.

28
00:01:30,240 --> 00:01:35,070
Entonces, démosle un título: "¡Hola, reacciona!".

29
00:01:35,070 --> 00:01:37,380
Y luego aquí en el cuerpo, todo lo que haré por ahora

30
00:01:37,380 --> 00:01:41,940
es crear un div con el ID de "root".

31
00:01:41,940 --> 00:01:44,340
Y podría ser cualquier identificación aquí, por supuesto,

32
00:01:44,340 --> 00:01:47,670
pero root es el estándar para React.

33
00:01:47,670 --> 00:01:49,413
Y no colocaremos nada aquí.

34
00:01:50,370 --> 00:01:51,480
Entonces, guárdalo.

35
00:01:51,480 --> 00:01:52,470
Y tal vez te diste cuenta

36
00:01:52,470 --> 00:01:56,970
Qué bonito formateé automáticamente el código cuando lo guardé.

37
00:01:56,970 --> 00:02:00,450
Bien, ahora agreguemos React a este archivo.

38
00:02:00,450 --> 00:02:03,720
Y la forma en que lo hacemos cuando escribimos React puro

39
00:02:03,720 --> 00:02:08,340
es simplemente incluyendo la biblioteca React como script.

40
00:02:08,340 --> 00:02:11,520
Ahora, para obtener la URL de esos scripts,

41
00:02:11,520 --> 00:02:15,900
De hecho, podemos consultar la documentación oficial de React.

42
00:02:15,900 --> 00:02:19,290
Entonces, para hacer eso, vayamos a nuestro navegador.

43
00:02:19,290 --> 00:02:24,150
y luego echa un vistazo a React.dev.

44
00:02:24,150 --> 00:02:26,700
Entonces, ese es el sitio web oficial de React,

45
00:02:26,700 --> 00:02:30,330
y lo exploraremos un poco en un vídeo futuro.

46
00:02:30,330 --> 00:02:34,500
Pero por ahora, pasemos a esta parte de aprendizaje.

47
00:02:34,500 --> 00:02:38,343
Y luego aquí mismo, seleccionemos instalación.

48
00:02:39,570 --> 00:02:42,900
Entonces, justo en esta página, encontrará

49
00:02:42,900 --> 00:02:47,160
esta pequeña parte aquí que dice "Intenta reaccionar localmente".

50
00:02:47,160 --> 00:02:50,400
Y luego aquí, hagamos clic en este enlace aquí.

51
00:02:50,400 --> 00:02:53,517
que dice "Descargar esta página HTML".

52
00:02:54,540 --> 00:02:57,180
Ahora si por alguna razón ese enlace ahí

53
00:02:57,180 --> 00:02:59,970
ya no existe en el futuro,

54
00:02:59,970 --> 00:03:04,680
Entonces puedes intentar escribir estas dos cosas aquí a mano.

55
00:03:04,680 --> 00:03:07,110
porque son estos dos guiones

56
00:03:07,110 --> 00:03:11,220
que ahora vamos a agregar a nuestro archivo HTML.

57
00:03:11,220 --> 00:03:15,360
Ahora, está bien, volvamos a VS Code.

58
00:03:15,360 --> 00:03:18,420
y pégalos aquí mismo.

59
00:03:18,420 --> 00:03:21,030
Y con esto, hemos incluido React.

60
00:03:21,030 --> 00:03:24,390
en esto, digamos proyecto.

61
00:03:24,390 --> 00:03:28,500
Ahora, de nuevo, normalmente cuando escribimos React, no hacemos esto

62
00:03:28,500 --> 00:03:31,110
pero en su lugar utilizamos una herramienta de construcción moderna

63
00:03:31,110 --> 00:03:34,170
como los que vamos a hablar a continuación.

64
00:03:34,170 --> 00:03:36,390
Pero por ahora, lo estamos haciendo de forma pura.

65
00:03:36,390 --> 00:03:40,230
Para que veas por qué realmente necesitamos esas herramientas.

66
00:03:40,230 --> 00:03:43,890
Ahora, en caso de que se pregunte por qué tenemos dos bibliotecas aquí,

67
00:03:43,890 --> 00:03:45,900
es porque este primero aquí

68
00:03:45,900 --> 00:03:49,140
es básicamente la biblioteca central de React.

69
00:03:49,140 --> 00:03:52,740
Entonces, este es el que trabaja con componentes, estado,

70
00:03:52,740 --> 00:03:55,440
y realmente todo el material de React.

71
00:03:55,440 --> 00:03:57,120
Entonces, esta es básicamente la interfaz.

72
00:03:57,120 --> 00:03:59,910
de cómo interactuar con React.

73
00:03:59,910 --> 00:04:01,320
Y luego este otro de aquí.

74
00:04:01,320 --> 00:04:04,860
Entonces, React-dom es básicamente la capa de renderizado.

75
00:04:04,860 --> 00:04:08,250
que puede representar componentes de React en el dom.

76
00:04:08,250 --> 00:04:10,800
Y como queremos renderizar en el navegador,

77
00:04:10,800 --> 00:04:13,170
Necesitamos usar React-dom.

78
00:04:13,170 --> 00:04:16,080
Pero React en realidad se puede renderizar en otros entornos.

79
00:04:16,080 --> 00:04:20,520
por ejemplo, como aplicaciones nativas que utilizan React Native.

80
00:04:20,520 --> 00:04:24,810
Pero de todos modos, creemos ahora nuestro primer componente.

81
00:04:24,810 --> 00:04:28,920
Y, por supuesto, eso también debe suceder dentro de un guión.

82
00:04:28,920 --> 00:04:31,110
porque eso también es un JavaScript.

83
00:04:31,110 --> 00:04:33,120
Y así, después de estos dos guiones aquí

84
00:04:33,120 --> 00:04:35,122
donde incluimos la biblioteca React,

85
00:04:35,122 --> 00:04:38,633
abramos otro guión.

86
00:04:38,633 --> 00:04:42,214
Y luego allí podemos crear una función.

87
00:04:42,214 --> 00:04:46,200
y la llamaré "App", así como así.

88
00:04:46,200 --> 00:04:48,870
Entonces, recuerda desde la primera aplicación que creamos,

89
00:04:48,870 --> 00:04:51,240
que React se basa en componentes.

90
00:04:51,240 --> 00:04:53,401
Y un componente es básicamente solo una función.

91
00:04:53,401 --> 00:04:56,703
que comienza con una mayúscula como esta.

92
00:04:58,020 --> 00:04:59,520
Y ahora desde esta función aquí,

93
00:04:59,520 --> 00:05:03,330
podemos devolver lo que queramos ver en la interfaz de usuario.

94
00:05:03,330 --> 00:05:05,490
Ahora, en esa primera aplicación que creamos,

95
00:05:05,490 --> 00:05:07,590
devolvimos algo de código JSX.

96
00:05:07,590 --> 00:05:08,820
¿recuerda eso?

97
00:05:08,820 --> 00:05:11,250
Sin embargo, eso no va a funcionar aquí.

98
00:05:11,250 --> 00:05:13,980
porque bueno no tenemos las herramientas

99
00:05:13,980 --> 00:05:17,580
que puede convertir JSX nuevamente a JavaScript.

100
00:05:17,580 --> 00:05:21,153
Y aquí necesitamos usar la función de crear elemento.

101
00:05:22,950 --> 00:05:27,923
Entonces, hagamos "devolver React.createElement".

102
00:05:30,300 --> 00:05:33,750
Y luego simplemente el nombre del elemento HTML.

103
00:05:33,750 --> 00:05:35,400
Entonces, digamos que queremos el encabezado.

104
00:05:36,660 --> 00:05:40,230
Entonces, este objeto React aquí es el que viene.

105
00:05:40,230 --> 00:05:42,150
de este guión aquí mismo.

106
00:05:42,150 --> 00:05:45,630
Entonces, este script nos dará este objeto React.

107
00:05:45,630 --> 00:05:47,940
Y desde allí podemos usar

108
00:05:47,940 --> 00:05:50,160
este método de creación de elementos.

109
00:05:50,160 --> 00:05:52,620
Y si todo esto te resulta realmente confuso en este momento,

110
00:05:52,620 --> 00:05:54,090
Entonces no te preocupes.

111
00:05:54,090 --> 00:05:56,370
De nuevo, el objetivo aquí es realmente no

112
00:05:56,370 --> 00:05:59,280
para que entiendas React en este punto.

113
00:05:59,280 --> 00:06:01,110
Sólo estamos haciendo algunos experimentos.

114
00:06:01,110 --> 00:06:04,440
Y estoy echando un primer vistazo a React aquí.

115
00:06:04,440 --> 00:06:06,780
Pero todavía no lo estamos aprendiendo realmente.

116
00:06:06,780 --> 00:06:07,650
¿está bien?

117
00:06:07,650 --> 00:06:09,600
Entonces, realmente solo estoy tratando de demostrar aquí

118
00:06:09,600 --> 00:06:13,196
cómo escribimos React puro sin una herramienta de compilación.

119
00:06:13,196 --> 00:06:17,820
Pero de todos modos, ahora volvamos a esa carpeta aquí.

120
00:06:17,820 --> 00:06:21,850
y abra index.HTML en Google Chrome

121
00:06:23,310 --> 00:06:25,410
Sólo para ver qué pasa.

122
00:06:25,410 --> 00:06:26,913
Y vamos a inspeccionar.

123
00:06:28,590 --> 00:06:31,710
Y cierra esto.

124
00:06:31,710 --> 00:06:34,470
Lo haremos un poco más grande aquí para ti.

125
00:06:34,470 --> 00:06:35,760
Y esto es sólo para mostrarte

126
00:06:35,760 --> 00:06:38,970
que ahora mismo en realidad no pasó nada.

127
00:06:38,970 --> 00:06:41,760
Entonces, todavía solo tenemos este div raíz.

128
00:06:41,760 --> 00:06:43,680
y luego, por supuesto, nuestros guiones.

129
00:06:43,680 --> 00:06:46,140
Y entonces la razón por la cual ese encabezado que creamos

130
00:06:46,140 --> 00:06:49,590
no está aquí todavía es porque no le dijimos a React

131
00:06:49,590 --> 00:06:52,560
para representarlo en la página.

132
00:06:52,560 --> 00:06:55,860
Básicamente, para colocar ese encabezado en el dom.

133
00:06:55,860 --> 00:06:58,650
Y ahora regresemos y hagamos eso.

134
00:06:58,650 --> 00:07:00,960
Y hacemos esto aquí justo al final.

135
00:07:00,960 --> 00:07:02,523
Entonces después del componente.

136
00:07:05,040 --> 00:07:07,383
Entonces, creemos la llamada raíz.

137
00:07:08,490 --> 00:07:10,590
Y entonces aquí y ahora necesitamos

138
00:07:10,590 --> 00:07:14,220
esa biblioteca React-dom que mencioné antes.

139
00:07:14,220 --> 00:07:15,420
Entonces este de aquí.

140
00:07:15,420 --> 00:07:19,057
Entonces, desde React-dom, ahora hacemos "createRoot".

141
00:07:22,320 --> 00:07:24,060
Y ahora simplemente necesitamos seleccionar

142
00:07:24,060 --> 00:07:26,280
este elemento div aquí mismo.

143
00:07:26,280 --> 00:07:28,470
Entonces, este div aquí, este elemento

144
00:07:28,470 --> 00:07:30,450
se convertirá en la raíz de nuestra aplicación

145
00:07:30,450 --> 00:07:33,150
lo que significa que la solicitud será presentada

146
00:07:33,150 --> 00:07:35,340
dentro de este elemento.

147
00:07:35,340 --> 00:07:36,590
Entonces, básicamente aquí mismo.

148
00:07:37,890 --> 00:07:40,980
Entonces, simplemente seleccionemos eso

149
00:07:40,980 --> 00:07:43,983
con "document.getElementById"

150
00:07:44,910 --> 00:07:47,790
que es simplemente manipulación dom normal,

151
00:07:47,790 --> 00:07:51,000
o en este caso simplemente seleccionando elementos normales

152
00:07:51,000 --> 00:07:53,010
usando métodos dom.

153
00:07:53,010 --> 00:07:57,370
Entonces, creamos nuestra raíz y ahora podemos hacer "root.render".

154
00:08:00,090 --> 00:08:04,350
Y luego nuevamente "Aplicación React.createElement".

155
00:08:06,660 --> 00:08:10,440
Y aquí es donde entra en juego nuestro componente de aplicación.

156
00:08:10,440 --> 00:08:13,530
Entonces renderizamos básicamente creando un nuevo elemento.

157
00:08:13,530 --> 00:08:16,230
fuera de este componente de la aplicación.

158
00:08:16,230 --> 00:08:19,410
Y una vez más, por favor no memorices nada de esto.

159
00:08:19,410 --> 00:08:20,243
¿está bien?

160
00:08:20,243 --> 00:08:21,963
Esto es sólo para mostrártelo.

161
00:08:24,030 --> 00:08:26,790
Entonces, si quisieras, ni siquiera tendrías que escribir este código.

162
00:08:26,790 --> 00:08:29,190
Estaría perfectamente bien simplemente mirándome.

163
00:08:29,190 --> 00:08:31,590
Pero aun así creo que probablemente sea una buena idea.

164
00:08:31,590 --> 00:08:34,680
para empezar a escribir un poco de código.

165
00:08:34,680 --> 00:08:36,840
Pero de todos modos, cuando recargue esto ahora,

166
00:08:36,840 --> 00:08:39,303
deberíamos ver un elemento de encabezado aquí.

167
00:08:40,590 --> 00:08:43,383
Así que recuerda, está dentro de esta raíz.

168
00:08:45,000 --> 00:08:47,700
Y sí, ahí está.

169
00:08:47,700 --> 00:08:50,670
Ahora está vacío porque en realidad no lo hicimos.

170
00:08:50,670 --> 00:08:52,440
colocar cualquier contenido en él.

171
00:08:52,440 --> 00:08:55,800
Pero React representó este encabezado aquí.

172
00:08:55,800 --> 00:08:58,920
Entonces, este elemento de encabezado dentro de nuestro dom.

173
00:08:58,920 --> 00:09:02,100
Y ahora agreguemos algo allí.

174
00:09:02,100 --> 00:09:04,203
Ahora bien, la forma en que esto funciona es un poco confusa.

175
00:09:05,100 --> 00:09:06,720
Entonces, esta función de crear elemento

176
00:09:06,720 --> 00:09:10,170
no solo acepta el nombre del elemento HTML

177
00:09:10,170 --> 00:09:14,190
pero también los llamados props, que en este caso son nulos.

178
00:09:14,190 --> 00:09:18,150
Y luego como tercer argumento, los hijos de este elemento.

179
00:09:18,150 --> 00:09:21,510
Y en este caso, escribámoslo como una cadena.

180
00:09:21,510 --> 00:09:26,510
Hagamos "¡Hola Reaccionar!", guárdelo,

181
00:09:27,660 --> 00:09:28,743
y volvamos.

182
00:09:29,790 --> 00:09:33,840
Y sí, ahí vamos.

183
00:09:33,840 --> 00:09:34,860
hermoso.

184
00:09:34,860 --> 00:09:37,770
Así que ahora este "¡Hola, reacciona!" es básicamente una nota infantil

185
00:09:37,770 --> 00:09:39,633
de esta nota de encabezado aquí mismo.

186
00:09:40,800 --> 00:09:43,192
Pero volvamos atrás y sí, como mencioné,

187
00:09:43,192 --> 00:09:46,410
antes usábamos JSX para escribir esto.

188
00:09:46,410 --> 00:09:47,580
Y entonces no tendríamos que escribir

189
00:09:47,580 --> 00:09:49,770
esta cosa rara aquí.

190
00:09:49,770 --> 00:09:53,070
Básicamente lo escribiríamos como HTML.

191
00:09:53,070 --> 00:09:54,480
Pero eso no funciona aquí.

192
00:09:54,480 --> 00:09:58,500
Y esa es una razón más por la que no escribimos React puro.

193
00:09:58,500 --> 00:10:02,190
así en un entorno de desarrollo real.

194
00:10:02,190 --> 00:10:05,010
Pero de todos modos, aquí mismo en esta función,

195
00:10:05,010 --> 00:10:08,223
Por supuesto, podemos escribir cualquier lógica JavaScript normal.

196
00:10:09,150 --> 00:10:13,443
Entonces, por ejemplo, creemos una cadena de la hora actual.

197
00:10:14,430 --> 00:10:17,130
Entonces, esa es "nueva fecha",

198
00:10:17,130 --> 00:10:19,530
y por supuesto esto no tiene nada que ver con React,

199
00:10:20,696 --> 00:10:22,363
"toLocalTimeString".

200
00:10:24,900 --> 00:10:28,170
Y luego agreguemos eso aquí en la cadena.

201
00:10:28,170 --> 00:10:30,603
y podemos usar una plantilla literal para eso.

202
00:10:31,950 --> 00:10:34,650
Y en caso de que no estés familiarizado con eso por alguna razón

203
00:10:34,650 --> 00:10:37,890
ahí está la siguiente sección en la que explicaré

204
00:10:37,890 --> 00:10:40,743
todo el JavaScript esencial que necesitamos para React.

205
00:10:42,090 --> 00:10:46,050
Está bien, pero aquí, coloquemos ahora esta vez

206
00:10:46,050 --> 00:10:48,600
y digamos "es"

207
00:10:48,600 --> 00:10:50,880
y luego, sea cual sea el momento actual.

208
00:10:50,880 --> 00:10:53,430
Volvamos atrás y verás que siempre

209
00:10:53,430 --> 00:10:55,410
Tienes que recargar manualmente la página.

210
00:10:55,410 --> 00:10:57,510
Y claro, eso también desaparecerá.

211
00:10:57,510 --> 00:11:00,990
tan pronto como comencemos a utilizar algunas herramientas modernas.

212
00:11:00,990 --> 00:11:03,420
Pero de todos modos, aquí tenemos nuestro tiempo.

213
00:11:03,420 --> 00:11:06,120
Y como último detalle en esta aplicación.

214
00:11:06,120 --> 00:11:08,640
lo que quiero hacer es actualizar esto ahora

215
00:11:08,640 --> 00:11:10,890
cada segundo con la nueva hora

216
00:11:10,890 --> 00:11:14,553
lo que básicamente hará que esto funcione como un reloj.

217
00:11:16,380 --> 00:11:19,230
Entonces, regresemos y hagámoslo.

218
00:11:19,230 --> 00:11:21,990
Y para eso necesitamos un concepto de Estado.

219
00:11:21,990 --> 00:11:24,594
Quizás recuerdes la primera aplicación que creamos.

220
00:11:24,594 --> 00:11:27,450
ese estado es necesario siempre que queramos

221
00:11:27,450 --> 00:11:29,640
para actualizar algo en la pantalla.

222
00:11:29,640 --> 00:11:32,640
Pero, por supuesto, profundizaremos mucho en qué es el estado.

223
00:11:32,640 --> 00:11:35,490
y cómo funciona un poco más adelante en el curso.

224
00:11:35,490 --> 00:11:38,490
Por ahora, simplemente creemos un nuevo estado.

225
00:11:38,490 --> 00:11:40,740
Y entonces ya no necesitamos esto.

226
00:11:42,090 --> 00:11:45,840
Entonces, digamos "constante" y llamémoslo nuevamente "tiempo".

227
00:11:45,840 --> 00:11:48,900
y luego "setTime" que es una función

228
00:11:48,900 --> 00:11:52,530
con el cual podremos actualizar ese estado de tiempo.

229
00:11:52,530 --> 00:11:55,593
Entonces tenemos que decir "React.useState"

230
00:11:57,210 --> 00:12:00,450
y nuevamente el objeto React es ese objeto grande

231
00:12:00,450 --> 00:12:03,180
que obtuvimos aquí a partir de este guión.

232
00:12:03,180 --> 00:12:06,210
Y luego aquí necesitamos establecer el valor predeterminado.

233
00:12:06,210 --> 00:12:08,133
Y entonces eso será esto.

234
00:12:09,960 --> 00:12:12,180
Coloquémoslo aquí, guárdelo.

235
00:12:12,180 --> 00:12:15,450
y si actualizamos ahora, se verá exactamente igual,

236
00:12:15,450 --> 00:12:17,103
así que aún no hay ninguna actualización.

237
00:12:18,390 --> 00:12:21,603
Entonces, por supuesto, simplemente refleja la hora actual.

238
00:12:23,244 --> 00:12:24,630
Y está bien, entonces volvamos

239
00:12:24,630 --> 00:12:27,333
y básicamente hacer que se actualice cada segundo.

240
00:12:30,060 --> 00:12:33,386
Entonces, para eso, necesitamos algo llamado efecto.

241
00:12:33,386 --> 00:12:38,386
Entonces, "React.useEffect" y también lo hicimos en la primera aplicación.

242
00:12:42,480 --> 00:12:44,910
Y ahora aquí dentro de este efecto simplemente

243
00:12:44,910 --> 00:12:48,930
utilice la función JavaScript "setInterval".

244
00:12:48,930 --> 00:12:51,000
Entonces, esta no es una función de React.

245
00:12:51,000 --> 00:12:53,100
pero es simplemente una función de JavaScript

246
00:12:53,100 --> 00:12:55,710
que vamos a usar para configurar un temporizador

247
00:12:55,710 --> 00:13:00,300
que cada segundo actualizará este estado de tiempo aquí.

248
00:13:00,300 --> 00:13:03,280
Entonces, establecer el intervalo también necesita una función.

249
00:13:05,370 --> 00:13:07,200
y podríamos usar funciones de flecha aquí

250
00:13:07,200 --> 00:13:09,693
para hacerlo un poco más corto, pero no importa.

251
00:13:10,830 --> 00:13:14,490
Entonces, esta función debería ejecutarse cada mil milisegundos.

252
00:13:14,490 --> 00:13:16,020
Entonces, una vez por segundo.

253
00:13:16,020 --> 00:13:18,510
¿Y qué debería pasar cada vez?

254
00:13:18,510 --> 00:13:21,570
Entonces, cada vez que se ejecute esta función aquí

255
00:13:21,570 --> 00:13:23,553
es que se debe fijar el tiempo.

256
00:13:25,800 --> 00:13:28,650
Entonces, "setTime" y luego nuevamente esto

257
00:13:28,650 --> 00:13:32,283
porque esta siempre será la nueva hora actual.

258
00:13:33,810 --> 00:13:35,190
Entonces, pégalo aquí.

259
00:13:35,190 --> 00:13:39,900
Y ahora, finalmente aquí, necesitamos definir esta matriz vacía.

260
00:13:39,900 --> 00:13:41,490
Y todo esto tendrá sentido

261
00:13:41,490 --> 00:13:44,670
una vez que empecemos a aprender sobre los efectos.

262
00:13:44,670 --> 00:13:47,250
Pero por ahora, simplemente copie el código así.

263
00:13:47,250 --> 00:13:49,800
Y esto ya debería funcionar.

264
00:13:49,800 --> 00:13:51,183
Entonces, veámoslo.

265
00:13:52,110 --> 00:13:55,260
Por supuesto, debemos actualizar nuevamente manualmente.

266
00:13:55,260 --> 00:13:58,470
Y sí, hermosa.

267
00:13:58,470 --> 00:14:03,300
Entonces, tenemos un reloj en funcionamiento que codificamos solo con React.

268
00:14:03,300 --> 00:14:05,670
Puedes ver aquí abajo que el dom está realmente actualizado.

269
00:14:05,670 --> 00:14:08,100
en este lugar una vez cada segundo.

270
00:14:08,100 --> 00:14:10,443
Y ese es el trabajo de React.

271
00:14:11,520 --> 00:14:12,660
lindo.

272
00:14:12,660 --> 00:14:15,990
Ahora bien, esto, por supuesto, es muy básico.

273
00:14:15,990 --> 00:14:19,680
Y sí, como dije, esto realmente, realmente no

274
00:14:19,680 --> 00:14:22,770
cómo usamos React en el mundo real.

275
00:14:22,770 --> 00:14:24,510
Entonces, no tenemos módulos aquí.

276
00:14:24,510 --> 00:14:27,600
No tenemos forma de convertir JSX.

277
00:14:27,600 --> 00:14:29,580
No tenemos servidor HTTP

278
00:14:29,580 --> 00:14:33,390
que recarga automáticamente la aplicación y así sucesivamente.

279
00:14:33,390 --> 00:14:36,360
Pero repito, sigo creyendo que fue bastante útil.

280
00:14:36,360 --> 00:14:40,484
Para explorar brevemente este React puro en esta conferencia.

281
00:14:40,484 --> 00:14:43,140
Pero claro, ahora toca seguir adelante.

282
00:14:43,140 --> 00:14:46,443
a una configuración más robusta y del mundo real.