¿Qué es React?

Ya sabes escribir HTML, darle estilo con CSS, hacer que una página reaccione con JavaScript y gestionar tu código con Git. Has construido cosas reales. Pero si te fijas en lo que hiciste con JavaScript, hay algo que se repite constantemente: seleccionar un elemento del DOM, cambiarle el contenido, escuchar un evento, volver a actualizar el DOM... Es un ciclo manual que se vuelve agotador cuando la interfaz crece.

Imagina el menú de Café Estelar con 30 productos, un buscador que filtra en tiempo real, un carrito de compras que se actualiza al instante y un formulario de pedido que valida cada campo mientras escribes. Hacerlo todo con querySelector y textContent es viable, pero vas a terminar con cientos de líneas de código repetitivo, frágil y difícil de mantener.

React existe para resolver exactamente este problema.

Una librería para construir interfaces

React es una librería de JavaScript para construir interfaces de usuario. Fue creada por Meta (Facebook) en 2013 y es la librería frontend más utilizada del mundo. Instagram, WhatsApp Web, Netflix, Airbnb, Twitter — todas usan React.

A diferencia de un framework completo, React se centra en una sola cosa: renderizar la interfaz de forma declarativa. Tú describes cómo debería verse la pantalla según los datos actuales, y React se encarga de actualizar el DOM cuando esos datos cambian. No tienes que tocar el DOM manualmente nunca más.

¿Recuerdas cuando en la sección de Lógica de Programación aprendiste a dividir problemas en partes pequeñas? React lleva esa idea al extremo: tu interfaz se divide en componentes — piezas independientes y reutilizables. Un botón es un componente. Una tarjeta de producto es un componente. El menú de navegación es un componente. Y una página es un componente que contiene otros componentes.

¿Qué es una SPA (Single Page Application)?

Con lo que sabes hasta ahora, cada vez que el usuario hace clic en un enlace, el navegador pide una página nueva al servidor, la descarga entera y la renderiza desde cero. Eso funciona, pero tiene un problema: la experiencia es lenta y con parpadeos constantes.

Una SPA (Single Page Application) funciona diferente: el navegador carga una sola página HTML al principio, y a partir de ahí JavaScript se encarga de todo. Cuando el usuario navega a otra sección, JavaScript cambia el contenido dinámicamente sin recargar la página. El resultado es una experiencia fluida, como una aplicación nativa.

Piensa en aplicaciones como Gmail, Trello o Spotify Web. Cuando navegas dentro de ellas no ves la página recargarse — todo ocurre de forma instantánea. Eso es una SPA, y React es la herramienta más popular para construirlas.

El Virtual DOM: la ventaja de React

Cuando cambias algo en la interfaz con JavaScript vanilla, el navegador tiene que recalcular estilos, posiciones y repintar elementos. Si actualizas 10 cosas seguidas, el navegador hace 10 actualizaciones reales del DOM. Eso es caro en rendimiento.

React usa un Virtual DOM: una copia ligera del DOM real que vive en memoria. Cuando los datos cambian, React primero actualiza el Virtual DOM, compara el resultado con la versión anterior (un proceso llamado reconciliación), calcula el mínimo número de cambios necesarios y solo entonces toca el DOM real.

Es como si en vez de repintar toda una pared porque cambiaste un cuadro, React calculara exactamente qué píxeles cambiaron y solo tocara esos. El resultado: actualizaciones rápidas y eficientes, incluso en interfaces complejas.

Una nota sobre TypeScript

React tiene soporte completo para TypeScript, y la mayoría de proyectos profesionales lo utilizan. TypeScript añade tipado estático a JavaScript, lo que ayuda a detectar errores antes de ejecutar el código. Lo aprenderás más adelante en el curso. Por ahora usaremos JavaScript puro para que puedas aplicar directamente todo lo que aprendiste en la sección anterior sin introducir otra capa de complejidad.

Instalar Node.js

Antes de crear un proyecto React necesitas tener Node.js instalado en tu ordenador. Node.js incluye npm (Node Package Manager), que es la herramienta que usarás para instalar dependencias y ejecutar comandos del proyecto.

Ve a nodejs.org y descarga la versión LTS (Long Term Support). Es la versión estable y recomendada. La instalación es un asistente clásico de "siguiente, siguiente, instalar" — no tiene misterio.

Una vez instalado, abre una terminal y verifica que funciona:

node --version
# → v24.x.x (o similar)

npm --version
# → 11.x.x (o similar)

Si ambos comandos devuelven un número de versión, estás listo. Si no, reinicia la terminal — a veces el sistema necesita reconocer los nuevos comandos.

Crear un proyecto React con Vite

React utiliza Vite como herramienta de desarrollo. Vite es un bundler ultrarrápido que arranca tu servidor de desarrollo en milisegundos (en proyectos grandes, herramientas anteriores como Create React App podían tardar 30 segundos o más). No necesitas instalarlo por separado — viene integrado cuando creas un proyecto.

Abre tu terminal y ejecuta:

npm create vite@latest cafe-estelar-react -- --template react

Este comando crea un proyecto llamado cafe-estelar-react con la plantilla de React. npm te hará dos preguntas:

1. Si quieres instalar el paquete create-vite — escribe y y pulsa Enter.
2. "Install with npm and start now?" — selecciona Yes. Esto instala las dependencias automáticamente y arranca el servidor de desarrollo sin que tengas que hacer nada más.

Verás cómo npm instala los paquetes y al terminar arranca Vite directamente:

◇  Install with npm and start now?
│  Yes

◇  Scaffolding project in .../cafe-estelar-react...

◇  Installing dependencies with npm...

added 152 packages in 8s

◇  Starting dev server...

VITE v8.x.x  ready in 209 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help

Abre la URL que aparece junto a Local en tu navegador (normalmente http://localhost:5173/, aunque si ese puerto está ocupado Vite elegirá otro automáticamente). Verás la página de bienvenida de React con el logo girando. Tu primer proyecto React está corriendo.

Si seleccionaste "No" en la pregunta anterior, o si necesitas volver a arrancar el servidor más adelante, puedes hacerlo manualmente:

cd cafe-estelar-react
npm install    # solo si no se instalaron antes
npm run dev

Editor recomendado: Zed

Para trabajar con React te recomiendo Zed como editor de código. Es rápido, moderno y tiene soporte nativo para JSX sin necesidad de instalar extensiones adicionales. Abre la carpeta cafe-estelar-react en Zed y estarás listo para trabajar.

Estructura del proyecto

Abre la carpeta del proyecto en tu editor. Verás algo así:

cafe-estelar-react/
├── index.html          ← La única página HTML de la aplicación
├── package.json        ← Dependencias y scripts del proyecto
├── vite.config.js      ← Configuración de Vite
├── public/             ← Archivos estáticos (favicon, imágenes)
├── src/                ← Tu código vive aquí
│   ├── main.jsx        ← Punto de entrada de la aplicación
│   ├── App.jsx         ← Componente raíz
│   ├── App.css         ← Estilos del componente raíz
│   └── index.css       ← Estilos globales

Vamos a ver los archivos más importantes:

index.html — El punto de partida

Esta es la única página HTML que el navegador carga. Fíjate en el <div id="root">:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite + React</title>
</head>
<body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
</body>
</html>

Ese <div id="root"> es donde React va a "montar" toda tu aplicación. Todo el contenido dinámico se genera dentro de ese contenedor.

src/main.jsx — El arranque

Este archivo crea la raíz de React y renderiza tu componente principal:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <App />
    </StrictMode>
)

createRoot conecta React con el elemento del DOM. StrictMode es un envoltorio que ayuda a detectar problemas comunes durante el desarrollo (no afecta a producción). Y <App /> es tu componente raíz — todo empieza ahí.

src/App.jsx — Tu primer componente

Aquí es donde empieza lo interesante. En React, un componente es simplemente una función de JavaScript que devuelve JSX (una mezcla de JavaScript y HTML que veremos en detalle en la siguiente lección).

Tu primer componente React

Vamos a reemplazar el contenido de App.jsx y App.css con algo propio. Borra todo lo que hay en ambos archivos y escribe esto:

import { useState } from 'react'
import './App.css'

function App() {
    const [nombre, setNombre] = useState('Astronauta')
    const [pedidos, setPedidos] = useState(0)

    return (
        <div className="cafeteria">
            <h1>Café Estelar</h1>
            <p className="saludo">¡Bienvenido, {nombre}!</p>

            <div className="pedidos">
                <p>Pedidos realizados: <strong>{pedidos}</strong></p>
                <button onClick={() => setPedidos(pedidos + 1)}>
                    Pedir un café
                </button>
            </div>

            <div className="nombre">
                <label>Tu nombre:</label>
                <input
                    value={nombre}
                    onChange={(e) => setNombre(e.target.value)}
                    placeholder="Escribe tu nombre"
                />
            </div>
        </div>
    )
}

export default App

.cafeteria {
    max-width: 500px;
    margin: 60px auto;
    padding: 40px;
    font-family: system-ui, sans-serif;
    text-align: center;
}

h1 {
    color: #61DAFB;
    font-size: 2rem;
    margin-bottom: 8px;
}

.saludo {
    font-size: 1.25rem;
    color: #333;
    margin-bottom: 32px;
}

.pedidos {
    margin-bottom: 32px;
}

.pedidos p {
    font-size: 1.1rem;
    margin-bottom: 12px;
}

button {
    background: #61DAFB;
    color: #1a1a2e;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

button:hover {
    background: #4fc4e6;
}

.nombre {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

label {
    font-size: 0.9rem;
    color: #666;
}

input {
    padding: 10px 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    text-align: center;
    width: 250px;
    transition: border-color 0.2s;
}

input:focus {
    outline: none;
    border-color: #61DAFB;
}

Guarda ambos archivos y mira el navegador — Vite actualiza la página automáticamente sin que tengas que recargar (eso se llama Hot Module Replacement).

Vamos a desglosar lo que acaba de pasar:

Estado con useState

import { useState } from 'react'

const [nombre, setNombre] = useState('Astronauta')
const [pedidos, setPedidos] = useState(0)

useState es un hook de React que crea una variable de estado. Devuelve un array con dos elementos: el valor actual y una función para actualizarlo. Cuando llamas a la función de actualización (como setPedidos), React re-renderiza el componente con el nuevo valor.

Si vienes de la sección de Lógica de Programación, piensa en useState como una variable con superpoderes: cada vez que cambia, la interfaz se actualiza sola.

JSX: HTML dentro de JavaScript

<p className="saludo">¡Bienvenido, {nombre}!</p>
<p>Pedidos realizados: <strong>{pedidos}</strong></p>

Las llaves {} insertan el valor de una variable JavaScript en el HTML. Cuando el valor cambia, el texto se actualiza solo. Fíjate que en React usamos className en vez de class — porque class es una palabra reservada en JavaScript.

Eventos con onClick

<button onClick={() => setPedidos(pedidos + 1)}>
    Pedir un café
</button>

onClick es la forma de React de manejar el evento clic. Le pasas una función que se ejecutará cuando el usuario pulse el botón. Es equivalente a addEventListener("click", ...) de JavaScript vanilla, pero integrado directamente en el JSX.

Inputs controlados

<input
    value={nombre}
    onChange={(e) => setNombre(e.target.value)}
    placeholder="Escribe tu nombre"
/>

En React, los inputs se manejan de forma controlada: el valor del input siempre viene del estado (value={nombre}) y se actualiza a través de un evento (onChange). Es como un ciclo: el usuario escribe → onChange actualiza el estado → React re-renderiza el input con el nuevo valor. Pruébalo: escribe tu nombre y mira cómo el saludo cambia en tiempo real.

Con JavaScript vanilla necesitarías un addEventListener("input", ...) más un querySelector más un textContent = .... Con React es un value y un onChange.

Resumen

• React es una librería de JavaScript para construir interfaces de usuario, creada por Meta.
• Una SPA carga una sola página HTML y JavaScript se encarga de la navegación y el renderizado.
• El Virtual DOM permite actualizaciones eficientes comparando estados antes de tocar el DOM real.
• Se crea un proyecto con npm create vite@latest nombre -- --template react, que usa Vite como bundler. Vite instala las dependencias y arranca el servidor automáticamente.
• Un componente React es una función que devuelve JSX (HTML dentro de JavaScript).
• useState crea variables de estado, {} muestra datos en el JSX, onClick maneja eventos y los inputs controlados conectan formularios con datos.

En la siguiente lección vamos a profundizar en JSX y los componentes — aprenderás a dividir tu interfaz en piezas reutilizables y a dominar la sintaxis que hace que React sea tan productivo.