Construye una aplicación React desde cero

Si tu aplicación tiene restricciones que los frameworks existentes no cubren bien, prefieres construir tu propio framework o simplemente quieres aprender los conceptos básicos de una aplicación React, puedes construir una aplicación React desde cero.

Paso 1: Instala una herramienta de construcción

El primer paso es instalar una herramienta de construcción comovite,parcel o rsbuild. Estas herramientas de construcción proporcionan funciones para empaquetar y ejecutar código fuente, ofrecen un servidor de desarrollo para desarrollo local y un comando de construcción para desplegar tu aplicación en un servidor de producción.

Vite

Vitees una herramienta de construcción que pretende ofrecer una experiencia de desarrollo más rápida y ligera para proyectos web modernos.

npm create vite@latest my-app -- --template react-ts

Vite es una herramienta con opiniones definidas y viene con configuraciones predeterminadas sensatas listas para usar. Vite tiene un ecosistema rico de complementos para soportar actualización rápida, JSX, Babel/SWC y otras características comunes. Consulta elcomplemento de Reactde Vite o elcomplemento React SWCy elproyecto de ejemplo de React SSRpara comenzar.

Vite ya se está utilizando como herramienta de construcción en uno de nuestrosframeworks recomendados:React Router.

Parcel

Parcelcombina una gran experiencia de desarrollo lista para usar con una arquitectura escalable que puede llevar tu proyecto desde los primeros pasos hasta aplicaciones de producción masivas.

npm install --save-dev parcel

Parcel soporta actualización rápida, JSX, TypeScript, Flow y estilos listos para usar. Consulta lareceta de React de Parcelpara comenzar.

Rsbuild

Rsbuildes una herramienta de construcción impulsada por Rspack que proporciona una experiencia de desarrollo fluida para aplicaciones React. Viene con configuraciones predeterminadas cuidadosamente ajustadas y optimizaciones de rendimiento listas para usar.

npx create-rsbuild --template react

Rsbuild incluye soporte incorporado para características de React como actualización rápida, JSX, TypeScript y estilos. Consulta laguía de React de Rsbuildpara comenzar.

Paso 2: Construye Patrones Comunes de Aplicación

Las herramientas de construcción mencionadas anteriormente comienzan con una aplicación de una sola página (SPA) solo para cliente, pero no incluyen soluciones adicionales para funcionalidades comunes como enrutamiento, obtención de datos o estilos.

El ecosistema de React incluye muchas herramientas para estos problemas. Hemos enumerado algunas que son ampliamente utilizadas como punto de partida, pero siéntete libre de elegir otras herramientas si funcionan mejor para ti.

Enrutamiento

El enrutamiento determina qué contenido o páginas mostrar cuando un usuario visita una URL particular. Necesitas configurar un enrutador para mapear URLs a diferentes partes de tu aplicación. También necesitarás manejar rutas anidadas, parámetros de ruta y parámetros de consulta. Los enrutadores se pueden configurar dentro de tu código o definirse en función de la estructura de carpetas y archivos de tus componentes.

Los enrutadores son una parte central de las aplicaciones modernas y generalmente se integran con la obtención de datos (incluyendo la precarga de datos para una página completa para una carga más rápida), la división de código (para minimizar el tamaño de los paquetes del cliente) y los enfoques de renderizado de páginas (para decidir cómo se genera cada página).

Sugerimos usar:

• React Router
• Tanstack Router

Obtención de datos

Obtener datos de un servidor u otra fuente de datos es una parte clave de la mayoría de las aplicaciones. Hacer esto correctamente requiere manejar estados de carga, estados de error y almacenar en caché los datos obtenidos, lo cual puede ser complejo.

Las bibliotecas especializadas en obtención de datos hacen el trabajo duro de obtener y almacenar en caché los datos por ti, permitiéndote centrarte en qué datos necesita tu aplicación y cómo mostrarlos. Estas bibliotecas se suelen usar directamente en tus componentes, pero también se pueden integrar en los cargadores del enrutador para una pre-carga más rápida y un mejor rendimiento, así como en la renderización del servidor.

¡Ten en cuenta que obtener datos directamente en los componentes puede llevar a tiempos de carga más lentos debido a cascadas de solicitudes de red, por lo que recomendamos pre-cargar datos en los cargadores del enrutador o en el servidor tanto como sea posible! Esto permite que los datos de una página se obtengan todos a la vez mientras se muestra la página.

Si estás obteniendo datos de la mayoría de backends o APIs de estilo REST, sugerimos usar:

• TanStack Query
• SWR
• RTK Query

Si estás obteniendo datos de una API GraphQL, sugerimos usar:

• Apollo
• Relay

División de código

La división de código es el proceso de dividir tu aplicación en paquetes más pequeños que se pueden cargar bajo demanda. El tamaño del código de una aplicación aumenta con cada nueva función y dependencia adicional. Las aplicaciones pueden volverse lentas de cargar porque todo el código de toda la aplicación debe enviarse antes de poder usarse. El almacenamiento en caché, la reducción de funciones/dependencias y el traslado de parte del código para que se ejecute en el servidor pueden ayudar a mitigar la carga lenta, pero son soluciones incompletas que pueden sacrificar la funcionalidad si se usan en exceso.

Del mismo modo, si dependes de que las aplicaciones que usan tu marco dividan el código, podrías encontrarte con situaciones en las que la carga se vuelve más lenta que si no hubiera división de código en absoluto. Por ejemplo,cargar perezosamenteun gráfico retrasa el envío del código necesario para renderizar el gráfico, separando el código del gráfico del resto de la aplicación.Parcel admite la división de código con React.lazy. Sin embargo, si el gráfico carga sus datosdespuésde haber sido renderizado inicialmente, ahora estás esperando dos veces. Esto es una cascada: en lugar de obtener los datos para el gráfico y enviar el código para renderizarlo simultáneamente, debes esperar a que cada paso se complete uno tras otro.

Dividir el código por ruta, cuando se integra con la agrupación y la obtención de datos, puede reducir el tiempo de carga inicial de tu aplicación y el tiempo que tarda en renderizarse el contenido visible más grande de la aplicación (Largest Contentful Paint).

Para instrucciones sobre división de código, consulta la documentación de tu herramienta de construcción:

• Optimizaciones de construcción de Vite
• División de código de Parcel
• División de código de Rsbuild

Mejora del rendimiento de la aplicación

Dado que la herramienta de construcción que seleccionas solo admite aplicaciones de una sola página (SPA), necesitarás implementar otrospatrones de renderizadocomo la renderización del lado del servidor (SSR), la generación de sitios estáticos (SSG) y/o los Componentes del Servidor de React (RSC). Incluso si no necesitas estas funciones al principio, en el futuro puede haber algunas rutas que se beneficiarían de SSR, SSG o RSC.

• Aplicaciones de una sola página (SPA)cargan una única página HTML y actualizan la página dinámicamente a medida que el usuario interactúa con la aplicación. Las SPA son más fáciles de comenzar, pero pueden tener tiempos de carga inicial más lentos. Las SPA son la arquitectura predeterminada para la mayoría de las herramientas de construcción.
• Renderizado en el lado del servidor con streaming (SSR)renderiza una página en el servidor y envía la página completamente renderizada al cliente. El SSR puede mejorar el rendimiento, pero puede ser más complejo de configurar y mantener que una aplicación de una sola página. Con la adición del streaming, el SSR puede ser muy complejo de configurar y mantener. Consulta laguía de SSR de Vite.
• Generación de sitios estáticos (SSG)genera archivos HTML estáticos para tu aplicación en tiempo de construcción. La SSG puede mejorar el rendimiento, pero puede ser más compleja de configurar y mantener que el renderizado en el lado del servidor. Consulta laguía de SSG de Vite.
• Componentes de servidor de React (RSC)te permite mezclar componentes de tiempo de construcción, solo del servidor e interactivos en un único árbol de React. Los RSC pueden mejorar el rendimiento, pero actualmente requieren un conocimiento profundo para configurarlos y mantenerlos. Consulta losejemplos de RSC de Parcel.

Tus estrategias de renderizado deben integrarse con tu enrutador para que las aplicaciones construidas con tu framework puedan elegir la estrategia de renderizado a nivel de cada ruta. Esto permitirá diferentes estrategias de renderizado sin tener que reescribir toda tu aplicación. Por ejemplo, la página de inicio de tu aplicación podría beneficiarse de ser generada estáticamente (SSG), mientras que una página con un feed de contenido podría funcionar mejor con renderizado en el lado del servidor.

Usar la estrategia de renderizado correcta para las rutas correctas puede disminuir el tiempo que tarda en cargarse el primer byte de contenido (Tiempo hasta el primer byte), el primer contenido en renderizarse (Primera pintura con contenido) y el contenido visible más grande de la aplicación en renderizarse (Pintura de contenido más grande).

Y más…

Estos son solo algunos ejemplos de las características que una nueva aplicación necesitará considerar al construir desde cero. Muchas limitaciones con las que te encontrarás pueden ser difíciles de resolver, ya que cada problema está interconectado con los demás y puede requerir un conocimiento profundo en áreas problemáticas con las que quizás no estés familiarizado.

Si no quieres resolver estos problemas por tu cuenta, puedescomenzar con un frameworkque proporcione estas características listas para usar.