Integración de plantillas de Django con React para páginas web dinámicas

Share on X (Twitter)Share on FacebookShare on LinkedInShare on Email

Django es un framework Python de alto nivel que facilita el desarrollo rápido y ofrece un diseño claro y pragmático. Django es popular gracias a su robustez, escalabilidad y abstracción de alto nivel para crear sitios web dinámicos con Python.

Django está diseñado según el principio DRY (Don’t Repeat Yourself) y permite la automatización de cada paso repetitivo del ciclo de desarrollo. Aquí es donde el Lenguaje de Plantillas de Django (DTL) entra en juego. DTL permite integrar la lógica de Python en archivos HTML estáticos para renderizarlos dinámicamente con datos del lado del servidor.

Por otro lado, React es una biblioteca JavaScript versátil para crear interfaces de usuario mejoradas. React se utiliza principalmente para desarrollar aplicaciones de una sola página donde los datos cambian con el tiempo. Aprovecha una arquitectura basada en componentes y utiliza programación declarativa para construir interfaces de usuario, lo que simplifica las complejidades de JavaScript. Al compilarse con el gestor de paquetes de Node (npm), el código se compila en JavaScript simple para ejecutarse en cualquier navegador.

En este artículo, crearemos un sitio de blog de demostración dinámico utilizando Django y React para mostrar la fusión de las funcionalidades del lado del servidor de Django y la interfaz de usuario interactiva de React.

¿Por qué integrar React con Django?

Django está diseñado principalmente para servir archivos estáticos, y el framework de React, basado en componentes, se puede integrar fácilmente en plantillas gobernadas por Django. Esto nos brinda la ventaja de que el framework de aplicaciones estáticas de una sola página de React funciona como una aplicación dinámica multipágina.

React está diseñado para funcionar de forma aislada, renderizando sus componentes en el navegador del cliente y actualizando toda la aplicación cuando se requieren cambios drásticos. Sin embargo, con Django sirviendo sus archivos estáticos, toda la aplicación puede residir en una sola unidad. Esto no solo integra a la perfección el backend del servidor con el navegador del cliente, sino que también permite a los desarrolladores frontend y backend trabajar en el escalado o la depuración de toda la aplicación sin interferir entre sí.

En este artículo, experimentaremos con el modelo de un blog cuyo frontend se renderiza en React. Esto demostrará cómo Django puede aprovechar la flexibilidad de un framework frontend versátil como React para integrar un framework backend robusto en una sola unidad.

El sitio web simplemente mostrará opciones de categorías de entradas de blog para que los usuarios elijan, así como el ID y la categoría del artículo en el navegador del cliente. Esta configuración de Django-React es ideal no solo para renderizar dinámicamente múltiples componentes de React, sino también para actualizarlos con datos del servidor sin tener que reimplementar todo el framework cada vez.

Esta es una demostración del sitio web básico que construiremos:

Preparando la plantilla de Django

Comenzaremos inicializando una plantilla de Django, index.htmlubicada en el directorio de plantillas de nuestra blogSelectoraplicación. Esta incluirá las etiquetas div que nuestra aplicación de React montará en nuestro archivo index.html, que se verá así:

{% load static %}!DOCTYPE htmlhtmlhead titleArticle Categorías/title/headbody div data-article-id="48" data-category="decoración_del_hogar"/div div data-categories='["Decoración del hogar", "Deportes", "Salud", "Tecnología", "Ciencia"]'/div script src="{% static 'js/main.93d099db.js' %}"/script /body/html

Tenga en cuenta que cada div tiene un ID único que corresponde a un componente específico de React. De esta forma, al renderizar esta plantilla HTML en el servidor de Django, los componentes de React correspondientes se vincularán a estos divs.

Renderizar componentes de React mediante una plantilla HTML no es un gran problema en sí mismo, pero la cosa se pone interesante cuando entra en juego el DTL. En la etiqueta script, vinculamos el archivo . de React main.js. Al definirlo en una plantilla de Django ( {% %}), vinculamos index.htmldirectamente nuestro archivo a los archivos estáticos en el directorio de compilación de nuestra aplicación React.

De esta manera, la estructura DOM en la que React cargará sus componentes puede ser manipulada por Django para hacer que los componentes de React, que de otro modo serían estáticos, se representen dinámicamente.

Creación de componentes React

Con la plantilla de Django lista para usar React, podemos definir dos componentes React para cada div. Como queremos mostrar el ID del artículo y la categoría enviados desde el servidor al navegador del cliente, podemos definir un archivo JavaScript en el directorio de la aplicación blogSelector de React para ello. De esta forma, nuestro Article.jsscript simplemente obtendrá el ID del artículo y las propiedades de la categoría y los renderizará en un div.

A continuación, necesitamos definir otro archivo JavaScript en el mismo directorio para gestionar la lista de categorías disponibles enviada desde la plantilla de Django. Para ello, podemos crear un blog_selection.jsarchivo que tome como argumento una lista de categorías y la represente en un div.

Con nuestro artículo y catagory_selectioncomponentes listos, podemos definir nuestro index.js, que es el punto de entrada de nuestra aplicación React. El código será el siguiente:

importar React desde 'react'; importar ReactDOM desde 'react-dom/client'; importar Article desde './Article'; importar Category_selection desde './catagory_selection'; document.addEventListener('DOMContentLoaded', () = { const articleContainer = document.getElementById('content'); if (articleContainer) { const articleId = articleContainer.getAttribute('data-article-id'); const category = articleContainer.getAttribute('data-category'); const root = ReactDOM.createRoot(articleContainer); root.render(Article article_id={articleId} category={category} /); } const categoryContainer = document.getElementById('category-choice'); if (categoryContainer) { const categoryString = categoryContainer.getAttribute('categorías-de-datos'); const categorías = JSON.parse(categoriesString); const raíz = ReactDOM.createRoot(categoryContainer); raíz.render(Selección_de_categoría selector_de_categoría={categorías} /); }});

La estructura de index.jsestá diseñada para ser el punto de entrada de Django a nuestra blogSelectoraplicación. Cuando el servidor del cliente realiza una solicitud, index.htmlse llama a [del lado del servidor], cargando el DOM. Esto activa nuestro detector de eventos en [nombre del archivo] index.js, y React adquiere los elementos [nombre del archivo] 'content'y [ nombre del archivo] mediante sus nombres de ID.'category-choice'

A continuación, se obtienen los atributos ID, categoría y elección del artículo de sus respectivos divs. Finalmente, el artículo y category_selectionlos componentes se montan en el DOM mediante la root.renderfunción.

Puede ver, desde una perspectiva de flujo de datos, que la plantilla Django tiene el control total de lo que la aplicación React representa en el navegador del cliente.

Pasando datos de Django a React

Al pasar datos de Django a los componentes de React para su renderización, usaremos el view.pyarchivo en el directorio de nuestra aplicación de Django. Por ejemplo, podemos enviar propiedades como el ID del artículo, la categoría y las categorías disponibles como argumentos a index.html, directamente donde se renderiza.

El código para nuestro views.pyserá algo como esto:

from django.shortcuts import render# Crea tus vistas aquí.def index(request): context = { 'article_id': '49', # ID de artículo de ejemplo 'catagory': 'sports', # Categoría de ejemplo # Genera dinámicamente la lista de categorías como cadena JSON si es necesario 'catagories': '["decoración del hogar", "deportes", "salud", "tecnología", "ciencia"]' } return render(request, "blogSelector/index.html", context)

Para capturar estas propiedades, podemos actualizar nuestro index.htmlcódigo para incluir los marcadores de posición DTL de la siguiente manera:

{% load static %}!DOCTYPE htmlhtmlhead titleArticle Categorías/title/headbody div data-article-id="{{ article_id }}" data-catagory="{{ categoría }}"/div div data-catagories='{{ categorías }}'/div script src="{% static 'js/main.95696f76.js' %}"/script /body/html

Al realizar estos cambios simples en el lado del servidor, ahora podemos hacer que nuestra aplicación React, que funciona como una SPA (aplicación de página única), actúe como una aplicación de varias páginas.

Actualización dinámica de contenido en React

Con la configuración actual, nuestros blogs se renderizan dinámicamente al sitio desde los servidores de Django. Este servidor es la puerta de entrada para todo tipo de personalizaciones en el sitio.

La configuración más básica que podríamos querer incluir podría ser simplemente incorporar la gestión de estado en el sitio de modo que cuando el usuario seleccione una categoría, se envíe al servidor a través de API para obtener el ID del artículo correspondiente y mostrarlo en el navegador del cliente.

Esto se puede hacer de varias maneras en el lado de React, pero DTL le brinda una mayor flexibilidad con respecto a cómo manejar las solicitudes de los usuarios sobre la marcha, lo que es bastante difícil de atender con las limitaciones de la representación de páginas estáticas en React.

Podemos mejorar nuestro views.pyarchivo para manejar la POSTsolicitud activada por un cambio de estado específico, implementando estas modificaciones necesarias:

CATEGORÍA_A_ID_DE_ARTÍCULO = { 'Decoración del hogar': '101', 'Deportes': '102', 'Salud': '103', 'Tecnología': '104', 'Ciencia': '105',}@csrf_exemptdef obtener_id_de_artículo(solicitud): si solicitud.método == 'POST': datos = json.loads(solicitud.cuerpo) categoría = datos.obtener('categoría') id_de_artículo = determinar_id_de_artículo_basado_en_categoría(categoría) devolver JsonResponse({'Id_de_artículo': id_de_artículo})

Simplemente definimos un diccionario que asigna los ID de artículos a sus categorías y cualquier categoría seleccionada por el usuario se utiliza para obtener su ID de artículo correspondiente y enviarlo de regreso al cliente.

Por supuesto, esto es solo una demostración, pero brinda información sobre lo que Django viewscombinado con DTL puede lograr en el contexto de la representación dinámica de páginas al manejar escenarios complejos sin problemas entre el frontend y el backend.

En implementaciones reales, la técnica de mapeo podría usarse para obtener artículos relevantes completos de bases de datos o API de búsqueda y agregar restricciones según el perfil del usuario para obtener contenido personalizado.

Mejores prácticas para Django y React

Mantenga su base de código modulada

Los códigos de los componentes de React deben estar en archivos JavaScript separados o en una aplicación React dedicada. Puedes crear fácilmente una aplicación React usando comandos CLI de npm. Esta distinción hace que el código base de React sea modular y fácil de mantener, y permite a los desarrolladores frontend trabajar con comodidad sin interferir con las plantillas de Django.

Proceso de construcción

Construya la aplicación React finalizada ejecutando npm run buildla compilación en archivos estáticos. Django puede servir estos archivos estáticos con sus plantillas, que se renderizan a petición del usuario, y los componentes React definidos en main.jslos archivos estáticos pueden montarse fácilmente en ellos.

Consejos de depuración para problemas comunes

La integración de estos dos potentes frameworks puede generar complejidad y frustración si no se gestionan adecuadamente los errores. Algunas técnicas de depuración pueden ahorrarle muchos dolores de cabeza.

Comprobar la configuración de archivos estáticos

Debe asegurarse de que Django esté configurado correctamente para servir los archivos estáticos que contienen su aplicación React. Para ello, asegúrese de que ” STATIC_URLy STATICFILES_DIRS” en su archivo settings.pyapunten a los directorios correctos. Una configuración incorrecta puede provocar que los archivos compilados de React no se encuentren o no se sirvan correctamente.

Crear enlace de directorio

Al compilar la aplicación React, la salida se encuentra en el directorio de compilación del directorio raíz de tu proyecto React, y Django debe poder acceder a él. Puedes copiar la jscarpeta build/statica la carpeta estática del directorio raíz de tu aplicación Django o vincularla settings.pypara obtener un enlace más robusto.

Recuerda que durante la compilación, React agrega una referencia de caché al main.jsarchivo de nombre para que puedas usar el comando collect static de Django para garantizar que Django sirva la última versión de tu aplicación React.

Herramientas de depuración

Utilizar las herramientas de desarrollo del navegador para inspeccionar las solicitudes de red en busca de archivos estáticos puede brindarte información sobre el contenido HTML que se está renderizando en comparación con lo esperado. Revisar los errores 404, que se manifiestan si los archivos estáticos de tu directorio de compilación de React no están correctamente enlazados a Django, puede permitirte identificar los campos faltantes que causan errores. Además, la extensión del navegador React Developer Tools puede ser útil para inspeccionar la jerarquía y el estado de los componentes de React.

Verificación cruzada del paso de datos

Al pasar datos de Django a React mediante atributos de datos, es necesario asegurarse de que se serialicen y deserialicen correctamente, según lo previsto por métodos como JSON.parse(). De lo contrario, podría encontrarse con un formato JSON incorrecto o un escape HTML que interrumpa el flujo de datos.

Registros de la consola y registro de Django

Colocar console.loglas sentencias estratégicamente en tu código React puede ayudarte a evitar largas sesiones de depuración. Supervisar el framework de registro de Django para diagnosticar problemas en el backend puede ser muy útil para determinar si el origen del error está en el frontend o en el backend e indicarte exactamente dónde falla la integración.

Conclusión

En la guía, cubrimos los pasos clave para integrar una aplicación React con Django mediante el ejemplo práctico de una aplicación web para blogs. Analizamos cómo esta integración nos permite aprovechar al máximo ambos potentes frameworks.

También demostramos cómo el lenguaje de plantillas (DTL) de Django desempeña un papel fundamental en la representación dinámica de HTML con datos del lado del servidor y en la integración de las capacidades del backend de Django con los componentes frontend responsivos de React. Vimos ejemplos de código para los archivos frontend de React y backend de Django para aprovechar las ventajas de la SPA de React con las funcionalidades del backend de Django, creando páginas web dinámicas, escalables e interactivas.

El artículo también ofrece consejos de depuración y buenas prácticas para simplificar el proceso de desarrollo y aumentar su flexibilidad, permitiendo que varios equipos contribuyan a los flujos de trabajo sin interferir entre sí. Django y React pueden ser una excelente opción en el diverso panorama del desarrollo web. Para ver otro ejemplo de integración de Django y React en un proyecto, consulta este tutorial sobre el uso del framework REST de Django y React.

Empieza ahora

Si quieres conocer otros artículos parecidos a Integración de plantillas de Django con React para páginas web dinámicas puedes visitar la categoría Guias.