1
00:00:01,140 --> 00:00:01,973
de aquí en adelante,

2
00:00:01,973 --> 00:00:04,560
Comenzarás a codificar en tu propia computadora.

3
00:00:04,560 --> 00:00:08,340
y está prácticamente garantizado que se producirán errores

4
00:00:08,340 --> 00:00:11,100
y que algunas cosas simplemente no funcionarán.

5
00:00:11,100 --> 00:00:13,290
Y así, desde el principio,

6
00:00:13,290 --> 00:00:15,330
Quiero mostrarte algunas técnicas.

7
00:00:15,330 --> 00:00:18,450
para hacer frente a estos errores y problemas.

8
00:00:18,450 --> 00:00:21,390
Entonces esta es una conferencia realmente importante,

9
00:00:21,390 --> 00:00:23,073
así que no te lo saltes.

10
00:00:24,570 --> 00:00:28,260
Entonces digamos que estás haciendo algún cambio aquí en tu código.

11
00:00:28,260 --> 00:00:31,350
y guárdelo, y luego querrá ver el resultado.

12
00:00:31,350 --> 00:00:32,940
Pero imagina que por alguna razón,

13
00:00:32,940 --> 00:00:35,700
su página no se actualizó aquí.

14
00:00:35,700 --> 00:00:37,380
¿Entonces, Qué haces?

15
00:00:37,380 --> 00:00:40,590
Entonces, cuando suceda, no entre en pánico, sino más bien,

16
00:00:40,590 --> 00:00:44,130
Pruebe algunas soluciones, que le contaré ahora.

17
00:00:44,130 --> 00:00:46,500
Y lo primero es asegurarse

18
00:00:46,500 --> 00:00:49,500
que la aplicación realmente se está ejecutando.

19
00:00:49,500 --> 00:00:50,700
Y créeme o no

20
00:00:50,700 --> 00:00:53,010
De hecho, esto me ha pasado antes.

21
00:00:53,010 --> 00:00:55,170
Entonces pensé que la aplicación debería estar ejecutándose.

22
00:00:55,170 --> 00:00:57,930
y estaba haciendo algunas actualizaciones al código,

23
00:00:57,930 --> 00:00:59,250
cambiando algo,

24
00:00:59,250 --> 00:01:02,400
y me preguntaba por qué la aplicación no se recargaba.

25
00:01:02,400 --> 00:01:03,570
Entonces, en algún momento,

26
00:01:03,570 --> 00:01:05,760
Me di cuenta de que, bueno,

27
00:01:05,760 --> 00:01:08,160
De hecho, ni siquiera había iniciado la aplicación.

28
00:01:08,160 --> 00:01:11,490
Y esto es realmente algo que puede suceder.

29
00:01:11,490 --> 00:01:14,700
Entonces, si no tienes la aplicación ejecutándose, por supuesto,

30
00:01:14,700 --> 00:01:19,020
Entonces, si no usaste "npm start" como te mostré antes,

31
00:01:19,020 --> 00:01:23,250
Entonces, por supuesto, tu aplicación no puede recargarse en el navegador.

32
00:01:23,250 --> 00:01:25,950
Pero si estás seguro de que realmente se está ejecutando

33
00:01:25,950 --> 00:01:27,450
pero aún no se actualiza,

34
00:01:27,450 --> 00:01:31,653
entonces una solución puede ser detener la aplicación y reiniciarla.

35
00:01:32,640 --> 00:01:35,220
Así que aquí está la pestaña en la terminal.

36
00:01:35,220 --> 00:01:37,620
donde actualmente tengo la aplicación ejecutándose.

37
00:01:37,620 --> 00:01:41,283
Y para detenerlo usamos Control + C.

38
00:01:42,120 --> 00:01:44,010
Entonces, en Mac, eso es Control + C.

39
00:01:44,010 --> 00:01:47,100
y en Windows también es solo Control + C.

40
00:01:47,100 --> 00:01:49,320
Luego en Windows creo que podría preguntarte

41
00:01:49,320 --> 00:01:50,730
si realmente quieres parar

42
00:01:50,730 --> 00:01:53,730
y luego puedes simplemente escribir 'Y' y presionar enter.

43
00:01:53,730 --> 00:01:57,600
Entonces con esto lo tienes detenido y luego puedes reiniciar.

44
00:01:57,600 --> 00:02:00,873
Entonces eso es nuevamente "npm start"

45
00:02:01,830 --> 00:02:04,030
que luego debería abrir una nueva pestaña

46
00:02:05,430 --> 00:02:07,170
y sí, ahí vamos.

47
00:02:07,170 --> 00:02:08,610
y entonces

48
00:02:08,610 --> 00:02:09,873
sí, aquí está.

49
00:02:12,150 --> 00:02:13,410
Y si cambio algo ahora

50
00:02:13,410 --> 00:02:16,590
entonces debería reflejarse inmediatamente.

51
00:02:16,590 --> 00:02:18,210
Así que ahí está.

52
00:02:18,210 --> 00:02:20,820
Y en realidad es más común de lo que piensas.

53
00:02:20,820 --> 00:02:23,310
que tienes que hacer este tipo de cosas.

54
00:02:23,310 --> 00:02:25,260
Y es por eso que realmente quería

55
00:02:25,260 --> 00:02:27,810
incluir esta conferencia desde el principio.

56
00:02:27,810 --> 00:02:29,490
Y lo que también es bastante común

57
00:02:29,490 --> 00:02:31,620
es que a veces todo lo que tienes que hacer

58
00:02:31,620 --> 00:02:34,410
es hacer una recarga completa aquí en el navegador.

59
00:02:34,410 --> 00:02:36,570
Así que simplemente haz clic en este botón de recarga.

60
00:02:36,570 --> 00:02:38,880
porque esta recarga automática,

61
00:02:38,880 --> 00:02:42,870
por lo que el reemplazo del módulo en caliente realmente se rompe todo el tiempo

62
00:02:42,870 --> 00:02:44,070
por alguna razón.

63
00:02:44,070 --> 00:02:45,720
Y entonces una de las soluciones.

64
00:02:45,720 --> 00:02:48,450
es simplemente recargar el navegador.

65
00:02:48,450 --> 00:02:50,400
Ahora otro buen consejo que puedo darte.

66
00:02:50,400 --> 00:02:53,880
es mantener siempre la terminal abierta aquí en todo momento.

67
00:02:53,880 --> 00:02:55,690
Y lo mismo aquí para las herramientas de desarrollo.

68
00:02:57,480 --> 00:02:58,680
en el navegador.

69
00:02:58,680 --> 00:03:00,450
Bueno, no lo es...

70
00:03:00,450 --> 00:03:05,193
Entonces, inspeccionando, y aquí eso es demasiado grande.

71
00:03:06,300 --> 00:03:09,270
Sí, entonces aquí, con la consola abierta.

72
00:03:09,270 --> 00:03:11,850
También hay algo llamado herramientas de desarrollo de React.

73
00:03:11,850 --> 00:03:14,200
pero hablaremos de eso un poco más tarde.

74
00:03:15,090 --> 00:03:16,980
Entonces es bueno mantenerlos abiertos.

75
00:03:16,980 --> 00:03:20,070
porque entonces en caso de que haya algunos errores inesperados

76
00:03:20,070 --> 00:03:24,000
Aparecerán aquí en esta consola y también aquí abajo.

77
00:03:24,000 --> 00:03:25,980
Y también si tienes esto abierto,

78
00:03:25,980 --> 00:03:29,280
Siempre puedes estar seguro de que la aplicación se está ejecutando.

79
00:03:29,280 --> 00:03:31,560
Tal vez pueda hacerlo un poco más pequeño.

80
00:03:31,560 --> 00:03:35,130
porque, bueno, la ventana aquí ya es muy pequeña,

81
00:03:35,130 --> 00:03:38,160
de lo contrario, casi no podremos ver nuestro código.

82
00:03:38,160 --> 00:03:41,220
Ahora, antes estaba hablando de mensajes de error.

83
00:03:41,220 --> 00:03:45,060
y por eso a veces aparecen cuando haces algo mal.

84
00:03:45,060 --> 00:03:49,260
Entonces Create-React-App en realidad tiene algo interno

85
00:03:49,260 --> 00:03:53,760
que mostrará automáticamente los errores aquí en la parte superior.

86
00:03:53,760 --> 00:03:55,650
Así como arriba en la ventana,

87
00:03:55,650 --> 00:03:59,103
y también todos los de aquí. Te lo mostramos.

88
00:03:59,940 --> 00:04:02,910
Así que escribiré algo aquí.

89
00:04:02,910 --> 00:04:05,130
lo que creará un error.

90
00:04:05,130 --> 00:04:08,250
Y efectivamente tenemos el error aquí.

91
00:04:08,250 --> 00:04:09,750
Bueno, en realidad no aquí.

92
00:04:09,750 --> 00:04:12,900
pero a veces aparecen errores importantes aquí.

93
00:04:12,900 --> 00:04:15,540
Pero tenemos esta superposición en toda la aplicación.

94
00:04:15,540 --> 00:04:18,330
lo que nos da este mensaje de error.

95
00:04:18,330 --> 00:04:20,430
Entonces es una buena idea

96
00:04:20,430 --> 00:04:22,260
echa un vistazo a este mensaje de error

97
00:04:22,260 --> 00:04:26,100
y tal vez intente comprender qué salió mal exactamente.

98
00:04:26,100 --> 00:04:28,860
Por lo general, esta primera parte aquí no es realmente importante.

99
00:04:28,860 --> 00:04:31,830
pero aquí nos dice "elementos JSX adyacentes

100
00:04:31,830 --> 00:04:34,470
debe estar envuelto en una etiqueta adjunta.

101
00:04:34,470 --> 00:04:37,230
¿Querías un fragmento JSX?"

102
00:04:37,230 --> 00:04:39,570
Y tal vez si realmente no entiendes esto,

103
00:04:39,570 --> 00:04:41,550
puedes simplemente tomar esto, copiarlo,

104
00:04:41,550 --> 00:04:43,980
abre tu nueva pestaña y búscala en Google.

105
00:04:43,980 --> 00:04:47,580
Y este es ahora el poder de la enorme comunidad de React.

106
00:04:47,580 --> 00:04:50,580
porque cientos, si no miles, de personas

107
00:04:50,580 --> 00:04:54,690
antes de haber tenido el mismo problema y haberlo buscado en Google,

108
00:04:54,690 --> 00:04:58,350
o me ha gustado hacer una pregunta sobre Stack Overflow.

109
00:04:58,350 --> 00:05:00,693
Y entonces encontrarás tu respuesta allí.

110
00:05:02,520 --> 00:05:05,883
Éste es un poco más viejo, como lo vi antes.

111
00:05:06,830 --> 00:05:08,340
Entonces en

112
00:05:08,340 --> 00:05:09,173
2016.

113
00:05:09,173 --> 00:05:13,080
Sí, normalmente deberías encontrar algo un poco más reciente.

114
00:05:13,080 --> 00:05:14,973
como este aquí de 2020.

115
00:05:16,020 --> 00:05:17,730
Pero sí, entonces aquí no lo estamos intentando.

116
00:05:17,730 --> 00:05:19,350
para resolver un problema específico.

117
00:05:19,350 --> 00:05:22,770
Solo estaba mencionando que muchas veces es una buena idea.

118
00:05:22,770 --> 00:05:26,250
para buscar en Google estos mensajes de error aquí mismo.

119
00:05:26,250 --> 00:05:28,740
Entonces, en este caso, realmente no está permitido.

120
00:05:28,740 --> 00:05:31,380
para devolver más de un elemento.

121
00:05:31,380 --> 00:05:34,110
Así que aquí estamos devolviendo el h1 y el p.

122
00:05:34,110 --> 00:05:37,890
y eso no está permitido en React, así que simplemente elimínelo

123
00:05:37,890 --> 00:05:40,680
y luego el error desaparecerá.

124
00:05:40,680 --> 00:05:45,090
Otro consejo importante es trabajar siempre con ESLint.

125
00:05:45,090 --> 00:05:48,900
Entonces ESLint está habilitado de forma predeterminada.

126
00:05:48,900 --> 00:05:50,700
Por ejemplo, si haces esto,

127
00:05:50,700 --> 00:05:54,360
como constante x = 'jonas'

128
00:05:54,360 --> 00:05:55,590
y dale un guardado,

129
00:05:55,590 --> 00:05:58,140
Entonces inmediatamente aparece esta advertencia aquí.

130
00:05:58,140 --> 00:06:00,900
Entonces puedes desplazarte y te avisará.

131
00:06:00,900 --> 00:06:04,440
que x se declara, pero su valor nunca se lee.

132
00:06:04,440 --> 00:06:06,990
Y este es sólo uno de los innumerables ejemplos.

133
00:06:06,990 --> 00:06:10,200
y situaciones en las que ESLint puede advertirle

134
00:06:10,200 --> 00:06:11,700
que estás a punto de hacer algo

135
00:06:11,700 --> 00:06:13,080
que se supone que no debes hacerlo.

136
00:06:13,080 --> 00:06:16,560
Porque, si tienes una variable que no estás usando,

137
00:06:16,560 --> 00:06:18,540
significa que probablemente en otro lugar

138
00:06:18,540 --> 00:06:20,430
declaraste la variable incorrecta

139
00:06:20,430 --> 00:06:22,113
que en realidad no quisiste,

140
00:06:23,280 --> 00:06:24,870
¿bien?

141
00:06:24,870 --> 00:06:26,910
Y por cierto, estos problemas,

142
00:06:26,910 --> 00:06:30,360
También aparecen aquí abajo en esta pestaña Problemas.

143
00:06:30,360 --> 00:06:32,790
Entonces esto también es muy útil aquí abajo.

144
00:06:32,790 --> 00:06:35,160
Entonces, siempre que tengas algún problema como este

145
00:06:35,160 --> 00:06:37,890
Entonces estas líneas amarillas debajo de parte de tu código,

146
00:06:37,890 --> 00:06:40,713
Probablemente deberías comprobar lo que está pasando allí.

147
00:06:42,090 --> 00:06:47,090
Ahora hablando aquí sobre estas pestañas aquí abajo

148
00:06:47,250 --> 00:06:50,010
a veces la extensión Prettier deja de funcionar

149
00:06:50,010 --> 00:06:51,030
por alguna razón.

150
00:06:51,030 --> 00:06:52,140
Y cuando eso sucede

151
00:06:52,140 --> 00:06:55,830
Es una buena idea venir aquí a esta pestaña Salida.

152
00:06:55,830 --> 00:06:57,660
Y luego aquí puedes seleccionar

153
00:06:57,660 --> 00:07:01,590
uno de estos procesos que se ejecuta dentro de su código VS.

154
00:07:01,590 --> 00:07:04,503
Por ejemplo, como decía, Más Bonita.

155
00:07:06,450 --> 00:07:11,010
Aquí parece que todo funciona bien.

156
00:07:11,010 --> 00:07:13,470
pero a veces te mostrará un error aquí

157
00:07:13,470 --> 00:07:15,510
y luego puedes intentar arreglar eso.

158
00:07:15,510 --> 00:07:17,940
Y lo mismo ocurre con ESLint.

159
00:07:17,940 --> 00:07:19,590
Entonces, si notas que ESLint

160
00:07:19,590 --> 00:07:21,540
por alguna razón dejó de funcionar,

161
00:07:21,540 --> 00:07:24,573
Puedes venir aquí y comprobar si hay algún problema.

162
00:07:26,880 --> 00:07:29,680
Así que aquí incluso parece que hay algún problema.

163
00:07:30,630 --> 00:07:33,873
Sí, hay un error aquí, pero bueno, todavía funciona.

164
00:07:35,230 --> 00:07:38,030
Entonces sí, no necesitamos preocuparnos por eso en este caso.

165
00:07:38,970 --> 00:07:41,430
¿bueno? Pero volvamos a nuestra terminal,

166
00:07:41,430 --> 00:07:44,523
que es el que queremos abierto la mayor parte del tiempo.

167
00:07:45,930 --> 00:07:48,930
Entonces, si todo parece correcto en tu código

168
00:07:48,930 --> 00:07:51,540
y si hicieras todo lo que te dije

169
00:07:51,540 --> 00:07:53,820
pero aún así tu código no funciona,

170
00:07:53,820 --> 00:07:57,180
probablemente significa que tienes algún error en tu código

171
00:07:57,180 --> 00:07:59,190
porque es diferente a aquel

172
00:07:59,190 --> 00:08:00,780
que os muestro en el vídeo.

173
00:08:00,780 --> 00:08:03,240
Y entonces, en ese caso, lo mejor que se puede hacer

174
00:08:03,240 --> 00:08:07,470
es abrir el código final para cada uno de los proyectos,

175
00:08:07,470 --> 00:08:10,200
entonces el que descargamos al principio

176
00:08:10,200 --> 00:08:14,220
y luego simplemente intenta compararlo con mi código.

177
00:08:14,220 --> 00:08:16,590
Y hacerlo debería permitirle

178
00:08:16,590 --> 00:08:19,620
para encontrar el error que tienes en tu código.

179
00:08:19,620 --> 00:08:20,940
Y hablando de errores,

180
00:08:20,940 --> 00:08:25,940
De hecho, introduje un error aquí en esta parte de renderizado.

181
00:08:27,120 --> 00:08:30,360
Entonces, la forma en que renderizamos antes de React 18

182
00:08:30,360 --> 00:08:32,850
recuerda es este React.render,

183
00:08:32,850 --> 00:08:34,740
pero en ninguna parte estamos contando aquí

184
00:08:34,740 --> 00:08:38,250
dónde renderizar el componente de la aplicación.

185
00:08:38,250 --> 00:08:42,300
Y nuevamente, necesitamos seleccionar ese elemento raíz.

186
00:08:42,300 --> 00:08:45,273
y de hecho lo coloco aquí como segundo argumento.

187
00:08:46,560 --> 00:08:48,750
Entonces, solo para arreglar esto aquí,

188
00:08:48,750 --> 00:08:51,690
pero de nuevo no vas a escribir esto tú mismo

189
00:08:51,690 --> 00:08:55,350
pero tal vez trabajes en una base de código más antigua en algún momento,

190
00:08:55,350 --> 00:08:57,810
que utiliza una versión anterior de React.

191
00:08:57,810 --> 00:09:01,350
Y así es como se representará ese proyecto.

192
00:09:01,350 --> 00:09:04,710
el elemento raíz en su aplicación.

193
00:09:04,710 --> 00:09:05,543
y por cierto,

194
00:09:05,543 --> 00:09:08,880
Puedes ver qué versión de React estás usando aquí.

195
00:09:08,880 --> 00:09:10,470
en la matriz de dependencias.

196
00:09:10,470 --> 00:09:14,520
Y en este caso, estamos usando React 18.2.

197
00:09:14,520 --> 00:09:15,510
O al menos lo soy.

198
00:09:15,510 --> 00:09:17,970
Entonces, si estás viendo hasta aquí en el futuro

199
00:09:17,970 --> 00:09:21,390
Entonces probablemente ya haya salido alguna otra versión.

200
00:09:21,390 --> 00:09:23,940
Pero todo esto, de lo que estamos hablando aquí

201
00:09:23,940 --> 00:09:24,773
por supuesto,

202
00:09:24,773 --> 00:09:29,310
Se aplicará probablemente a la mayoría de las versiones futuras.

203
00:09:29,310 --> 00:09:31,320
Y eso es todo.

204
00:09:31,320 --> 00:09:34,230
Esa es la lista de consejos que tengo para ti.

205
00:09:34,230 --> 00:09:38,400
para afrontar problemas que tarde o temprano llegarán

206
00:09:38,400 --> 00:09:41,610
a medida que comienzas a escribir tus propias aplicaciones React,

207
00:09:41,610 --> 00:09:43,743
e incluso mientras sigues este curso.