ReactJS with Django - real use

Question

I got a little worried with React, and I really like it. This is much more verbose than Angular (ng-repeat with a | filter is priceless), but good.

The thing that annoys me is how I should use React with Django templates. Should I put all javascript in the templates along with the HTML markup.

Angular's implementation was pretty smooth. I just added some attributes to the form class / django form and then wrote javascript in a separate file. Include this file and do it.

How to “use” to respond? What is the right way?

Thanks in advance!

Answer 1

Since you want to use React with Django templates, I assume that React code will only affect specific parts of your page. Based on this assumption, the following explanations are written.

First of all, you do not need to put all the JS code in the template - in fact it will be a mess.

You can create a separate JS-based build process using Webpack ( check out this method ). This improves your client-side code capabilities by allowing you to use CommonJS modules in a browser that you can directly extract from npm, including React .

Webpack, in turn, will generate a package (or several packages, depending on the nature of your application and Webpack configuration) that you will need to include in your Django templates using <script> tags, as usual.

Now you need to make a call to React.render() to make your React application somewhere in the existing page layout. You will need to use an empty HTML element with a specific id / class name as the mount point for the application.

But there is a caveat: you cannot access CommonJS modules directly from browser or Django templates. So either you

• output React and your application to the window object or
• create a module with glue code to handle application initialization and set this method for the window object.

In any case, you will need to call the initialization code directly from the templates (check the glue code example , and the call to initialize the application ).

This initialization step also allows you to pass the variables available in Django templates into JS code.

The last Django template will look something like this:

 {% load staticfiles %} {% extends 'base.html' %} {% block scripts %} <script type="text/javascript" src="{% static 'path/to/app.bundle.js' %}"></script> <script type="text/javascript"> // Initialization glue code window.MyApp.init({el: '.app-mountpoint'}); </script> {% endblock %} {% block content %} <!-- Your template contents --> <!-- The mount point of your app --> <div class="app-mountpoint" /> {% endblock %} 

And glue code:

 var React = require('react'); var MyAppComponent = require('MyAppComponent'); window.MyApp = { init: function (opts) { var mountPoint = document.querySelector(opts.el); React.render(<MyAppComponent />, mountPoint); } }; 

I know that all this may seem overwhelming at the beginning (even more compared to the few steps that you had with Angular), but believe me, it will pay off in the end.

So to summarize:

• Writing React Code in Separate JS Files
• Use Webpack (using CommonJS modules) to link React code
• Include package in your django templates
• Change React code with glue code in Django templates

Answer 2

What if you think the interface and backend are two different independent objects? I mean the following:

• Django should only be an API and respond with json data
• The interface should only be static files served by nginx
• You may need to deal with CORS to ensure communication between them. One option is to allow pre-flight requests from your interface, and another option is to configure the nginx proxy. This is a separate issue and you need to find it if you need more information.

I think this architecture allows you to separate things and not integrate them. The situation in the frontend / React ecosystem is too complicated, so I think that you need to consider the simplicity of the configuration.

I would also be interested to know how the deployment process will look for this architecture (which tools to use?), So please add comments if you have any suggestions and I will update the answer to provide useful information for future readers.

Answer 3

I have implemented something similar to what you ask. My interface is completely related to the reaction that was compiled using webpack, and my templates are created in django.

So, I do the following: -

• Use a react router and react to the creation of .jsx / .js code.
• Compile with webpack.
• Use django-webpack

So django-webpack works very well and helps you isolate compilation outside of django to make your thoughts work beautifully and scalably.