Como usar Django y React JS (Método Manual, no Librería)

2 minuto(s)

En esta página:

Demo Github

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 :


<!-- React JS -->
<script src="{% static "js/react-0.14.8.js" %}"></script>
<script src="{% static "js/react-dom-0.14.8.js" %}"></script>
<script src="{% static "js/JSXTransformer-0.13.3.js" %}"></script>

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

index.html


<html>
<head>
	<title>{{ titulo }}</title>

	{% load staticfiles %}

	<script src="{% static "js/jquery-2.2.2.min.js" %}" type="text/javascript"></script>

	<!-- React JS -->
	<script src="{% static "js/react-0.14.8.js" %}"></script>
	<script src="{% static "js/react-dom-0.14.8.js" %}"></script>
        <script src="{% static "js/JSXTransformer-0.13.3.js" %}"></script>

	<!-- Bootstrap -->
	<link type="text/css" rel="stylesheet" href="{% static "css/bootstrap.min.css" %}">	
	<link type="text/css" rel="stylesheet" href="{% static "css/bootstrap-theme.min.css" %}">	
	<script src="{% static "js/bootstrap.min.js" %}"></script>
</head>
<body>	

	<div class="container">		

		<div id="wra"></div>

		<script type="text/jsx">
			var HolaMundo = React.createClass({
				render: function () {
					return (
					                	
					<div className="row">
						<div className="col-md-12">
					        <h1> {{ titulo }} </h1>

					        {/* Video 16:9 aspect ratio */}
					        <h3>Video: {{ titulo_video_youtube }}</h3>
							<div className="embed-responsive embed-responsive-16by9">
							  <iframe className="embed-responsive-item" src="{{ video_youtube }}"></iframe>
							</div>							
					    </div>
					</div>

					);
				}
			 });



			ReactDOM.render(<HolaMundo /> , document.getElementById('wra'));
		</script>

		<br><br>

		<div class="footer" align="center">
			Desarrollado por <a href="{{ web }}" target="_blank">{{ autor }}</a>
		</div>
		
	</div>

			
</body>
</html>

<html>

<head>

<title>{{ titulo }}</title>

{% load staticfiles %}

</head>

<body>

var HolaMundo = React.createClass({

render: function () {

return (

<h1> {{ titulo }} </h1>

{/* Video 16:9 aspect ratio */}

<h3>Video: {{ titulo_video_youtube }}</h3>

</div>

);

}

});

ReactDOM.render(<HolaMundo /> , document.getElementById('wra'));

</script>

Desarrollado por <a href="{{ web }}" target="_blank">{{ autor }}</a>

</div>

</body>

</html>

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


<script type="text/jsx">
			var HolaMundo = React.createClass({
				render: function () {
					return (
					                	
					<div className="row">
						<div className="col-md-12">
					        <h1> {{ titulo }} </h1>

					        {/* Video 16:9 aspect ratio */}
					        <h3>Video: {{ titulo_video_youtube }}</h3>
							<div className="embed-responsive embed-responsive-16by9">
							  <iframe className="embed-responsive-item" src="{{ video_youtube }}"></iframe>
							</div>							
					    </div>
					</div>

					);
				}
			 });



			ReactDOM.render(<HolaMundo /> , document.getElementById('wra'));
		</script>

var HolaMundo = React.createClass({

render: function () {

return (

<h1> {{ titulo }} </h1>

{/* Video 16:9 aspect ratio */}

<h3>Video: {{ titulo_video_youtube }}</h3>

</div>

);

}

});

ReactDOM.render(<HolaMundo /> , document.getElementById('wra'));

</script>

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

views.py


from django.shortcuts import render

# Vistas
 
def saludo(request):
	autor = "Nube Colectiva"
	web = "https://nubecolectiva.com"
	blog = "https://blog.nubecolectiva.com"
	titulo = "Como usar Django y React JS (Método Manual, no Librería)"
	titulo_video_youtube ="5G y Samsung cambiarán la tecnología móvil."
	video_youtube = "https://www.youtube.com/embed/Bx3Xr7IeUmw"
	context = {    	
		'autor': autor,
		'web': web,
		'blog': blog,
		'titulo': titulo,
		'titulo_video_youtube': titulo_video_youtube,
		'video_youtube': video_youtube
	}
	# devolvemos los datos a la vista saludo.html para printarlos
	return render(request, 'saludo.py', context)

from django.shortcuts import render

# Vistas

def saludo(request):

autor = "Nube Colectiva"

web = "https://nubecolectiva.com"

blog = "https://blog.nubecolectiva.com"

titulo = "Como usar Django y React JS (Método Manual, no Librería)"

titulo_video_youtube ="5G y Samsung cambiarán la tecnología móvil."

video_youtube = "https://www.youtube.com/embed/Bx3Xr7IeUmw"

context = {

'autor': autor,

'web': web,

'blog': blog,

'titulo': titulo,

'titulo_video_youtube': titulo_video_youtube,

'video_youtube': video_youtube

}

# devolvemos los datos a la vista saludo.html para printarlos

return render(request, 'saludo.py', context)

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:


STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
    '/static/',
]

STATIC_URL = '/static/'

STATICFILES_DIRS = [

os.path.join(BASE_DIR, "static"),

'/static/',

]

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.