React Fundamentals y Setup

Por qué existe React (viene de tu clase de DOM)

Hace unas semanas construiste una app manipulando el DOM a mano: querySelector, createElement, addEventListener. Y viste el reto del contador que se aceleraba — listeners que se acumulaban, estado que vivía en dos lados a la vez, y un <span> que había que acordarse de actualizar cada vez que cambiaba un dato.

Ese es exactamente el problema que React resuelve. En vanilla JS tú describes los pasos: "busca el elemento, cámbiale el texto, agrega el listener, acuérdate de quitarlo". En React describes el resultado: "cuando el contador vale N, la pantalla se ve así". React se encarga de los pasos.

Esa diferencia tiene nombre: pasar de imperativo (cómo) a declarativo (qué).

Los cuatro conceptos base

• Biblioteca de UI — React no es un framework completo: se ocupa de la interfaz. Rutas, peticiones o estilos los eliges tú (por eso en dos semanas agregamos React Router).
• Componentes — piezas de UI reutilizables. Un componente es solo una función que devuelve JSX. Nada más.
• Estado — los datos que, al cambiar, deben repintar la pantalla. React vuelve a llamar a tu función y compara.
• Virtual DOM — la razón de que esto sea rápido.

Virtual DOM, sin misticismo

Tocar el DOM real es caro: cada cambio puede disparar recálculos de layout en el navegador. Si repintaras la pantalla completa en cada cambio, la app se arrastraría.

React mantiene en memoria una representación ligera de cómo debería verse la UI. Cuando algo cambia:

1. Genera la versión nueva en memoria (barato, son objetos JS).
2. La compara con la anterior.
3. Toca el DOM real solo donde hubo diferencias.

Por eso puedes "repintar todo" en tu cabeza y que en la práctica solo cambie un texto. Y por eso las key de las listas importan tanto: son la pista que React usa para saber quién es quién entre una versión y la siguiente.

Un componente es una función

Tres reglas que el compilador no perdona:

jsx
Copiar
1// ✅ Nombre con Mayúscula inicial — así React lo distingue de una etiqueta HTML
2function TarjetaProducto({ nombre, precio }) {
3  return (                      // ✅ devuelve UN solo elemento raíz
4    <article className="tarjeta">
5      <h3>{nombre}</h3>
6      <p>${precio}</p>
7    </article>
8  );
9}
10
11// ❌ minúscula: React lo interpreta como una etiqueta HTML llamada "tarjeta"
12function tarjeta() { ... }

Si necesitas devolver varios elementos sin un contenedor extra, se usa un Fragment: <>...</>. Es un envoltorio que no genera HTML.

Setup con Vite

• Crear un proyecto rápido y liviano con npm create vite@latest.
• Vite ofrece recarga en caliente, build rápido y configuración moderna.

bash
Copiar
1npm create vite@latest mi-app-react -- --template react
2cd mi-app-react
3npm install
4npm run dev

JSX

JSX no es HTML: es una sintaxis que se traduce a llamadas de JavaScript. Se parece lo suficiente para ser cómodo, y difiere lo suficiente para confundir. Las diferencias que sí importan:

jsx
Copiar
1function Saludo() {
2  const nombre = "Juan";
3  const activo = true;
4
5  return (
6    <div className="saludo" style={{ color: "navy", fontSize: 18 }}>
7      <h1>Hola {nombre}</h1>
8      <p>{activo ? "En línea" : "Desconectado"}</p>
9      <label htmlFor="correo">Correo</label>
10      <input id="correo" />
11      <img src="/logo.png" alt="Logo" />
12    </div>
13  );
14}

• className, no class — class es palabra reservada en JavaScript. Igual htmlFor en vez de for.
• {} inserta expresiones, no sentencias. Cabe una variable, una operación o un ternario; no cabe un if ni un for.
• style recibe un objeto con propiedades en camelCase y números sin unidad: {{ fontSize: 18 }}, no "font-size: 18px".
• Todas las etiquetas se cierran, incluso las que en HTML no lo requerían: <img />, <input />, <br />.

El renderizado condicional y el "0 fantasma"

Para mostrar algo condicionalmente se usa && o un ternario. Pero cuidado con este clásico:

jsx
Copiar
1{mensajes.length && <Aviso />}     // 🚨 si length es 0, ¡pinta un "0" en pantalla!
2{mensajes.length > 0 && <Aviso />} // ✅

0 es un valor falsy pero renderizable, así que React lo pinta. Con false, null o undefined no pasa nada. Es un bug que aparece constantemente en código generado por IA — y ahora lo reconoces a simple vista.

La estructura del proyecto Vite

Después de npm run dev vas a ver esto:

mi-app-react/
├── index.html          ← el único HTML; tiene <div id="root">
├── src/
│   ├── main.jsx        ← punto de entrada: monta <App /> en el root
│   ├── App.jsx         ← tu componente raíz — aquí empiezas
│   └── components/     ← tus componentes (créala tú)
└── package.json

El flujo es: index.html tiene un div vacío → main.jsx monta React ahí → App.jsx decide qué se ve. Toda tu app cuelga de ese árbol.