⤆ Go Back

Django and ReactJS – A Match Made in Heaven

Django and React is an excellent combination. With React's SPA and Django's long list of essential libraries, we can create outstanding website apps. For this application to work, React will have to interact with Django, i.e., retrieving and storing data. To create the interface with integration, we will create API in the Back-end(Django) and consume that API in Front-end(React).

  • a basic understanding of Python and Django
  • a basic understanding of JS(ECMAScript) and ReactJS

Let's start coding.

Setting up a virtual environment for the project

Never forgot to create a virtual environment for a Django project. Create a folder for your project and move into it. :

1mkdir django-react && cd $_

Install dependency for the python environment, and create a virtual environment.

1sudo apt-get install python3-venv
2python3 -m venv venv
3source venv/bin/activate

Now pull the dependencies for Django and rest framework.

1pip install django djangorestframework

When it completes, you can create a Django project.

1django-admin startproject django_react .

Now we can start building the Django app to store and display contact information.

To create an app in Django, run this command,

1python manage.py startapp contact

After creating this app, your folder structure should look like this,

1(venv) viral@sangani: $ tree -d -L 1
2.
3├── contact
4├── django_react
5└── venv
6
73 directories

Now let's inform django about this newly created app, move to django-react/settings.py, and add the app in INSTALLED_APPS.

1INSTALLED_APPS = [
2 'django.contrib.admin',
3 'django.contrib.auth',
4 'django.contrib.contenttypes',
5 'django.contrib.sessions',
6 'django.contrib.messages',
7 'django.contrib.staticfiles',
8 'contact', # activate the new app
9]

So far, so good that we created a basic layout for the project; in the next section, we will add our models.

Model is nothing but an object representing a table's data from the database. Almost all advanced web framework uses models, and Django is no exception.

Since we are creating a contact app, let's add related table fields Eg: name, email, message, created_at. Your contact/models.py should look something like this,

1from django.db import models
2
3class Contact_info(models.Model):
4 name = models.CharField(max_length=100)
5 email = models.EmailField()
6 message = models.CharField(max_length=300)
7 created_at = models.DateTimeField(auto_now_add=True)

You can go crazy using more fields for the model, but we will have only a few fields for the sake of simplicity. Check out django docs for more advanced model fields. Once you are done with creating models, we can migrate those model to a database via these commands,

1python manage.py makemigrations contact
2python manage.py migrate

You might be thinking this is a Django + React post, why am i talking about testing. Testing is a really important part of any project. I have seen many django test code like this:

1class SomeModelModelTest(TestCase):
2 def setUp(self):
3 SomeModel.objects.create(
4 name=fake.name(),
5 email=fake.email(),
6 phone=fake.phone_number(),
7 message=fake.text(),
8 source=fake.url()
9 )
10 def test_save_model(self):
11 saved_models = SomeModel.objects.count()
12 self.assertEqual(saved_models, 2)

Never do that; there is no point in testing vanilla Django classes nor Django models. Do not test those things which are already tested. If you have added a custom function of created custom manager for your model, Test it. You have a custom view in you views.py, then Test it.

You might get a question, how to know what I should test? Do yourself a favour and install Coverage.

1pip install coverage

Every time you add something in the project, run this coverage on the test to know what exactly you have missed in your tests.

1coverage run --source='.' manage.py test

and then you can generate HTML with this tool,

1coverage html

If you are still there, then in the next section, we will create our serializers for REST APIs.

What is serialization? It is the act of transforming an object into another data format. In our case, from database values to a JSON object. How to do that? Using Django REST serializer!

You can use the Django REST serializer, which will take the burden off you, but there might be some complex cases when you just can't figure out how to do that; in that case, you have to serialize data manually, there are functions in djangorestframework to do so.

In this case, we will take advantage of Django serializers. Create a file contact/serializers.py, and then create a ContactSerializers.

1from rest_framework import serializers
2from .models import Contact_info
3
4class ContactSerializer(serializers.ModelSerializer):
5 class Meta:
6 model = Contact_info
7 fields = ('id', 'name', 'email', 'message')

Open contact/views.py and create this view,

1from .models import Contact_info
2from .serializers import ContactSerializer
3from rest_framework import generics
4
5class ContactListCreate(generics.ListCreateAPIView):
6 queryset = Contact_info.objects.all()
7 serializer_class = ContactSerializer

This is the magic of Django, just with three lines, we have created POST and GET views for Django.

Let's focus on URLs. To configure the URLs, we need to include app URLs in django_react/urls.py.

1from django.urls import path, include
2
3urlpatterns = [
4 path('', include('contact.urls')),
5]

Next up, create a new file contact/urls.py. Then we will connect our ContactListCreate view to a URL.

1from django.urls import path
2from . import views
3
4urlpatterns = [
5 path('api/conatct/', views.ContactListCreate.as_view() ),
6]

Finally, add the Django rest framework in django_react/settings. Add rest_framework in INSTALLED_APPS.

1# Application definition
2
3INSTALLED_APPS = [
4 # omitted for brevity
5 'contact',
6 'rest_framework'
7]

Now you can check the working with

1python manage.py runserver

Go to browsable API at http://localhost:8000/api/contact/

Django REST API View

I have seen many Django developers struggle with this question, How to glue Django and React. Believe me; I have gone through this phase.

Some common question that comes to mind is, Should React Router takes over the routing? or should React mount each component in Django template? I would say it depends. It depends on how good you are with javascript.

So there are Two ways to setup Django and ReactJS.

Option 1

React in its own frontend Django app. Load a single HTML template via Django and let React do its thing. (difficulty: medium)

Option 2

Django Rest Framework as a standalone API and React as standalone SPA. (difficulty: medium-hard, it involves authenticating via JWT. I will write a blog for DRF and JWT soon.)

In this post, we will go through Option 2. If you want me to go through Option 1 as well, let me know at viral.sangani2011@gmail.com

Since we are moving with Option 2, we need to make a few changes in the Django app so that it will allow our React app to communicate via APIs. We need to install django-cors-headers.

1pip install django-cors-headers

Now, head over to django_react/settings.py and add these lines.

1INSTALLED_APPS = [
2 # omitted for brevity
3 'contact',
4 'rest_framework'
5 'corsheaders' # <== This is new
6]

In the same file, edit this.

1MIDDLEWARE = [
2 ....
3 'corsheaders.middleware.CorsMiddleware', # <== Add this line in MIDDLEWARE
4 'django.middleware.common.CommonMiddleware',
5]
6
7CORS_ORIGIN_ALLOW_ALL = True # <== Add this line anywhere in the settings.py

CORS_ORIGIN_ALLOW_ALL = True will allow all IP to connect to our APIs. This is okay for development, but if you want to restrict this, you can create a Whitelist of IPs. Go through this to know more.

Greate now Django part is over, we can move to React.

Requirements: You need to install npm and nodejs to follow along.

Let's create a react app using create-react-app. If you don't have create-react-app, I'd suggest you go here.

You can create a new folder django-react-frontend somewhere else, and follow along.

1npx create-react-app django-react .

We will install a few dependencies to react.

1npm install axios --save

Axios is the promise-based HTTP client that we'll use to make HTTP request calls to our Django API.

Now you have your basic react app ready.

React Starter

Now Let's edit out App.js to make an API call via axios to Django. Make sure your Django server is online at http://localhost:8000.

Paste this code in App.js.

1import React from 'react'
2import './App.css'
3import axios from 'axios'
4
5function App() {
6 const [values, setValues] = React.useState([])
7 React.useEffect(() => {
8 axios.get('http://localhost:8000/api/contact/').then((res) => {
9 console.log(res.data)
10 setValues(res.data)
11 })
12 }, [])
13 return (
14 <div className="App">
15 <header className="App-header">
16 <p>Data from Django</p>
17 {values.length > 0 &&
18 values.map((value) => {
19 return (
20 <div
21 key={value.id}
22 style={{ borderBottom: '2px solid white' }}
23 >
24 <p>
25 <strong>Name:</strong> {value.name}
26 </p>
27 <p>
28 <strong>Email:</strong> {value.email}
29 </p>
30 <p>
31 <strong>Message:</strong> {value.message}
32 </p>
33 </div>
34 )
35 })}
36 </header>
37 </div>
38 )
39}
40
41export default App

This will make a call to DRF and display that data.

React Django

This is a straightforward example of the integration of Django and React. You can do many things now.

In this post we have learned,

-> build a Django REST API
-> structure Django Project with React
-> connect React to Django API

Feel free to change and add new feature to the project.