Instala tu entorno de desarrollo

Has visto cómo funciona la web por fuera: el viaje de una petición y cómo el navegador pinta una página. Antes de escribir tu primera línea de código toca preparar la máquina. No es complicado ni largo: un desarrollador frontend usa a diario muy pocas herramientas, y se instalan una vez.

Hacerlo ahora, de golpe, tiene un motivo concreto: cuando lleguen los capítulos de JavaScript, TypeScript y React, no quieres que te frene un mensaje de error diciendo que un comando “no existe”. Quieres abrir el editor y ponerte. Este capítulo deja el entorno listo para ese momento.

Vas a comprobar las instalaciones escribiendo un par de comandos en una terminal. Si nunca has abierto una, tranquilo: aquí solo tienes que abrirla y pegar un comando. La terminal la verás a fondo un par de capítulos más adelante, en Perderle el miedo a la terminal. Para abrir una sin salir del editor, en VSCode usa el menú Terminal → New Terminal.

Las tres piezas, y para qué sirve cada una#

Son tres herramientas. Conviene saber qué papel juega cada una antes de instalarlas:

1. El editor de código: VSCode#

El editor es donde escribes. Podrías escribir código en el Bloc de notas, pero un editor de verdad te marca los errores en rojo, te autocompleta y entiende el lenguaje. El estándar del frontend en 2026, y el que usa este curso, es Visual Studio Code (VSCode): gratuito, de Microsoft, y el más extendido con diferencia.

Para instalarlo:

1. Entra en code.visualstudio.com.
2. Descarga la versión de tu sistema (Windows, macOS o Linux): la web detecta el tuyo y te ofrece el botón correcto.
3. Instálalo como cualquier otro programa y ábrelo.

Hay alternativas válidas, casi todas construidas sobre el propio VSCode (por ejemplo Cursor o Windsurf, con ayudas de IA integradas) u otras como Zed. Si ya usas una, perfecto. Pero ten en cuenta que el siguiente capítulo —Configurar VSCode como un profesional— habla de las extensiones y los atajos de VSCode; si usas otro editor, tendrás que buscar sus equivalentes.

2. Node.js: ejecutar JavaScript fuera del navegador#

Aquí está la pieza que más sorprende al principio. Ya sabes que el navegador ejecuta el JavaScript de una página. Pero para construir esa página necesitas un montón de herramientas —un servidor que recarga la web cada vez que guardas, los tests, el compilador de TypeScript, el empaquetador de React— y todas esas herramientas también están escritas en JavaScript. Necesitan algo que ejecute JavaScript en tu propia máquina, no en el navegador.

Eso es Node.js: el entorno que ejecuta JavaScript fuera del navegador. No lo vas a usar para escribir páginas a mano; lo vas a usar sin darte cuenta, porque es el motor sobre el que corre todo el utillaje del frontend.

Para instalarlo:

1. Entra en nodejs.org.
2. Descarga la versión marcada como LTS. LTS significa Long Term Support: la versión estable, con soporte de años, que es la base de casi todos los proyectos reales. La otra opción, “Current”, trae lo más nuevo pero aún en rodaje: para empezar, LTS.
3. Instálala con el instalador, dejando las opciones por defecto.

Cuando termine, abre una terminal nueva (las versiones se detectan al arrancar la terminal, así que si la tenías abierta, ciérrala y abre otra) y comprueba que Node responde:

# imprime la versión de Node instalada (verás algo como v22.x o v24.x)
node -v

Si te devuelve un número de versión, Node está listo. Si te dice “command not found” o “no se reconoce el comando”, la instalación no se completó o necesitas reabrir la terminal.

npm viene de regalo#

Junto con Node se instala npm (Node Package Manager), sin que tengas que hacer nada más. npm es el gestor de paquetes: la herramienta que descarga e instala las librerías que un proyecto necesita —lo que se llama sus dependencias— con un solo comando. Compruébalo:

# npm se instala junto a Node; esto imprime su versión
npm -v

Más adelante, cuando arranques un proyecto de verdad, escribirás npm install y npm bajará todas las dependencias a una carpeta del proyecto. No te preocupes ahora por los detalles (qué es esa carpeta, de dónde sale la lista de dependencias): los verás cuando toque. Por ahora basta con saber que el gestor de paquetes vino incluido con Node.

Existen alternativas a npm más rápidas, como pnpm o yarn, que hacen lo mismo con algún truco de eficiencia. Para empezar, el npm que ya tienes es más que suficiente; las alternativas se eligen por proyecto, no por costumbre.

El truco del profesional, para cuando lo necesites: con el tiempo trabajarás en varios proyectos que piden versiones distintas de Node. Para cambiar entre ellas sin reinstalar existen los gestores de versiones (nvm en macOS y Linux, fnm o nvm-windows en Windows). Hoy no te hace falta; cuando un proyecto te pida una versión concreta de Node, recuerda que esto existe.

3. Git: guardar tu trabajo#

La tercera pieza es Git, el sistema de control de versiones: guarda una foto de tu proyecto cada vez que se lo pides, de forma reversible, y te permite compartirlo y volver a cualquier punto del pasado. Aquí solo lo instalas y compruebas; su uso diario —clonar, commitear, subir cambios— es todo un capítulo, Git básico, un poco más adelante.

Para instalarlo:

• Windows: descárgalo de git-scm.com e instálalo con las opciones por defecto. Trae además “Git Bash”, una terminal estilo Linux que muchos prefieren en Windows.
• macOS: lo más sencillo es escribir en la terminal xcode-select --install, que instala las herramientas de línea de comandos de Apple (Git entre ellas). Alternativamente, git-scm.com.
• Linux: con el gestor de paquetes del sistema, por ejemplo sudo apt install git en Debian/Ubuntu.

Comprueba que quedó instalado:

# imprime la versión de Git instalada
git --version

Te faltará una cosa más para usar Git de verdad: una cuenta de GitHub (gratuita, en github.com), que es donde guardarás tu código en la nube. Créala ahora si no la tienes; la estrenarás en el capítulo de Git.

Comprueba que todo está listo#

Antes de pasar página, una lista de verificación. Abre una terminal y confirma los tres comandos: si los tres te devuelven una versión, tu máquina está lista para programar.

# 1. Node: debe imprimir una versión (v22 o superior en 2026)
node -v

# 2. npm: viene con Node, debe imprimir su versión
npm -v

# 3. Git: debe imprimir su versión
git --version

Checklist completa:

• VSCode instalado y abre sin problemas.
• node -v muestra una versión.
• npm -v muestra una versión.
• git --version muestra una versión.
• Tienes una cuenta de GitHub creada.

Si algo no responde, repasa el paso de esa herramienta y reabre la terminal: es, con diferencia, la causa más común de que un comando recién instalado “no aparezca”.

Comprueba lo que sabes#