Los Cimientos antes de React

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

Imagina que estás usando una aplicación como Instagram o Gmail. Cuando tocas un botón para ver un mensaje, la página no se pone en blanco ni recarga por completo. Simplemente, el contenido nuevo aparece instantáneamente.

Eso es una SPA.

A diferencia de las webs tradicionales que piden al servidor un HTML nuevo por cada clic, una SPA carga un solo archivo HTML al principio y luego JavaScript se encarga de reescribir el contenido dinámicamente. React es el rey de esta arquitectura.

2. Repaso Fugaz de JS Moderno

Para escribir React limpio, necesitas dejar atrás algunas viejas costumbres. Aquí están los 3 pilares que usaremos todos los días:

Arrow Functions

Son más concisas y manejan el contexto de una forma más predecible.

// Antes
function saludar(nombre) {
  return "Hola " + nombre;
}

// Ahora (Arrow Function)
const saludar = (nombre) => `Hola ${nombre}`;

Desestructuración (Destructuring)

En React, recibirás "props" (propiedades) todo el tiempo. La desestructuración nos permite extraer lo que necesitamos limpiamente.

const usuario = {
  nombre: "Victor",
  edad: 22,
  rol: "Admin",
};

// Extraemos solo lo que necesitamos
const { nombre, rol } = usuario;

console.log(nombre); // "Victor"

El método .map()

Olvídate del bucle for tradicional para mostrar listas. En React, transformamos arrays de datos en arrays de elementos visuales usando .map().

const tecnologias = ["React", "Next.js", "Vite"];

// Transformamos el array
const lista = tecnologias.map((tech) => {
  return `Aprender ${tech}`;
});

// Resultado: ['Aprender React', 'Aprender Next.js', 'Aprender Vite']

3. Instalación del Entorno: El fin de Create React App

Durante años usamos create-react-app, pero hoy en día es lento y pesado. El estándar moderno de la industria es Vite (que significa "rápido" en francés).

Requisitos previos

Asegúrate de tener instalada la versión LTS de Node.js.

Creando el proyecto

Abre tu terminal y ejecuta:

npm create vite@latest mi-primer-proyecto

Selecciona React y luego TypeScript (o JavaScript si prefieres). Luego entra a la carpeta e instala las dependencias:

cd mi-primer-proyecto
npm install
npm run dev

¡Y listo! Verás que el servidor arranca en milisegundos. Ahora sí, tenemos todo listo para empezar a construir.