Integrando manualmente Django y React JS

Tutoriales

Demo Github

Cuando trabajamos con Django,  usamos su compresor de salida HTML, pero que pasa si le agregamos React JS, la famosa y potente librería de Facebook, podemos imaginarnos lo rápido que nuestra aplicación andaría y entre otras la dinámica de nuestra aplicación se vería afectada positivamente, por otro lado mejoraríamos el SEO en Javascript el cual nos impide. La tendencia de las aplicaciones isofomórficas es una realidad. A mi parecer serían un complemento perfecto. En este tutorial vamos a integrar manualmente React JS con Django.

Primero creamos la pagina para nuestro proyecto y antes de cerrar la etiqueta </head> instanciamos las librerías de React JS :

Ahora veamos como se vería en la página completa:

index.py

Ahora vamos a crear nuestra Aplicación, para ello crearemos un modulo en React JS, al cual agregaremos una variable HolaMundo con un par de textos y un video de Youtube, los variables o elementos a imprimir los defino en mi archivo de vistas views.py

Paso seguido vamos a definir los elementos a mostrar en nuestra vista:

views.py

Los archivos los guardaremos en nuestra carpeta static, dentro de ella crearemos otra carpeta llamada js. No olvidemos que definimos la carpeta static como carpeta para nuestros archivos js, css, etc. en nuestro archivo settings.py:

Debo mencionar que en este artículo no pretendo hacer un hola mundo con Django, si no pretendo mostrar como trabajar con React JS dentro de Django.

Si sabes Django, instálalo configúralo, y crear tu aplicación como normalmente lo harías. Luego de todo eso recién podrás integrar React JS mediante este tutorial.

Espero que te sirva de mucho y puedas aplicar React JS a tus proyectos en Django.

Gracias por tu atención.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
  • EdgarMacas

    Muy buena introduccion, desearia que puedas hacer mas articulos relacionados con django + react

    • Claro que si, puedes mencionarnos que tema escribir 🙂

      • EdgarMacas

        desearia ver como funciona los datos que tengo en la base de datos, es decir quiero mostrar una lista de elementos en una paguina es mejor acceder directamente a ellos o es mejor tener un API del cual se van a sacar los datos. espero haberme hecho entender y pues estoy empezando con react y quisiera ver las ventajas que nos ofrece, saludos

        • Te parece si hacemos con Django, Mysql y React js el listado de los registros de la base de datos en una tabla.

          • EdgarMacas

            me parece excelente, gracias por aceptar las suguerencias y estare atento a los articulos que brinden

          • No hay problema, a veces queremos saber que temas les interesan para hacerlos y es importante que nos lo menciones. 🙂