Ahora antes de comenzar a codificar
y aprenda todo sobre React, configuremos rápidamente
nuestro entorno de desarrollo en esta conferencia.
Ahora, dado que estás tomando este curso, asumo
que ya hiciste algo de codificación antes
y por tanto, ya tendrás algún editor de código
instalado en su computadora.
Y si ese editor de código es VS Code, entonces felicidades.
ya estás usando el mejor editor de código que existe.
Pero si estás usando algún otro editor de código
entonces te recomiendo que descargues VS Code simplemente
descargando el instalador desde aquí
y luego instalarlo como cualquier otra aplicación.
Y al hacerlo, podrás personalizar el editor.
tal como lo hago en este curso,
lo que lo hará un poco más fácil
para que sigas todo.
A continuación, por supuesto, necesitamos un navegador web para ejecutar
las aplicaciones que vamos a construir
y estoy usando Google Chrome para eso.
Por eso te recomiendo encarecidamente que utilices el mismo navegador.
para que nuestros resultados se vean iguales.
Así que si aún no lo tienes instalado
Entonces asegúrate de hacerlo ahora mismo.
y finalmente,
Necesitaremos instalar Node.js en nuestro sistema.
Y esto no se debe a que vayamos a desarrollar algo en Node.js.
pero es simplemente
porque todas las herramientas que usaremos se ejecutan en Node.js
y es importante que utilices al menos la versión 18 de Node.
Y entonces, si no estás seguro
sobre qué versión está ejecutando actualmente o
Si quizás nunca antes instalaste Node.js,
Entonces continúa y descárgalo aquí.
desde este primer botón.
Y no importa si es el Nodo 18
o 20 o 22 o lo que sea porque, por supuesto, esta versión de Node
cambiará en el futuro.
Pero lo que importa es que al menos sea la versión 18.
Bien, y con estas tres herramientas en su lugar,
Ahora configuremos un poco VS Code.
Entonces abra una nueva ventana de VS Code, que luego
parece algo como esto.
Entonces podría haber cambiado un poco en el futuro.
pero básicamente se verá así.
Y aquí, desde la barra lateral izquierda, instalemos ahora
Dos extensiones esenciales.
El primero es ESLint, que es un linter de abrigo.
Básicamente, un programa que encontrará errores automáticamente.
en nuestro abrigo o encontrar algunas mejores prácticas
que estamos violando.
Y tal vez ya hayas usado este linter antes, pero
Si no, asegúrate de descargarlo.
Es muy popular con más de 25 millones de instalaciones.
Entonces otra extensión que realmente necesitamos es Prettier.
porque Prettier formateará automáticamente nuestro código
por ejemplo, para eliminar líneas vacías y cosas así.
Y esto es realmente importante para que sigas este curso.
porque hará que tu código se vea exactamente igual
como mi código en los videos.
Y eso te ayudará a encontrar cualquier error.
que podrías haber creado.
Entonces, continúe y descargue esta extensión aquí.
y si necesitamos más extensiones a lo largo del curso,
Luego los instalaremos sobre la marcha.
Ahora sobre el tema de color que estoy usando aquí,
se llama Un Monokai.
Entonces ese es este de aquí abajo.
De nuevo, si quieres que tu editor se parezca al mío
Entonces adelante, descárgalo aquí.
y luego establezca el tema de color.
También puedes hacerlo aquí abajo.
ahora a la derecha.
Ahora, además de este tema de color general,
También uso un tema para los íconos de archivos en el árbol de archivos.
Y ese se llama Material Icons
Así que asegúrese de descargar este también.
Y luego configure este tema de ícono de archivo, que nuevamente,
También puedes hacerlo aquí abajo.
ahora a la derecha.
Así que con esto modificamos la apariencia.
de nuestro Código VS un poco y, por supuesto, puedes seguir adelante.
e instala tantas extensiones como quieras
pero ahora pasaré a establecer algunas configuraciones.
Entonces eso también es muy importante.
Y el primero es la configuración de seguridad automática.
Entonces puedes buscar eso aquí.
Y probablemente, este ya sea el valor predeterminado.
pero no estoy realmente seguro.
Así que asegúrese de configurar la seguridad automática en onFocusChange,
que asegurará
que tu código se guarde cada vez que vayas
a un grifo diferente o a una ventana diferente.
La próxima vez, debemos configurar la extensión Prettier.
que instalamos, formateador predeterminado SR.
Así que esa es esta configuración de aquí.
Así que asegúrese de configurarlo aquí en Más bonito, formateador de código.
De lo contrario, a veces VS Code no lo sabe.
cómo activar más bonito.
Y luego también queremos decirle a VS Code
para hacer este formateo en forma segura.
Entonces, busquemos el formato de configuración en seguro
y luego simplemente activemos esto aquí.
Luego, sobre ESLint, podemos configurar la configuración de ejecución de EsLint aquí
y configúrelo en onSafe.
Básicamente, de forma predeterminada, ESLint se ejecutará cada vez.
que escriba un carácter nuevo, que podría ser
un poco demasiado.
Y al configurar esto aquí, ESLint solo verificará
nuestro código cada vez que lo guardamos,
que suele ser más que suficiente.
Pero claro, si quieres, también puedes dejar el valor predeterminado.
que es onType.
¿ahora bien?
Esas son todas las configuraciones que necesitamos.
A continuación, asegurémonos rápidamente de que realmente
tenga Node.js instalado ahora.
Y para eso, abramos una nueva terminal,
lo cual me gusta hacer usando este atajo
que deberías ver aquí arriba en la pantalla.
Y entonces, para verificar la versión de su nodo,
simplemente escriba nodo -v.
Y entonces asegúrate de nuevo
que la versión de su nodo sea al menos la versión 18.
Y si no, sigue adelante e instálalo una vez más.
¿ahora a la derecha?
Y ahora, para terminar, configuremos algunos fragmentos.
Entonces, los fragmentos son básicamente algunas piezas de código predefinido.
que podemos utilizar para acelerar enormemente el desarrollo.
Así que preparé un archivo
de tres fragmentos que vamos a utilizar mucho
y están aquí en estos archivos de inicio que descargamos
de GitHub, justo en la primera sección.
Entonces, asegúrate de abrirlo.
Y este archivo está aquí
en la primera carpeta llamada configuración.
Así que abramos este archivo aquí, por ejemplo.
arrastrándolo y soltándolo aquí en este ícono de VS Code.
Pero si por alguna razón eso no te funciona, puedes
Por supuesto, siempre ábrelo aquí de la forma habitual, ¿verdad?
Luego simplemente selecciona todo y cópialo.
Entonces, copia este código completo.
y luego baje aquí a Fragmentos de usuario.
¿ahora a la derecha?
Y entonces, podría ser
que ya tienes algunos archivos de fragmentos.
Y en ese caso, puedes abrir uno de ellos.
pero si no, sigue adelante y crea un nuevo archivo de fragmentos.
haciendo clic aquí en esta opción.
Entonces usaré este que ya tengo.
y pretendamos que está vacío.
Así que simplemente lo vaciaré.
y luego copiaré y pegaré ese código de aquí hasta aquí.
Entonces, lo que tenemos aquí son tres fragmentos.
Éste es para crear fácilmente una consola. registro.
Este es para crear un componente funcional de React.
Eso es lo que representa este RFC.
Y este es un componente de estilo React avanzado.
Y veremos qué hacen estos más adelante.
Entonces, por ejemplo, este primero aquí para simplemente imprimir
a la consola se activará cada vez que escribamos cl
en un archivo JavaScript, un script de tipo A o un archivo React.
Y luego reemplazará ese cl con esta consola. registro
y luego también colocará el cursor
entre estos paréntesis,
lo cual va a ser realmente útil.
Esto es algo realmente poderoso, y nuevamente,
Volveremos a estos otros dos y los usaremos más adelante.
Bien, y con esto, realmente hemos terminado.
Así que estamos todos listos para pasar finalmente a
Empezar a aprender React y empezar a escribir nuestro propio código.
Espero verte pronto en la próxima conferencia.