Integrating React with Django Multipage Application

Published in

WeTheITGuys

3 min readFeb 16, 2024

React and Django are powerful tools for building web applications, each with its own strengths. React excels at creating dynamic, interactive user interfaces, while Django provides a robust backend framework for managing data and serving content. Combining these technologies allows developers to leverage the best of both worlds. In this comprehensive guide, we’ll walk through the process of integrating React into a Django multipage application, covering best practices for both development and production environments.

The source code for this project can be found on GitHub.

When to Use This Guide:

This guide is particularly useful in the following scenarios:
1. Transitioning to a Full Application Without APIs:
If you have an existing Django multipage application that is already live and you want to gradually transition it into a full-fledged application with interactive user interfaces, this guide will help you integrate React seamlessly. You may not need to use APIs initially, and you can leverage Django’s existing functionalities while gradually introducing React components for enhanced interactivity.
2. Creating a Single Interactive Page:
Sometimes, you may only need one interactive page within your Django application, such as a dashboard or a data visualization page. In such cases, integrating React with Django for this specific page can enhance the user experience without the need for a complete frontend overhaul.

Prerequisites:

Basic knowledge of Django and React.
Python and Node.js installed on your system.

Step 1: Set Up Django Project:

pip install django

django-admin startproject myproject
cd myproject

Next, create a Django app within the project:

python manage.py startapp myapp

Apply Migrations

python manage.py makemigrations
python manage.py migrate

Step 2: Create a React App:

mkdir frontend
cd frontend

Now, initialize a new React app:

npx create-react-app myreactapp

Step 3: Integrate React with Django:

Configure Django to Serve React Build Files: In your Django project’s urls.py file, add a route to serve the React app:

from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', TemplateView.as_view(template_name='index.html')),
]

2. Include React Bundle in Django Template: In your Django template (index.html), include the bundled JavaScript file dynamically: So that the changes will reflect instantly during development.

Create this file in template folder which will be parallel to django myapp folder and then update settings.py to include templates.

import os

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {

        },
    },
]

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Django React App</title>
</head>
<body>
    <div id="root"></div>
    <script src="http://localhost:3000/static/js/bundle.js"></script>
</body>
</html>

Step 4: Run the Application:

Development

Start the Django development server:

python manage.py runserver

Start the React development Server:

cd frontend/myreactapp
npm start

Visit http://localhost:8000 in your browser to see your Django React application in development mode.

Production

Build the React app:

cd frontend/myreactapp
npm run build

Update Django Template: After building the React app, include the path to the main JavaScript file (main.<hash>.js) in your Django template. Open your Django template file (index.html) and add the following line:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Django React App</title>
</head>
<body>
    <div id="root"></div>

    <script src="{% static 'js/main.38dff78c.js' %}"></script>
</body>
</html>

Start the Django server:

python manage.py runserver

Visit http://localhost:8000 in your browser to see your Django React application in production mode.

Integrating React with Django offers a powerful solution for enhancing the user experience of your web applications. Whether you’re looking to gradually transition your existing Django multipage application into a more interactive experience or simply need to introduce a single interactive page, this guide equips you with the knowledge and tools to do so seamlessly.

By following the steps outlined in this guide, you’ve learned how to harness the strengths of both React and Django, leveraging Django’s backend capabilities alongside React’s dynamic frontend components. From setting up your project to handling development and production environments, you now have a solid foundation for integrating React into your Django application.

Happy Coding 😃

Source Code