React, Next y compañía en lenguaje de diseñador
Qué es un framework web, un componente y una prop, y qué aportan React, Next.js, Vue, Svelte y Astro. Guía para diseñadores que trabajan con herramientas de IA.
¿Qué es un framework y en qué se diferencia de una biblioteca?
MDN define un framework como una biblioteca que ofrece opiniones sobre cómo se construye el software, lo que da predictibilidad y homogeneidad a una aplicación. Resuelven un problema concreto: cuando cambian los datos, hay que actualizar la pantalla.
Una precisión útil: MDN señala que, técnicamente, React no es un framework sino una biblioteca para renderizar componentes de interfaz. En la práctica se le llama framework igualmente; lo útil es saber qué parte del proyecto decide cada herramienta.
¿Qué es un componente y cómo viajan los datos?
La documentación de React lo resume así: un componente es una función de JavaScript a la que puedes añadir marcado, y puede ser tan pequeño como un botón o tan grande como una página entera. El marcado se escribe en JSX, una sintaxis que se parece a HTML pero es más estricta.
Es casi un sistema de diseño en código: si cambia el componente “Tarjeta de producto”, cambia en todas las pantallas donde aparece.
Los datos bajan por props. Según React, cada componente padre puede pasarle información a sus hijos mediante props, que recuerdan a los atributos de HTML pero admiten cualquier valor de JavaScript. React recomienda además escribir los componentes como funciones puras: con los mismos datos de entrada, devuelven el mismo resultado, y eso evita una clase entera de errores desconcertantes a medida que crece el código.
La guía “Thinking in React” empieza justo donde tú: dibujar cajas alrededor de cada componente de la maqueta y nombrarlas. Y añade que, si trabajas con un diseñador, quizá ya los nombró en su herramienta: “pregúntale”.
¿Qué ofrecen Next.js, Vue, Svelte y Astro?
Datos de la documentación oficial de cada proyecto, consultada el 3 de noviembre de 2026:
| Herramienta | Cómo se describe | Para qué sirve a un diseñador saberlo |
|---|---|---|
| React (19.3, septiembre de 2026) | Biblioteca para construir interfaces con componentes | Next.js usa React para la interfaz |
| Next.js (16.4, octubre de 2026) | Framework de React para aplicaciones web full-stack | Define rutas, layouts y qué corre en el servidor |
| Vue (versión 3) | Framework “progresivo” que se apoya en HTML, CSS y JavaScript estándar | Sus archivos .vue juntan lógica, plantilla y estilos de un componente |
| Svelte (con SvelteKit) | Usa un compilador que convierte componentes en JavaScript optimizado; SvelteKit es su framework de aplicaciones | Otra forma de escribir componentes, con un paso de compilación |
| Astro | Framework para sitios de contenido como blogs, páginas de marketing y tiendas | Envía menos JavaScript al navegador y acepta componentes de React, Vue, Svelte y otros |
En Next.js, las rutas salen de las carpetas: una carpeta blog con un archivo page crea la ruta /blog, y una carpeta [slug] dentro genera una página por cada entrada a partir de datos. Un archivo layout define lo que comparten varias pantallas. Mirar las carpetas de un proyecto generado te dice cuántas pantallas tiene realmente.
Para un proyecto nuevo, la documentación de React recomienda empezar con un framework y nombra Next.js, React Router y Expo (para apps nativas). Construir desde cero es posible, pero obliga a elegir tú el enrutamiento y la carga de datos.
¿Cómo elegir sin perderte?
No necesitas dominar el framework para diseñar bien, pero conviene saber qué le pide tu proyecto:
| Pregunta | Qué indica |
|---|---|
| ¿Es una página informativa de pocas pantallas? | MDN dice que un portafolio con unas pocas páginas quizá no necesita framework ni su JavaScript |
| ¿Es un sitio de contenido (blog, marketing)? | Astro se describe pensado para ese tipo de sitio |
| ¿Tiene varias pantallas con datos? | Un framework con rutas ayuda |
| ¿Necesita iniciar sesión y guardar datos? | Hace falta backend, no solo interfaz: frontend vs. backend |
| ¿Quién lo va a mantener? | Elige lo que tu equipo sabe usar |
MDN advierte de costos reales: los frameworks toman tiempo en aprenderse, añaden su propio código al sitio final y, si se escribe todo en JavaScript, pueden producir páginas poco semánticas o inaccesibles. También señala que el enrutamiento del lado del cliente no avisa por sí solo del cambio de página ni mueve el foco, y que ningún framework lo ha resuelto a la perfección. Pídelo en tu diseño.
¿Qué cambia cuando una IA genera la app?
La herramienta suele elegir el framework por ti. La documentación de v0, por ejemplo, dice que trabaja con Next.js, Tailwind y shadcn/ui. Tres consecuencias:
- Lee la estructura. Las carpetas de un proyecto Next.js reflejan sus rutas. Puedes comprobar que cada pantalla del diseño tiene su página; leer código sin saber programar explica cómo.
- El framework también se mantiene. El blog de Next.js anunció lanzamientos de seguridad en julio, agosto y septiembre de 2026, una actualización fuera de calendario el 14 de octubre y otra programada para el 3 de noviembre. Una app publicada necesita a alguien que actualice, como explica deploy para diseñadores.
- Los agentes leen archivos de instrucciones. Desde Next.js 16.2,
create-next-appincluye un archivoAGENTS.mdque indica a los agentes de código que lean la documentación del framework antes de escribir.
Qué corre en el navegador y qué en el servidor se explica en frontend vs. backend; aquí basta saber que el framework decide esa frontera. Para los datos, revisa APIs para diseñadores, bases de datos para diseñadores y habilidades técnicas mínimas.
Ejemplo
Ejemplo ilustrativo: una diseñadora quiere un catálogo con búsqueda y una página de detalle por producto. Siguiendo “Thinking in React”, dibuja cajas sobre su maqueta y las nombra: Encabezado, BarraDeBusqueda, TarjetaDeProducto y ListaDeProductos. La tarjeta aparece en el listado y en “productos relacionados”, así que es un componente. La herramienta de IA propone Next.js. Revisa las preguntas de la tabla: hay varias pantallas con datos y no hay inicio de sesión. Al abrir el proyecto generado, encuentra una carpeta [slug] con un archivo page, tal como describe la documentación de Next.js. Antes de publicar, lo habla con ingeniería, que confirma que el equipo ya usa React: la decisión la toma el equipo, no la herramienta.
Cómo aplicarlo mañana
- Dibuja tu app como cajas: una por pantalla y una por cada pieza que se repite. Si una caja aparece en tres pantallas, es un componente: dale un nombre y úsalo igual en Figma y con la IA.
- Para cada caja, anota qué datos recibe y de dónde vienen. Esa lista define luego las props o las llamadas a una API.
- Pregunta al equipo qué framework usa y quién lo actualiza.
- Cuando la IA genere un componente nuevo, pídele que use el nombre de tu diseño. Si no coincide, hay una diferencia que aclarar.
Errores comunes
- Elegir el framework antes de definir el flujo.
- Creer que React es un diseño visual en lugar de una manera de construir la interfaz.
- Usar un framework completo para una página de una sola pantalla.
- Cambiar de framework a mitad del proyecto por moda, o aceptar el que propone la IA sin preguntar quién lo mantendrá.
Fuentes
- React, “Describing the UI” (componentes, JSX, props y componentes puros)
- React, “Thinking in React” (de la maqueta a los componentes)
- React, “Creating a React App” (frameworks recomendados)
- React, “Versions” (versión 19.3)
- Next.js, “Documentation” (qué es Next.js, routers)
- Next.js, “Layouts and Pages” (enrutamiento por carpetas)
- Next.js, blog (versión 16.4 y avisos de seguridad)
- Next.js, “Next.js 16.2: AI Improvements” (AGENTS.md)
- Vue, “Introduction”
- Svelte, “Overview”
- Astro, “Why Astro?”
- MDN, introducción a los frameworks del lado del cliente (qué es un framework, costos y accesibilidad)
- v0, documentación (Next.js, Tailwind, shadcn/ui)