Integration of React Applications with Django

With the (not so) recent trend of the JS world to go toward high level frameworks (Angular and React to not name them), the web development community goes through exciting changes.

Never before were the websites so fast and responsive. So the architectural trend now tends to separate clearly front and back applications, the later being basically a JSON endpoint (REST or RPC or what else, with CRUD capabilities or not, depending on the kind of website you want to build and on the kind of application you wish to implement). The recent integration of a REST API as the main data source for WordPress is an example of that.

The main web frameworks for respectively Ruby and Python are RoR and Django respectively. Those frameworks come battery included, with a templating language of their own (ERB for RoR and DTL for Django).

But what happens when you want to evolve an old-style HTML site into a full fledged single-page-app and to integrate what über-cool JS framework you’d like in such a web application ?

Today, We will be going to study the particular case of Django and React together and give an overview of what are the current opensource applications that could ease such work.

Going through some of the existing libs

The simple pip search react|grep -i django gives us a nice list to starts with, but we are going to have to make some choices.

Basically, there is two groups of applications when looking for a library that integrates with react. The first one tries to embed everything into Django, but by adding boilerplate and settings that will de facto restrict you in the way you will architecture your application.

The second tries to integrate nicely React components into django templates, we will focus on the second group.

Here is a list of django applications that would fit the bill:

And probably others.

We will focus on the first two, partly because their repositories seem more active and have more contributors. Another reason is while the latter seems really nice, it seems to require heavier change to your current django application code, and we basically want to make seamless changes if possible.

Django React TemplateTags

what it does, how it does it.

Django JSX

what it does, how it does it.

Integrating React Templates into another app

Do a Django projects with the templates you want, put your react components into those templates, then add this project (let’s call it foo) to the requirements of your original project (let’s call it bar). Now you can use ‘foo/templateA.html’ into bar views and original templates, and that’s the way to go.

Advantages: the JS compilation is made separately, basically during pip install (one build step less is really useful). You can make the API evolve separately from the front, and upgrade the front when you are ready.

Requirement for the new app: support Django 1.9 to 2.0 (we need all the versions there). In fact, the tests must ensure that it works with all those versions. Use tox if you need to set up several environment for testing.

Good reads