Qué necesitas: requisitos y tecnologías que usa React

Antes de construir una casa, conviene saber qué terreno necesitas, qué herramientas hay que tener y quiénes trabajan en la obra. Con React pasa igual. En esta lección vas a ver qué debes saber antes de empezar, qué necesita tu computadora y qué tecnologías trabajan juntas cuando usas React. Y al final dejarás listas tus herramientas.

La obra de una casa

Piensa en construir una casa:

• El terreno es donde queda la casa. Para una página web, es el navegador (Chrome, Firefox, Edge...).
• Los materiales son ladrillos, cemento, madera. Para una página web son HTML, CSS y JavaScript.
• Las herramientas son la pala, el martillo, la mezcladora. En programación son el editor de código, Node.js y npm.
• El plano dice cómo se arma todo. Aquí, React es el sistema que te ayuda a ordenar y armar la pantalla por piezas.

Una persona que sabe usar los materiales y tiene sus herramientas aprende React sin sufrir. Veamos qué significa eso.

Lo que debes saber antes de empezar

React se escribe con JavaScript, así que lo más importante es que lo domines un poco. Si hiciste el curso «JavaScript desde cero», tienes todo lo necesario. Esta es la lista de comprobación:

Si alguna fila te hace dudar, tranquilo: vamos a repasar lo que más usaremos mientras avanzamos. Y para que compruebes cómo andas, hay un pequeño calentamiento al final de esta lección.

No necesitas saber TypeScript, servidores, bases de datos ni haber usado otros frameworks. Tampoco necesitas ser rápido: lo importante es entender.

Lo que necesita tu computadora

Para el trabajo en tu computadora (los laboratorios del curso funcionan sin instalar nada) necesitas:

Un detalle importante: la versión de Node.js que tengas debe cumplir lo que piden las herramientas. Si es muy vieja, npm create vite falla o el proyecto no enciende. Más abajo comprobarás la tuya.

Las tecnologías que trabajan juntas

Un proyecto de React no es una sola cosa: es un equipo de herramientas. Cada una tiene un trabajo:

Hay otras que verás de lejos: oxlint (un revisor automático que avisa de errores de escritura) o Git (guardar el historial de tu código, que no es parte de este curso).

Cómo se arma tu aplicación

Esto es lo que pasa cuando trabajas con un proyecto de React. Es un esquema para leer:

Tú escribes JSX y JavaScript en tus archivos (VS Code)
        |
        v
Vite los traduce y los junta (en tu computadora)
        |
        v
El navegador descarga el resultado y lo ejecuta
        |
        v
React (con ReactDOM) dibuja la pantalla dentro de la página

React no lo hace todo

React se ocupa de dibujar la pantalla y manejar el estado. Para cosas más grandes necesitarás otras piezas, que se agregan cuando hacen falta:

• Rutas (cambiar de «página» sin recargar): React Router, por ejemplo.
• Datos de internet más avanzados: React Query, SWR.
• Todo junto, ya armado: un framework como Next.js, que usa React y le suma rutas, servidor y publicación.

En este curso aprenderás React «puro», que es la base de todo lo demás.

Prepara tus herramientas

Ahora sí, a instalar. Si ya tienes Node.js y VS Code, comprueba las versiones y sigue.

Paso 1: Node.js. EN TU NAVEGADOR, entra a https://nodejs.org y descarga la versión LTS. Instálala como cualquier programa: acepta las opciones que vienen marcadas.

Paso 2: abre la terminal. Es la ventana donde das órdenes escribiendo:

• Windows: busca «Símbolo del sistema» o «PowerShell» en el menú de inicio.
• Mac: busca «Terminal» (pulsa Cmd + Espacio y escribe su nombre).
• Linux: busca «Terminal» entre tus aplicaciones, o pulsa Ctrl + Alt + T.

Paso 3: comprueba Node.js. EN LA TERMINAL, escribe esta orden y pulsa Enter. Es para ejecutar:

node -v

Ahora npm:

npm -v

Debe responder con otro número, por ejemplo 11.19.0.

Paso 4: VS Code. EN TU NAVEGADOR, entra a https://code.visualstudio.com, descarga VS Code e instálalo. Ábrelo: verás una zona de archivos a la izquierda y otra para escribir en el centro. No necesitas configurar nada más por ahora; en la lección 5 te sugiero un par de extensiones útiles.

Errores y confusiones comunes

• Instalar una versión vieja de Node.js. Descarga siempre la LTS de la página oficial, y revisa con node -v.
• Confundir Node.js con React. Node.js corre las herramientas en tu computadora; React corre en el navegador.
• Creer que hay que dominar todo JavaScript. Basta con lo de la tabla de arriba.
• Cerrar la terminal creyendo que algo se rompió. Es normal cerrarla y abrirla de nuevo.
• Escribir las órdenes con mayúsculas o espacios de más. La terminal es estricta: node -v funciona; Node -V puede no funcionar.

Calentamiento: lo que vas a usar todo el tiempo

Tres ejercicios cortos para repasar JavaScript. Si los resuelves sin esfuerzo, estás listo.

Recorre la lista con .map() y comprueba. Si no recuerdas cómo, es normal: en la lección 12 lo vemos con calma.

Saca los datos del objeto y comprueba.

Arregla la función y comprueba.

Ejercicio en tu computadora

1. EN LA TERMINAL, ejecuta node -v y npm -v y anota las dos versiones.
2. Compara tu versión de Node.js con el requisito (20.19 o más, o 22.12 o más). Si no la cumple, instala la LTS de https://nodejs.org.
3. EN VS CODE, abre el programa y crea una carpeta de prueba: menú Archivo → Abrir carpeta, y elige o crea una carpeta llamada curso-react (por ejemplo, dentro de «Documentos»). Ahí guardarás tus proyectos.
4. EN LA TERMINAL, ejecuta cd para entrar a esa carpeta. En Mac y Linux se escribe cd ~/Documentos/curso-react y en Windows cd %USERPROFILE%\Documents\curso-react.

En la próxima lección verás que React puede usarse de varias formas y por qué no siempre hace falta «instalarlo».