Iniciar un nuevo proyecto de React

Si deseas crear una nueva aplicación o un nuevo sitio web completamente con React, te recomendamos que elijas uno de los frameworks hechos con React y más populares en la comunidad.

Puedes usar React sin un framework, sin embargo, hemos descubierto que la mayoría de las aplicaciones y sitios web terminan creando soluciones a problemas comunes como la división de código, el enrutamiento, la obtención de datos y la generación de HTML. Estos problemas son comunes a todas las bibliotecas de interfaz de usuario, no solo a React.

Al comenzar con un framework, puedes empezar con React rápidamente y evitar esencialmente tener que construir tu propio framework más adelante.

Profundizar

¿Puedo usar React sin un framework?

Definitivamente puedes usar React sin un framework; así es como usarías React para una parte de tu página. Sin embargo, si estás creando una nueva aplicación o un sitio completamente con React, te recomendamos que uses un framework.

Aquí esta el porqué.

Incluso si no necesitas enrutamiento u obtención de datos al principio, es probable que desees agregar algunas bibliotecas para ello. A medida que tu paquete de JavaScript crece con cada nueva función, es posible que debas descubrir cómo dividir el código para cada ruta individualmente. A medida que tus necesidades de obtención de datos se vuelven más complejas, es probable que encuentres cascadas de red servidor-cliente que hacen que tu aplicación se sienta muy lenta. A medida que tu audiencia incluye más usuarios con malas condiciones de red y dispositivos de gama baja, es posible que debas generar HTML a partir de tus componentes para mostrar el contenido antes, ya sea en el servidor o durante el tiempo de compilación. Cambiar tu configuración para ejecutar parte de su código en el servidor o durante la compilación puede ser muy complicado.

Estos problemas no son específicos de React. Esta es la razón por la que Svelte tiene SvelteKit, Vue tiene Nuxt, etc. Para resolver estos problemas por tu cuenta, deberás integrar tu paquete con tu enrutador y con tu biblioteca de obtención de datos. No es difícil hacer que funcione una configuración inicial, pero hay muchas sutilezas involucradas en hacer una aplicación que se cargue rápidamente incluso a medida que crece con el tiempo. Querrás enviar la cantidad mínima de código de la aplicación, pero hacerlo en una sola petición de ida y vuelta entre el cliente y el servidor, en paralelo con los datos necesarios para la página. Es probable que desees que la página sea interactiva incluso antes de que se ejecute tu código JavaScript, para admitir la mejora progresiva. Es posible que desees generar una carpeta de archivos HTML completamente estáticos para tus páginas de marketing que se pueden alojar en cualquier lugar y seguir funcionando con JavaScript deshabilitado. Desarrollar estas capacidades por tu cuenta requiere mucho trabajo.

Los frameworks de React en esta página resuelven problemas como estos de forma predeterminada, sin trabajo adicional de tu parte. Te permiten comenzar de manera muy sencilla y luego escalar tu aplicación según tus necesidades. Cada framework de React tiene una comunidad, por lo que es más fácil encontrar respuestas a las preguntas y actualizar las herramientas. Los frameworks también brindan estructura a tu código, ayudándote a ti y a otros a retener el contexto y las habilidades entre diferentes proyectos. Por el contrario, con una configuración personalizada es más fácil quedarte atascado en versiones de dependencia no admitidas, y esencialmente terminarás creando tu propio framework, aunque uno sin comunidad o ruta de actualización (y si es algo como los que hemos hecho en el pasado, diseñado al azar).

Si tu aplicación tiene restricciones inusuales que estos frameworks no cumplen bien o prefieres resolver estos problemas tú mismo, puedes implementar tu propia configuración personalizada con React. Toma react y react-dom de npm, configura tu proceso de compilación personalizado con un paquete como Vite o Parcel y agrega otras herramientas a medida que las necesites para el enrutamiento, la generación estática o el renderizado del lado del servidor, y más.

Frameworks React de nivel de producción

Estos frameworks brindan todas las características que necesitas para implementar y escalar tu aplicación en producción y están trabajando para respaldar nuestra visión de arquitectura full-stack. Todos los frameworks que recomendamos son de código abierto, con comunidades activas que brindan soporte, y pueden ser desplegados en tu propio servidor o en un proveedor de alojamiento. Si eres autor de un framework interesado en ser incluido en esta lista, por favor, háznoslo saber.

**Next.js’ (Pages Router) es un framework completo de React. Es versátil y te permite crear aplicaciones React de cualquier tamaño, desde un blog mayormente estático hasta una aplicación dinámica compleja. Para crear un nuevo proyecto de Next.js, ejecuta en tu terminal:

Terminal
npx create-next-app@latest

Si no tienes experiencia con Next.js, prueba el curso introductorio de Next.js.

El mantenimiento de Next.js está a cargo de Vercel. Puedes implementar una aplicación Next.js en cualquier alojamiento de Node.js, serverless, o en tu propio servidor. Next.js también admite una exportación estática que no requiere un servidor.

Remix

Remix es un framework de React muy completo con enrutamiento anidado. Te permite dividir tu aplicación en partes anidadas que pueden cargar datos en paralelo y actualizarse en respuesta a las acciones del usuario. Para crear un nuevo proyecto Remix, ejecuta:

Terminal
npx create-remix

Si eres nuevo en Remix, mira el tutorial del blog de Remix (corto) y el tutorial de la aplicación (largo).

Remix es mantenido por Shopify. Cuando creas un proyecto Remix, debes elegir su destino de implementación. Puedes implementar una aplicación Remix en cualquier ambiente Node.js, alojamiento sin servidor usando o escribiendo un adaptador.

Gatsby

Gatsby es un framework de React para sitios web rápidos respaldados por un CMS. Su ecosistema es rico en complementos y su capa de datos GraphQL simplifica la integración de contenido, API y servicios en un sitio web. Para crear un nuevo proyecto de Gatsby, ejecuta:

Terminal
npx create-gatsby

Si eres nuevo en Gatsby, revisa el tutorial de Gatsby.

Gatsby es mantenido por Netlify. Puedes implementar un sitio estático de Gatsby en cualquier alojamiento estático. Si optas por usar funciones solo del servidor, asegúrate de que tu proveedor de alojamiento las admita para Gatsby.

Expo (para aplicaciones nativas)

Expo es un framework de React que te permite crear aplicaciones web, iOS y Android universales con interfaces de usuario verdaderamente nativas. Proporciona un SDK para React Native que facilita el uso de las partes nativas. Para crear un nuevo proyecto Expo, ejecuta:

Terminal
npx create-expo-app

Si eres nuevo en Expo, revisa el tutorial de Expo.

Expo es mantenida por Expo (empresa). La creación de aplicaciones con Expo es gratuita y puede enviarlas a las tiendas de aplicaciones de Google y Apple sin restricciones. Expo también ofrece servicios en la nube de pago opcionales.

Frameworks React de última generación

A medida que exploramos cómo continuar mejorando React, nos dimos cuenta de que integrar React más estrechamente con los frameworks (específicamente, con tecnologías de enrutamiento, agrupación y servidor) es nuestra mayor oportunidad para ayudar a los usuarios de React a crear mejores aplicaciones. El equipo de Next.js acordó colaborar con nosotros en la investigación, el desarrollo, la integración y la prueba de funciones de React de última generación independientes del framework como React Server Components.

Estas funcionalidades están cada día más cerca de estar listas para producción, y hemos mantenido conversaciones con otros desarrolladores de paquetes y frameworks para integrarlas. Esperamos que en uno o dos años todos los frameworks que aparecen en esta página sean totalmente compatibles con estas funciones. (Si eres autor de un framework y estás interesado en colaborar con nosotros para experimentar con estas funciones, ¡háznoslo saber!).

Next.js (App Router)

El App Router de Next.js es un rediseño de las API de Next.js con el objetivo de cumplir con la visión de arquitectura de pila completa (full-stack) del equipo de React. Te permite obtener datos en componentes asíncronos que se ejecutan en el servidor o incluso durante la compilación.

Next.js es mantenido por Vercel. Puedes implementar una aplicación Next.js en cualquier alojamiento Node.js o sin servidor, o en tu propio servidor. Next.js también admite una exportación estática que no requiere un servidor.

Profundizar

¿Qué características conforman la visión de la arquitectura completa del equipo de React?

El paquete App Router de Next.js implementa completamente la especificación oficial de los componentes del servidor React. Esto te permite combinar componentes compilados, solo de servidor e interactivos en un solo árbol de React.

Por ejemplo, puedes escribir un componente React solo para el servidor como una función «asincrónica» que es leída desde una base de datos o desde un archivo. Luego puedes pasar datos desde allí a tus componentes interactivos:

// Este componente se ejecuta *solo* en el servidor (o durante la compilación).
async function Talks({ confId }) {
// 1. Estás en el servidor, así que puedes hablar con tu capa de datos. No se requiere punto final de API.
const talks = await db.Talks.findAll({ confId });

// 2. Agrega cualquier cantidad de lógica de representación. No harás que tu paquete de JavaScript sea más grande.
const videos = talks.map(talk => talk.video);

// 3. Pasa los datos a los componentes que se ejecutarán en el navegador.
return <SearchableVideoList videos={videos} />;
}

El App Router de Next.js también integra obtención de datos con Suspense. Esto te permite especificar un estado de carga (como un esqueleto) para diferentes partes de tu interfaz de usuario directamente en tu árbol React:

<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>

Los Componentes del Servidor y Suspense son funcionalidades de React, no funcionalidades de Next.js. Sin embargo, adoptarlos a nivel del framework requiere compromiso y un trabajo de implementación no trivial. Por el momento, el App Router de Next.js es la implementación más completa. El equipo de React está trabajando con los desarrolladores de paquetes para que estas características sean más fáciles de implementar en la próxima generación de frameworks.