Here’s my quickstart guide for getting up and running with React on a Django backend.
I’m writing this because no tutorial I’ve found does a good job of explaining the big picture for why these technologies fit together the way they do. So, I’ll start with an architecture overview before we dive into the code.
How Django works to serve files
Django is a web server and framework for delivering web pages to users. When you type a URL into the address bar, it goes through a bunch of routing, but it eventually ends at a server like Django.
Django decides what to do with the URL you typed in. It also can take a look at the headers of your request, including cookies and other tokens, to show you different content depending on who you are. Finally, Django can also handle different request types like GET, POST, PUT, etc. Ultimately, Django sends back some type of response that gets displayed on your browser.
At its simplest, a Django response flow looks like this:
from django.urls import path
from . import viewsurlpatterns = [
from django.http import HttpResponsedef index(request):
return HttpResponse("You're at the index!")def hello(request):
return HttpResponse("Hello there, user.")
In this simple example, when you type whatever.com/hello, Django knows to send back the HttpResponse defined in
hello , because that’s what you’ve specified in your
urlpatterns. If you just visit the index — whatever.com/ — then you’ll get the HttpResponse defined in
Forgive me if this is too basic, but understanding that Django is just a way to route requests and decide what response to send is the key to finally demystifying how Django works under the hood.
How React gets deployed
views.py we’ll just need to point at the React files. It’ll end up something like this:
from django.shortcuts import renderdef index(request):
return render(request, "path/to/react/build/index.html")
When Django receives a request for
index, it will serve up the static production build of React that we’ve created.
Letting React talk to the database
This is the trickier part. Often, our React application will need to have access and make changes to information in the database. The database models are defined in Django, so we need a way for Django to act as a middleman between React and the database.
To do so, we create interfaces known as serializers. These serializers convert the data from the database into JSON format for React to consume.
For example, when we send a GET request to the serializer for the
User model in an example application, we might get:
HTTP 200 OK
Allow: GET, POST, HEAD, OPTIONS
When React needs to make changes to the database, it creates a JSON-format request and sends it via POST back to the Django serializer.
We could add a new
User to the above example by sending a POST request in this format:
We can do this with any model in our database, not just
User, even custom models. Serializers are actually pretty easy to implement, as we’ll see.
Serializers are the key to allowing React to talk to the database. The Django REST Framework is an open-source extension of Django that makes this super easy.
How it fits together
I made a graphic so we’re on the same page about how all this works:
So, in order to get a React front end working atop a Django back end, what are the steps?
- Create a Django project
- Add Django REST Framework to the project
- Serialize your models so React can consume them
- Create a React app that uses/manipulates the data
- Build a static version of the React app for Django to serve
We’ll actually get to coding in another tutorial. But I know that if someone had just laid out this roadmap for me at the beginning, I would have been a lot less confused about how everything works together.
Here are some posts I’ve written about these topics —
You can learn how to build a REST API in Django with this post I wrote:
Build your first REST API with Django REST Framework
Building a REST API in Django is so super easy. In this tutorial, we’ll walk through the steps to get your first API up…
Learn everything you’d want to know about starting React here:
Like what you’ve read here?
I share my best content with my email list for free.