Desde que Create React App quedó deprecado, React recomienda oficialmente comenzar con un framework.
Una nueva forma de comenzar con React: de Create React App a los frameworks
Si vas a crear una nueva app o sitio web con React, se recomienda comenzar con un framework.
Si tu app tiene restricciones que los frameworks existentes no cubren bien, si prefieres construir tu propio framework o si solo quieres aprender los fundamentos de una app de React, puedes crear una app de React desde cero.
Frameworks full-stack
Estos frameworks recomendados admiten todas las funciones necesarias para desplegar y escalar apps en producción. Integran las funciones más recientes de React y aprovechan la arquitectura de React.
Los frameworks full-stack no requieren un servidor
Todos los frameworks de esta página admiten renderizado del lado del cliente (CSR), aplicaciones de una sola página (SPA) y generación de sitios estáticos (SSG). Estas apps pueden desplegarse sin servidor en un CDN o en un servicio de hosting estático. Además, estos frameworks permiten agregar renderizado del lado del servidor por ruta cuando el caso de uso lo requiera.
Esto te permite comenzar con una app solo del cliente y, si tus requisitos cambian más adelante, elegir usar funciones del servidor en rutas individuales sin tener que reescribir la app. Consulta la documentación del framework para saber cómo configurar la estrategia de renderizado.
Next.js (App Router)
El App Router de Next.js es un framework de React que permite apps React full-stack aprovechando al máximo la arquitectura de React.
npx create-next-app@latest
Next.js es mantenido por Vercel. Puedes crear una app con Next.js y desplegarla en Node.js, hosting serverless o tu propio servidor. Next.js también admite exportación estática, que no requiere servidor. Vercel además ofrece servicios en la nube de pago opcionales.
React Router (v7)
React Router es la biblioteca de enrutamiento más popular para React y, cuando se usa con Vite, puede crear un framework React full-stack. Hace énfasis en las Web API estándar y cuenta con plantillas de despliegue listas para distintos runtimes y plataformas de JavaScript.
Para crear un nuevo framework de React Router, usa el siguiente comando.
npx create-react-router@latest
React Router es mantenido por Shopify.
Expo (para apps nativas)
Expo es un framework de React con el que puedes crear apps universales para Android, iOS y web usando UI nativa. Proporciona un SDK de React Native que facilita el uso de las partes nativas. Para crear un nuevo proyecto de Expo, usa el siguiente comando.
npx create-expo-app@latest
Si es la primera vez que usas Expo, consulta el tutorial de Expo.
Expo es mantenido por Expo (la empresa). Crear apps con Expo es gratis y puedes enviarlas sin restricciones a Google o al App Store de Apple. Expo además ofrece servicios en la nube de pago opcionales.
Otros frameworks
Hay otros frameworks emergentes que avanzan hacia la visión full-stack de React.
- TanStack Start (Beta): TanStack Start es un framework React full-stack basado en TanStack Router. Ofrece SSR de documento completo, streaming, funciones de servidor, bundling y muchas herramientas útiles, al igual que Nitro o Vite.
- RedwoodJS: Redwood es un framework React full-stack con paquetes y configuración preinstalados para facilitar la creación de aplicaciones web full-stack.
¿Qué funciones conforman la visión de la arquitectura full-stack del equipo de React?
El bundler App Router de Next.js implementa toda la especificación oficial de React Server Components. Esto permite mezclar componentes de tiempo de build, solo del servidor e interactivos dentro de un único árbol de React.
Por ejemplo, puedes escribir un componente React solo del servidor como una función async que lea una base de datos o archivos. Luego puedes pasar los datos a un componente interactivo.
// Este componente se ejecuta *solo* en el servidor (o solo durante el build).
async function Talks({ confId }) {
// 1. En el servidor, puedes comunicarte con la capa de datos. No se necesita un endpoint de API.
const talks = await db.Talks.findAll({ confId });
// 2. Incluso si agregas lógica de renderizado, no aumenta mucho el tamaño del bundle de JavaScript.
const videos = talks.map(talk => talk.video);
// 3. Pasa los datos al componente que se ejecutará en el navegador.
return <SearchableVideoList videos={videos} />;
}
El App Router de Next.js integra Suspense y la obtención de datos. Te permite especificar directamente estados de carga (por ejemplo, skeleton placeholders) para distintas interfaces de usuario dentro del árbol de React.
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
Los componentes de servidor y Suspense no son funciones de Next.js, sino funciones de React. Sin embargo, adoptarlas a nivel de framework requiere coordinación y trabajo de implementación no trivial. Actualmente, el App Router de Next.js es la implementación más completa. El equipo de React está colaborando con desarrolladores de bundlers para facilitar la implementación de estas funciones en la próxima generación de frameworks.
Comenzar desde cero
Si tu app tiene restricciones que los frameworks existentes no cubren bien, si prefieres construir tu propio framework o si quieres aprender los fundamentos de una app de React, hay otras opciones que puedes usar para comenzar un proyecto de React desde cero.
Comenzar desde cero te da más flexibilidad, pero tendrás que elegir las herramientas que usarás para enrutamiento, obtención de datos y otros patrones de uso comunes. Es parecido a construir tu propio framework en lugar de usar uno que ya existe. Los frameworks que recomendamos incluyen soluciones integradas para estos problemas.
Si quieres construir tu propia solución, consulta la guía para crear una app de React desde cero, que te permite comenzar con herramientas de build como Vite, Parcel o RSbuild.
6 comentarios
React no es más que una biblioteca de UI basada en componentes. Mostrar componentes en HTML es sencillo, pero para crear un sitio web o una app se necesitan muchas funciones. Por eso se recomienda usar un framework. Y esto no es solo porque se trate de React; gran parte de la web moderna se construye mediante frameworks web. Además, React no tiene que usarse necesariamente con un framework basado en React, ya que también puede utilizarse junto con frameworks web creados en distintos lenguajes (por ejemplo, Go, Rust, Java, etc.), así que la elección siempre depende del usuario.
Cuando no se sabe bajo qué limitaciones un programador va a usar React, me parece que la documentación oficial debería estar escrita en un entorno lo más cercano posible a vanilla.
React también puede usarse junto con frameworks web creados en distintos lenguajes, sin que necesariamente sea un framework basado en React (por ejemplo, Go, Rust, Java, etc.).
-> De hecho, por esto mismo, creo que al menos la parte de
get starteden la documentación oficial de React debería guiar para usar React por sí solo, con la menor cantidad posible de dependencias adicionales.Bueno... como yo también estaba estudiando React recientemente,
cuando se descontinuó CRA, las fuentes de estudio que tenía estaban basadas en CRA, así que anduve viendo Next, React Router y otros, pero esos vienen cada uno con sus propias tecnologías añadidas, así que desde la perspectiva de alguien que está aprendiendo React, no me parecen tan adecuados... Personalmente, creo que Vite es lo más rescatable.
En React ahora recomiendan oficialmente empezar con un framework -> aunque ya es una historia bastante tardía, también me hace preguntarme si está bien que desde la documentación oficial de React se recomiende arrancar usando un framework o una herramienta de build específicos.
Hay casos en los que no se puede usar ese framework o herramienta de build dentro de una base de código existente, y también puede sentirse pesado simplemente aumentar las dependencias.
Creo que en esos tiempos en los que bastaba con meter una sola etiqueta
scripten el HTML y simplemente usar las funciones de esa librería, uno estaba mucho más tranquilo. ¿Será una historia demasiado vieja...?Yo también me pregunto si realmente tiene que ser así.