Agregar React a un Proyecto Existente

Si quieres agregar interactividad a tu proyecto existente, no tienes que reescribirlo en React. Agrega React a tu pila existente y renderiza componentes interactivos de React en cualquier lugar.

Usar React para una subruta completa de tu sitio web existente

Supongamos que tienes una aplicación web existente enexample.comconstruida con otra tecnología de servidor (como Rails), y quieres implementar todas las rutas que comienzan conexample.com/some-app/completamente con React.

Así es como recomendamos configurarlo:

1. Construye la parte de React de tu aplicaciónusando uno de losframeworks basados en React.
2. Especifica/some-appcomo laruta baseen la configuración de tu framework (aquí está cómo:Next.js,Gatsby).
3. Configura tu servidor o un proxypara que todas las solicitudes bajo/some-app/sean manejadas por tu aplicación React.

Esto asegura que la parte de React de tu aplicación puedabeneficiarse de las mejores prácticasintegradas en esos frameworks.

Muchos frameworks basados en React son full-stack y permiten que tu aplicación React aproveche el servidor. Sin embargo, puedes usar el mismo enfoque incluso si no puedes o no quieres ejecutar JavaScript en el servidor. En ese caso, sirve la exportación HTML/CSS/JS (salida de next exportpara Next.js, predeterminado para Gatsby) en/some-app/en su lugar.

Usar React para una parte de tu página existente

Supongamos que tienes una página existente construida con otra tecnología (ya sea una del lado del servidor como Rails, o una del lado del cliente como Backbone), y quieres renderizar componentes interactivos de React en algún lugar de esa página. Esa es una forma común de integrar React—¡de hecho, así es como se veía la mayoría del uso de React en Meta durante muchos años!

Puedes hacer esto en dos pasos:

1. Configura un entorno de JavaScriptque te permita usar lasintaxis JSX, dividir tu código en módulos con la sintaxisimport/export, y usar paquetes (por ejemplo, React) del registro de paquetesnpm.
2. Renderiza tus componentes de Reactdonde quieras verlos en la página.

El enfoque exacto depende de la configuración de tu página existente, así que repasemos algunos detalles.

Paso 1: Configurar un entorno de JavaScript modular

Un entorno de JavaScript modular te permite escribir tus componentes de React en archivos individuales, en lugar de escribir todo tu código en un solo archivo. También te permite usar todos los maravillosos paquetes publicados por otros desarrolladores en el registronpm—¡incluyendo el propio React! Cómo hacer esto depende de tu configuración existente:

• Si tu aplicación ya está dividida en archivos que usan sentenciasimport,intenta usar la configuración que ya tienes. Comprueba si escribir<div />en tu código JS causa un error de sintaxis. Si causa un error de sintaxis, es posible que necesitestransformar tu código JavaScript con Babel, y habilitar elpreset de React para Babelpara usar JSX.
• Si tu aplicación no tiene una configuración existente para compilar módulos JavaScript,configúrala conVite. La comunidad de Vite mantienemuchas integraciones con frameworks de backend, incluyendo Rails, Django y Laravel. Si tu framework de backend no está listado,sigue esta guíapara integrar manualmente las compilaciones de Vite con tu backend.

Para comprobar si tu configuración funciona, ejecuta este comando en la carpeta de tu proyecto:

npm install react react-dom

Luego añade estas líneas de código al principio de tu archivo JavaScript principal (podría llamarseindex.js o main.js):

Si todo el contenido de tu página fue reemplazado por un "¡Hola, mundo!", ¡todo funcionó! Sigue leyendo.

Paso 2: Renderiza componentes de React en cualquier lugar de la página

En el paso anterior, pusiste este código al principio de tu archivo principal:

Por supuesto, ¡en realidad no quieres borrar el contenido HTML existente!

Elimina este código.

En su lugar, probablemente quieras renderizar tus componentes de React en lugares específicos de tu HTML. Abre tu página HTML (o las plantillas del servidor que la generan) y añade un atributoidúnico a cualquier etiqueta, por ejemplo:

Esto te permite encontrar ese elemento HTML condocument.getElementByIdy pasarlo acreateRootpara que puedas renderizar tu propio componente de React dentro:

Observa cómo se conserva el contenido HTML original deindex.html, pero tu propio componente de ReactNavigationBarahora aparece dentro del<nav id="navigation">de tu HTML. Lee ladocumentación de uso de createRootpara aprender más sobre renderizar componentes de React dentro de una página HTML existente.

Cuando adoptas React en un proyecto existente, es común comenzar con componentes interactivos pequeños (como botones), y luego gradualmente seguir "subiendo" hasta que eventualmente toda tu página esté construida con React. Si alguna vez llegas a ese punto, recomendamos migrar aun framework de Reactjusto después para aprovechar al máximo React.

Usar React Native en una aplicación móvil nativa existente

React Nativetambién se puede integrar de forma incremental en aplicaciones nativas existentes. Si tienes una aplicación nativa existente para Android (Java o Kotlin) o iOS (Objective-C o Swift),sigue esta guíapara añadir una pantalla de React Native a ella.