1
00:00:01,050 --> 00:00:02,610
Ahora antes de comenzar a codificar

2
00:00:02,610 --> 00:00:05,670
y aprenda todo sobre React, configuremos rápidamente

3
00:00:05,670 --> 00:00:08,553
nuestro entorno de desarrollo en esta conferencia.

4
00:00:09,960 --> 00:00:12,450
Ahora, dado que estás tomando este curso, asumo

5
00:00:12,450 --> 00:00:15,030
que ya hiciste algo de codificación antes

6
00:00:15,030 --> 00:00:17,940
y por tanto, ya tendrás algún editor de código

7
00:00:17,940 --> 00:00:20,100
instalado en su computadora.

8
00:00:20,100 --> 00:00:24,480
Y si ese editor de código es VS Code, entonces felicidades.

9
00:00:24,480 --> 00:00:28,290
ya estás usando el mejor editor de código que existe.

10
00:00:28,290 --> 00:00:31,110
Pero si estás usando algún otro editor de código

11
00:00:31,110 --> 00:00:35,460
entonces te recomiendo que descargues VS Code simplemente

12
00:00:35,460 --> 00:00:38,160
descargando el instalador desde aquí

13
00:00:38,160 --> 00:00:41,940
y luego instalarlo como cualquier otra aplicación.

14
00:00:41,940 --> 00:00:44,910
Y al hacerlo, podrás personalizar el editor.

15
00:00:44,910 --> 00:00:46,800
tal como lo hago en este curso,

16
00:00:46,800 --> 00:00:48,660
lo que lo hará un poco más fácil

17
00:00:48,660 --> 00:00:50,880
para que sigas todo.

18
00:00:50,880 --> 00:00:54,450
A continuación, por supuesto, necesitamos un navegador web para ejecutar

19
00:00:54,450 --> 00:00:57,030
las aplicaciones que vamos a construir

20
00:00:57,030 --> 00:00:59,250
y estoy usando Google Chrome para eso.

21
00:00:59,250 --> 00:01:02,364
Por eso te recomiendo encarecidamente que utilices el mismo navegador.

22
00:01:02,364 --> 00:01:05,370
para que nuestros resultados se vean iguales.

23
00:01:05,370 --> 00:01:06,997
Así que si aún no lo tienes instalado

24
00:01:06,997 --> 00:01:10,410
Entonces asegúrate de hacerlo ahora mismo.

25
00:01:10,410 --> 00:01:11,243
y finalmente,

26
00:01:11,243 --> 00:01:15,570
Necesitaremos instalar Node.js en nuestro sistema.

27
00:01:15,570 --> 00:01:19,380
Y esto no se debe a que vayamos a desarrollar algo en Node.js.

28
00:01:19,380 --> 00:01:20,213
pero es simplemente

29
00:01:20,213 --> 00:01:24,450
porque todas las herramientas que usaremos se ejecutan en Node.js

30
00:01:24,450 --> 00:01:28,620
y es importante que utilices al menos la versión 18 de Node.

31
00:01:28,620 --> 00:01:29,970
Y entonces, si no estás seguro

32
00:01:29,970 --> 00:01:33,000
sobre qué versión está ejecutando actualmente o

33
00:01:33,000 --> 00:01:35,910
Si quizás nunca antes instalaste Node.js,

34
00:01:35,910 --> 00:01:38,130
Entonces continúa y descárgalo aquí.

35
00:01:38,130 --> 00:01:40,080
desde este primer botón.

36
00:01:40,080 --> 00:01:42,376
Y no importa si es el Nodo 18

37
00:01:42,376 --> 00:01:47,376
o 20 o 22 o lo que sea porque, por supuesto, esta versión de Node

38
00:01:48,240 --> 00:01:50,160
cambiará en el futuro.

39
00:01:50,160 --> 00:01:54,570
Pero lo que importa es que al menos sea la versión 18.

40
00:01:54,570 --> 00:01:57,150
Bien, y con estas tres herramientas en su lugar,

41
00:01:57,150 --> 00:01:59,733
Ahora configuremos un poco VS Code.

42
00:02:00,840 --> 00:02:03,870
Entonces abra una nueva ventana de VS Code, que luego

43
00:02:03,870 --> 00:02:05,640
parece algo como esto.

44
00:02:05,640 --> 00:02:07,830
Entonces podría haber cambiado un poco en el futuro.

45
00:02:07,830 --> 00:02:10,770
pero básicamente se verá así.

46
00:02:10,770 --> 00:02:13,740
Y aquí, desde la barra lateral izquierda, instalemos ahora

47
00:02:13,740 --> 00:02:15,900
Dos extensiones esenciales.

48
00:02:15,900 --> 00:02:19,343
El primero es ESLint, que es un linter de abrigo.

49
00:02:19,343 --> 00:02:23,220
Básicamente, un programa que encontrará errores automáticamente.

50
00:02:23,220 --> 00:02:26,490
en nuestro abrigo o encontrar algunas mejores prácticas

51
00:02:26,490 --> 00:02:27,900
que estamos violando.

52
00:02:27,900 --> 00:02:30,750
Y tal vez ya hayas usado este linter antes, pero

53
00:02:30,750 --> 00:02:33,120
Si no, asegúrate de descargarlo.

54
00:02:33,120 --> 00:02:37,830
Es muy popular con más de 25 millones de instalaciones.

55
00:02:37,830 --> 00:02:41,940
Entonces otra extensión que realmente necesitamos es Prettier.

56
00:02:41,940 --> 00:02:46,020
porque Prettier formateará automáticamente nuestro código

57
00:02:46,020 --> 00:02:49,650
por ejemplo, para eliminar líneas vacías y cosas así.

58
00:02:49,650 --> 00:02:52,059
Y esto es realmente importante para que sigas este curso.

59
00:02:52,059 --> 00:02:55,590
porque hará que tu código se vea exactamente igual

60
00:02:55,590 --> 00:02:57,300
como mi código en los videos.

61
00:02:57,300 --> 00:02:59,850
Y eso te ayudará a encontrar cualquier error.

62
00:02:59,850 --> 00:03:01,530
que podrías haber creado.

63
00:03:01,530 --> 00:03:04,890
Entonces, continúe y descargue esta extensión aquí.

64
00:03:04,890 --> 00:03:07,950
y si necesitamos más extensiones a lo largo del curso,

65
00:03:07,950 --> 00:03:10,980
Luego los instalaremos sobre la marcha.

66
00:03:10,980 --> 00:03:13,620
Ahora sobre el tema de color que estoy usando aquí,

67
00:03:13,620 --> 00:03:16,893
se llama Un Monokai.

68
00:03:18,060 --> 00:03:20,130
Entonces ese es este de aquí abajo.

69
00:03:20,130 --> 00:03:23,958
De nuevo, si quieres que tu editor se parezca al mío

70
00:03:23,958 --> 00:03:26,520
Entonces adelante, descárgalo aquí.

71
00:03:26,520 --> 00:03:29,070
y luego establezca el tema de color.

72
00:03:29,070 --> 00:03:31,833
También puedes hacerlo aquí abajo.

73
00:03:32,700 --> 00:03:34,230
ahora a la derecha.

74
00:03:34,230 --> 00:03:36,630
Ahora, además de este tema de color general,

75
00:03:36,630 --> 00:03:40,830
También uso un tema para los íconos de archivos en el árbol de archivos.

76
00:03:40,830 --> 00:03:45,240
Y ese se llama Material Icons

77
00:03:45,240 --> 00:03:48,000
Así que asegúrese de descargar este también.

78
00:03:48,000 --> 00:03:51,450
Y luego configure este tema de ícono de archivo, que nuevamente,

79
00:03:51,450 --> 00:03:54,003
También puedes hacerlo aquí abajo.

80
00:03:55,756 --> 00:03:56,589
ahora a la derecha.

81
00:03:56,589 --> 00:03:57,797
Así que con esto modificamos la apariencia.

82
00:03:57,797 --> 00:04:02,280
de nuestro Código VS un poco y, por supuesto, puedes seguir adelante.

83
00:04:02,280 --> 00:04:05,100
e instala tantas extensiones como quieras

84
00:04:05,100 --> 00:04:09,300
pero ahora pasaré a establecer algunas configuraciones.

85
00:04:09,300 --> 00:04:11,670
Entonces eso también es muy importante.

86
00:04:11,670 --> 00:04:15,030
Y el primero es la configuración de seguridad automática.

87
00:04:15,030 --> 00:04:16,660
Entonces puedes buscar eso aquí.

88
00:04:16,660 --> 00:04:19,530
Y probablemente, este ya sea el valor predeterminado.

89
00:04:19,530 --> 00:04:20,910
pero no estoy realmente seguro.

90
00:04:20,910 --> 00:04:24,650
Así que asegúrese de configurar la seguridad automática en onFocusChange,

91
00:04:24,650 --> 00:04:25,800
que asegurará

92
00:04:25,800 --> 00:04:28,500
que tu código se guarde cada vez que vayas

93
00:04:28,500 --> 00:04:31,263
a un grifo diferente o a una ventana diferente.

94
00:04:32,340 --> 00:04:35,490
La próxima vez, debemos configurar la extensión Prettier.

95
00:04:35,490 --> 00:04:39,327
que instalamos, formateador predeterminado SR.

96
00:04:47,190 --> 00:04:49,110
Así que esa es esta configuración de aquí.

97
00:04:49,110 --> 00:04:53,580
Así que asegúrese de configurarlo aquí en Más bonito, formateador de código.

98
00:04:53,580 --> 00:04:57,038
De lo contrario, a veces VS Code no lo sabe.

99
00:04:57,038 --> 00:04:59,790
cómo activar más bonito.

100
00:04:59,790 --> 00:05:02,670
Y luego también queremos decirle a VS Code

101
00:05:02,670 --> 00:05:05,430
para hacer este formateo en forma segura.

102
00:05:05,430 --> 00:05:10,200
Entonces, busquemos el formato de configuración en seguro

103
00:05:10,200 --> 00:05:12,500
y luego simplemente activemos esto aquí.

104
00:05:13,380 --> 00:05:18,380
Luego, sobre ESLint, podemos configurar la configuración de ejecución de EsLint aquí

105
00:05:19,410 --> 00:05:22,260
y configúrelo en onSafe.

106
00:05:22,260 --> 00:05:26,010
Básicamente, de forma predeterminada, ESLint se ejecutará cada vez.

107
00:05:26,010 --> 00:05:28,620
que escriba un carácter nuevo, que podría ser

108
00:05:28,620 --> 00:05:29,820
un poco demasiado.

109
00:05:29,820 --> 00:05:32,610
Y al configurar esto aquí, ESLint solo verificará

110
00:05:32,610 --> 00:05:34,710
nuestro código cada vez que lo guardamos,

111
00:05:34,710 --> 00:05:36,930
que suele ser más que suficiente.

112
00:05:36,930 --> 00:05:39,810
Pero claro, si quieres, también puedes dejar el valor predeterminado.

113
00:05:39,810 --> 00:05:41,237
que es onType.

114
00:05:43,499 --> 00:05:44,332
¿ahora bien?

115
00:05:44,332 --> 00:05:46,770
Esas son todas las configuraciones que necesitamos.

116
00:05:46,770 --> 00:05:49,650
A continuación, asegurémonos rápidamente de que realmente

117
00:05:49,650 --> 00:05:52,290
tenga Node.js instalado ahora.

118
00:05:52,290 --> 00:05:55,020
Y para eso, abramos una nueva terminal,

119
00:05:55,020 --> 00:05:57,540
lo cual me gusta hacer usando este atajo

120
00:05:57,540 --> 00:05:59,973
que deberías ver aquí arriba en la pantalla.

121
00:06:00,900 --> 00:06:03,510
Y entonces, para verificar la versión de su nodo,

122
00:06:03,510 --> 00:06:06,480
simplemente escriba nodo -v.

123
00:06:06,480 --> 00:06:08,070
Y entonces asegúrate de nuevo

124
00:06:08,070 --> 00:06:11,190
que la versión de su nodo sea al menos la versión 18.

125
00:06:11,190 --> 00:06:14,970
Y si no, sigue adelante e instálalo una vez más.

126
00:06:14,970 --> 00:06:15,803
¿ahora a la derecha?

127
00:06:15,803 --> 00:06:19,170
Y ahora, para terminar, configuremos algunos fragmentos.

128
00:06:19,170 --> 00:06:22,897
Entonces, los fragmentos son básicamente algunas piezas de código predefinido.

129
00:06:22,897 --> 00:06:27,330
que podemos utilizar para acelerar enormemente el desarrollo.

130
00:06:27,330 --> 00:06:29,220
Así que preparé un archivo

131
00:06:29,220 --> 00:06:31,839
de tres fragmentos que vamos a utilizar mucho

132
00:06:31,839 --> 00:06:36,270
y están aquí en estos archivos de inicio que descargamos

133
00:06:36,270 --> 00:06:38,643
de GitHub, justo en la primera sección.

134
00:06:39,600 --> 00:06:41,400
Entonces, asegúrate de abrirlo.

135
00:06:41,400 --> 00:06:42,750
Y este archivo está aquí

136
00:06:42,750 --> 00:06:45,273
en la primera carpeta llamada configuración.

137
00:06:46,200 --> 00:06:48,810
Así que abramos este archivo aquí, por ejemplo.

138
00:06:48,810 --> 00:06:53,610
arrastrándolo y soltándolo aquí en este ícono de VS Code.

139
00:06:53,610 --> 00:06:56,280
Pero si por alguna razón eso no te funciona, puedes

140
00:06:56,280 --> 00:07:00,887
Por supuesto, siempre ábrelo aquí de la forma habitual, ¿verdad?

141
00:07:02,250 --> 00:07:05,700
Luego simplemente selecciona todo y cópialo.

142
00:07:05,700 --> 00:07:07,620
Entonces, copia este código completo.

143
00:07:07,620 --> 00:07:10,953
y luego baje aquí a Fragmentos de usuario.

144
00:07:12,240 --> 00:07:13,290
¿ahora a la derecha?

145
00:07:13,290 --> 00:07:14,610
Y entonces, podría ser

146
00:07:14,610 --> 00:07:17,520
que ya tienes algunos archivos de fragmentos.

147
00:07:17,520 --> 00:07:20,189
Y en ese caso, puedes abrir uno de ellos.

148
00:07:20,189 --> 00:07:23,799
pero si no, sigue adelante y crea un nuevo archivo de fragmentos.

149
00:07:23,799 --> 00:07:26,067
haciendo clic aquí en esta opción.

150
00:07:26,067 --> 00:07:29,002
Entonces usaré este que ya tengo.

151
00:07:29,002 --> 00:07:32,850
y pretendamos que está vacío.

152
00:07:32,850 --> 00:07:34,860
Así que simplemente lo vaciaré.

153
00:07:34,860 --> 00:07:39,273
y luego copiaré y pegaré ese código de aquí hasta aquí.

154
00:07:40,140 --> 00:07:42,960
Entonces, lo que tenemos aquí son tres fragmentos.

155
00:07:42,960 --> 00:07:46,440
Éste es para crear fácilmente una consola. registro.

156
00:07:46,440 --> 00:07:50,310
Este es para crear un componente funcional de React.

157
00:07:50,310 --> 00:07:53,520
Eso es lo que representa este RFC.

158
00:07:53,520 --> 00:07:56,700
Y este es un componente de estilo React avanzado.

159
00:07:56,700 --> 00:07:59,043
Y veremos qué hacen estos más adelante.

160
00:07:59,970 --> 00:08:02,520
Entonces, por ejemplo, este primero aquí para simplemente imprimir

161
00:08:02,520 --> 00:08:07,470
a la consola se activará cada vez que escribamos cl

162
00:08:07,470 --> 00:08:11,580
en un archivo JavaScript, un script de tipo A o un archivo React.

163
00:08:11,580 --> 00:08:16,267
Y luego reemplazará ese cl con esta consola. registro

164
00:08:16,267 --> 00:08:18,575
y luego también colocará el cursor

165
00:08:18,575 --> 00:08:20,670
entre estos paréntesis,

166
00:08:20,670 --> 00:08:22,563
lo cual va a ser realmente útil.

167
00:08:23,940 --> 00:08:26,700
Esto es algo realmente poderoso, y nuevamente,

168
00:08:26,700 --> 00:08:30,153
Volveremos a estos otros dos y los usaremos más adelante.

169
00:08:31,860 --> 00:08:34,290
Bien, y con esto, realmente hemos terminado.

170
00:08:34,290 --> 00:08:37,350
Así que estamos todos listos para pasar finalmente a

171
00:08:37,350 --> 00:08:41,940
Empezar a aprender React y empezar a escribir nuestro propio código.

172
00:08:41,940 --> 00:08:44,583
Espero verte pronto en la próxima conferencia.