¡Bienvenido al curso de Modern React!

En el caso que hayas realizado la configuración de tu computadora para el curso de Desarrollo Web de Le Wagon, solo debes hacer la última etapa de la configuración sobre Node.js. En el caso contrario, por favor, léelas cuidadosamente y ejecuta todos los comandos en el orden indicado. Si tienes algún problema, no dudes en pedirle ayuda a tu profesor.

¡Comencemos!

Para poder interactuar cuando no estemos en el mismo lugar físico, usaremos Zoom, una herramienta de videoconferencia.

Si ya tienes Zoom instalado, por favor asegúrate de que por lo menos tienes la versión 5.6.

Ve a zoom.us/download.

Haz clic en el botón Download debajo de Zoom Client.

Abre el archivo que acabas de descargar para instalar la aplicación.

Abre la aplicación Zoom.

Si tienes una Mac con Apple silicon, te pedirán instalar Rosetta. Haz clic en instalar. Luego escribe tu nombre y contraseña para que corra la instalación.

Si ya tienes una cuenta Zoom, inicia sesión con tus credenciales.

Si no, haz clic en el enlace Sign Up Free, que significa registrarse gratuitamente. Te redireccionarán a la página de Zoom para que completes un formulario. Cuando termines, regresa a la aplicación Zoom e inicia sesión usando tus credenciales.

Una vez finalizado, puedes cerrar la aplicación Zoom.

Slack es una plataforma de comunicación popular en la industria tech.

Descarga la aplicación Slack e instálala.

Si ya estás usando Slack en tu navegador, por favor descarga e instala la aplicación de escritorio la cual tiene todas las funciones.

¿Ya tienes una cuenta GitHub? Si no es el caso, ábrela ya.

Sube una foto y escribe tu nombre correctamente en tu cuenta GitHub. Esto es importante porque nosotros usaremos un tablero de comando interno con tu avatar. Por favor hazlo ahora antes de dar un paso más en esta guía.

Habilita la Autenticación de Dos Factores (2FA). GitHub te enviará mensajes de texto con un código cuando intentes iniciar sesión. Esto es importante para la seguridad y también pronto será necesario para contribuir código en GitHub.

Hacer clic en círculo rojo en la esquina superior izquierda de la ventana de la aplicación en Mac no la termina el proceso, solo cierra una ventana activa. Hay dos alternativas para cerrar la aplicación realmente. Puedes presionar Cmd + Q cuando la misma está activa. La otra opción es ir a APP_NAME -> Quit en la barra del menú.

Durante esta configuración, se te pedirá cerrar y abrir nuevamente aplicaciones varias veces. Por favor asegúrate de hacerlo correctamente

Homebrew es un gestionador de paquetes: es un programa que se usa para instalar otros programas desde la línea de comando. ¡Vamos a instalarlo!

Abre la terminal y ejecuta lo siguiente:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Te pedirá que confirmes (presionando Enter) y también te pedirá la contraseña de tu cuenta de usuario macOS (la que usas para iniciar sesión cuando reinicias tu Macbook).

⚠️ Cuando escribas tu contraseña no verás nada en la pantalla. Esto es normal. Es una herramienta de seguridad para ocultar tanto el contenido de tu contraseña como su longitud. Simplemente escribe tu contraseña y presiona Enter al terminar.

⚠️ Si ves esta advertencia 👇, ejecuta los dos comandos de la sección Next steps para añadir Homebrew a tu PATH:

# ⚠️ Only execute these commands if you saw this warning ☝
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

Si ya tienes Homebrew instalado, el sistema te lo dirá y puedes continuar.

Luego instala algunos programas útiles:

brew update

Si obtienes un error como este: /usr/local must be writable, ejecuta el código que te mostramos a continuación:

sudo chown -R $USER:admin /usr/local
brew update

Ejecuta el siguiente código en tu terminal (puedes copiar y pegar todas las líneas de código al mismo tiempo):

brew upgrade git || brew install git
brew upgrade gh || brew install gh
brew upgrade wget || brew install wget
brew upgrade imagemagick || brew install imagemagick
brew upgrade jq || brew install jq
brew upgrade openssl || brew install openssl

Instala el editor de texto Visual Studio Code.

Copia (presionando Cmd + C) el comando de aquí abajo y luego pégalo en tu terminal (con Cmd + V):

brew install --cask visual-studio-code

Luego abre VS Code ejecutando el siguiente comando en tu terminal:

code

✔️ Si se acaba de abrir una ventana de VS Code, todo está bien y puedes continuar 👍

❌ De lo contrario, por favor contacta a un profesor.

Vamos a instalar algunas extensiones útiles de VS Code.

Copia y pega los siguientes comandos en tu terminal:

code --install-extension ms-vscode.sublime-keybindings
code --install-extension emmanuelbeziat.vscode-great-icons
code --install-extension github.github-vscode-theme
code --install-extension MS-vsliveshare.vsliveshare
code --install-extension rebornix.ruby
code --install-extension dbaeumer.vscode-eslint
code --install-extension Rubymaniac.vscode-paste-and-indent
code --install-extension alexcvzz.vscode-sqlite
code --install-extension anteprimorac.html-end-tag-labels

Aquí está la lista de las extensiones que estás instalando:

• Sublime Text Keymap and Settings Importer
• VSCode Great Icons
• Live Share
• Ruby
• ESLint
• Paste and Indent
• SQLite

Instalemos el plugin zsh Oh My Zsh.

Ejecuta este comando en la terminal:

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Si te preguntan "Do you want to change your default shell to zsh?", presiona Y

Si no, por favor pídele ayuda a un profesor.

CLI es una abreviación de Command-line Interface que significa interfaz de línea de comando.

En esta sección usaremos GitHub CLI para interactuar directamente con GitHub desde la terminal.

Ya debería haberse instalado en tu computadora con los comandos que ejecutaste anteriormente.

Lo primero que hay que hacer para iniciar sesión es copiar y pegar el comando siguiente en tu terminal:

NO edites el email

gh auth login -s 'user:email' -w

gh le hará algunas preguntas:

What is your preferred protocol for Git operations? Con las flechas, elige SSH y presiona Enter. SSH es un protocolo para iniciar la sesión utilizando claves SSH en lugar de la famosa pareja nombre de usuario y contraseña.

Generate a new SSH key to add to your GitHub account? Presiona Enter para pedirle a gh que genere las claves SSH por ti.

Si ya tienes claves SSH, verás en su lugar Upload your SSH public key to your GitHub account?Con las flechas, selecciona la ruta de tu archivo de clave pública y pulsa Intro.

Enter a passphrase for your new SSH key (Optional). Pon algo que quieras y que recuerdes. Es una contraseña para proteger tu private key que está almacenada en tu disco duro. Luego presiona Enter.

Title for your SSH key. Puede dejarlo en la propuesta "GitHub CLI", presiona Enter.

Obtendrás el siguiente resultado:

! First copy your one-time code: 0EF9-D015
- Press Enter to open github.com in your browser...

Selecciona y copia el código (0EF9-D015 en el ejemplo) y luego presiona Enter.

Tu navegador se abrirá y te pedirá que autorices GitHub CLI para usar tu cuenta GitHub. Acepta y espera un poco.

Regresa a la terminal, presiona Enter nuevamente y listo. Eso es todo.

Para verificar que están conectado correctamente, escribe lo siguiente:

gh auth status

Si obtienes este mensaje: Logged in to github.com as <YOUR USERNAME> , significa que todo está bien

De lo contrario, contacta a un profesor.

Los hackers aman mejorar sus shells y sus herramientas.

Comenzaremos con una configuración predeterminada proporcionada por Le Wagon: lewagon/dotfiles.

Tu configuración es personal, así que necesitas tu propio repositorio para almacenarla. Haz el fork del repositorio de Le Wagon.

Hacer un fork significa crear un nuevo repositorio en tu propia cuenta GitHub $GITHUB_USERNAME/dotfiles el cual es idéntico al original de Le Wagon y que podrás modificar como quieras.

Abre tu terminal y ejecuta los siguientes comandos:

export GITHUB_USERNAME=`gh api user | jq -r '.login'`
echo $GITHUB_USERNAME

Deberías ver tu usuario GitHub en la pantalla.

Si no es el caso, no des un paso más y pide ayuda. Es posible que haya un problema con el paso anterior (gh auth).

Es hora de hacer el fork del repositorio y clonarlo en tu computadora:

mkdir -p ~/code/$GITHUB_USERNAME && cd $_
gh repo fork lewagon/dotfiles --clone

Ejecuta el instalador de dotfiles:

cd ~/code/$GITHUB_USERNAME/dotfiles
zsh install.sh

Verifica los emails registrados en tu cuenta GitHub. Deberás seleccionar uno en el paso siguiente:

gh api user/emails | jq -r '.[].email'

Si ves una lista de tus emails registrados, puedes continuar

De lo contrario, por favor haz la autenticación en GitHub nuevamente antes de ejecutar este comando otra vez.

Ejecuta el instalador de git:

cd ~/code/$GITHUB_USERNAME/dotfiles && zsh git_setup.sh

Esto te pedirá tu nombre (FirstName LastName) y tu email. Cualquier correo que elijas se mostrará públicamente en internet. 💡 Selecciona la dirección @users.noreply.github.com si no quieres que tu correo electrónico aparezca en los repositorios públicos a los que puedas contribuir.

Necesitas poner uno de los emails que aparecen arriba gracias al comando anterior gh api .... De lo contrario, Kitt no podrá hacerle seguimiento a tu progreso.

Ahora resetea tu terminal ejecutando lo siguiente:

exec zsh

Node.js es un JavaScript runtime para ejecutar código JavaScript en la terminal. Instálalo con nvm, aun gestionador de versiones para Node.js.

En una terminal, ejecuta estos comandos:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | zsh
exec zsh

Luego corre el siguiente comando:

nvm -v

Deberías ver una versión. Si no, pídele ayuda a tu profesor.

Ahora instala node:

nvm install 18
nvm use 18

Cuando termine la instalación, corre lo siguiente:

node -v

Si ves v16.15.1, the installation succeeded ✔️ entonces ahora puedes ejecutar lo siguiente:

nvm cache clear

❌ De lo contrario, contacta a un profesor.

yarn es un gestor de paquetes para instalar librerías JavaScript. Instálalo:

En una terminal, ejecuta los siguientes comandos:

npm install --global yarn
exec zsh

Luego ejecuta este comando:

yarn -v

Si ves una versión, entonces todo está bien. Si no es el caso, pídele ayuda a un profesor