How to Connect Django with Reactjs ?

Connecting Django with React is a common approach for building full-stack applications. Django is used to manage the backend, database, APIs and React handles the User Interface on frontend.

Prerequisites:

• A development machine with any OS (Linux/Windows/Mac).
• Python 3 installed.
• Node.js installed (version 12+).
• npm installed (version 6+).
• Basic understanding of both the frameworks (Django and React).

Reason to choose React with Django

• Both React and Django are the most popular library and frameworks and are splendid in their respective domains.
• React’s wonderful SPA optimization and Django’s powerful features make it even better.
• They have large community support and provide immediate assistance.

Connect front-end with back-end

This usually happens because we start learning either front-end part (HTML, CSS, Bootstrap, or React, Angular, or Vue if using the framework) or back-end part (Node.js,  Django, etc. or any other framework). Anyways that’s the way of learning. Integrating Django with React allows you to create powerful web applications by combining a robust backend with a dynamic frontend.

Let’s understand the basic workflow of the connection. These 2 key points are building blocks of Web Technologies.

• In the back-end, we will create API using Django- rest (having methods like GET, POST).
• In front-end, we will consume the API made in Django by hitting it using React.

About the Project:

This project is a simple application in which you can write a quote and the name of the author. Basically based on CRUD(Create Read Update and Delete) operation.

Setting Up the Backend

Create a project folder for Django by creating a virtual environment. You must have installed virtualenv package.

Step 1: Install Python

If not installed install it by typing a command on terminal.

python3 -m pip install --user virtualenv

Step 2: Create a virtual environment

Use this command to create a virtual environment

python3 -m venv env

cd env

source bin/activate

Step 3: Install Required Packages

Install below packages by using pip

pip install django

pip install djangorestframework

python -m pip install django-cors-headers

Step 4: initialize Project

Create a project name of your choice.

django-admin startproject quotes

cd quotes

django-admin startapp core

Step 5: Create Database

• models.py: Now let’s create a database model for our project. As the project is a very simple and model is sufficient to illustrate. Here is models.py file of core app. Name and detail are two fields that are used to store the name of the author and the quote submitted by the author respectively.

from django.db import models

# Create your models here.


class React(models.Model):
    name = models.CharField(max_length=30)
    detail = models.CharField(max_length=500)

• serializer.py: Create serializer.py inside the core folder. Here is the serializer for model React. Serializers are basically used to convert complex data to native Python datatypes that can then be easily rendered into JSON(Which we are going to use in React i.e. Client side). 

from rest_framework import serializers
from . models import *

class ReactSerializer(serializers.ModelSerializer):
    class Meta:
        model = React
        fields = ['name', 'detail']

• views.py: Here is views.py in which we can create our method like GET, PUT, POST, DELETE. I have created GET and POST using class-based views of Django.  In  GET method we are returning data from the model by calling React.objects.all() and then using list comprehension to convert the author and their quotes in python’s dictionary. In the POST method, we are simply saving the data bypassing the data to ReactSerializer(). It’s time to define the endpoint of the API. The end-point of an API is the URL where our client will hit to consume data from the server. It is generally the place where our resources (database and other programmed functions) live.

from django.shortcuts import render
from rest_framework.views import APIView
from . models import *
from rest_framework.response import Response
from . serializer import *
# Create your views here.

class ReactView(APIView):
  
    serializer_class = ReactSerializer

    def get(self, request):
        detail = [ {"name": detail.name,"detail": detail.detail} 
        for detail in React.objects.all()]
        return Response(detail)

    def post(self, request):

        serializer = ReactSerializer(data=request.data)
        if serializer.is_valid(raise_exception=True):
            serializer.save()
            return  Response(serializer.data)

Step 6: SetUp API Endpoints

• urls.py: Here is the main urls.py from the project quote. The localhost:8000/wel/  is the end-point of our ReactView.

from django.contrib import admin
from django.urls import path, include
from django.conf.urls import url
from core.views import *

urlpatterns = [
    path('admin/', admin.site.urls),
    path('wel/', ReactView.as_view(), name="something"),
]

Step 7: Update Configuration

There are few changes in settings.py file which are listed below 

1. Add rest_framework , core, corsheaders  to INSTALLED APPS
2. Add corsheaders.middleware.CorsMiddleware to MIDDLEWARE list.
3. Create  a dictionary assigned to REST_FRAMEWORK variable in which insert ‘DEFAULT_PERMISSION_CLASSES’: [   ‘rest_framework.permissions.AllowAny’ ]
4. Assign variable CORS_ORIGIN_ALLOW_ALL = True

You might be thinking about the corsheaders package. Actually, the cors headers package is used to tell the browser that web application running at one origin, access to selected resources from a different origin.

Now let’s get back to the final part of our back-end. Run the following commands on the terminal.

• This command is used to detect changes made in the database.

python manage.py makemigrations 

• This command applies those changes to the database.

python manage.py migrate  

• For creating a superuser who will be the admin of the whole app.

python manage.py createsuperuser --email [email protected] --username admin 

• This command will run the server and the server should always be in running state.

python manage.py runserver

OR

Open the web browser of your choice (Chrome recommended) and search for localhost:8000/wel/

Setting Up the Frontend

There is no boundation to make the front-end folder in the same directory where the back-end folder lives. Also, there is no need of making a virtual environment for React. Use the following commands to get ready for React Application. Using Bootstrap for styling and better look and feel, jQuery is for the dependencies with bootstrap.

Step 1: Initialize React Project

npx create-react-app our-quote

Step 2: Switch to the Project Directory

Go to the project folder using the below command

cd our-quote

Step 3: Install Required Modules

npm install bootstrap jquery axios

Axios is the main tool for connecting back-end with front-end. All the requests will be sent to the server (back-end) with the help of Axios.

// Filename - our-quote/src/App.js:

import React from 'react'; 
class App extends React.Component { 
    render() { 
        return(
            <div>
                <div>
                    <div>
                        <h1>Quote is going to be written here</h1>
                        <footer>--- by
                          <cite title="Source Title"> 
                              written by meeeee 
                          </cite>
                        </footer>
                    </div>
                </div>
            </div>); 
    } 
} 
export default App;

Output: After running npm start development server of React will start and by default can view at localhost:3000 

Step 4: Fetch Data from API

App.js: Now we have to fetch data from the server by using Axios. The componentDidMount method is called when the component is rendered. This is the right time to request a server for the data. We have used Axios in this method to store the data in a state obtained from the server and later on rendered by the help of a map in JavaScript. 

// Filename - src/App.js

import React from 'react';
import axios from 'axios';

class App extends React.Component {

    state = {
        details : [],
    }

    componentDidMount() {

        let data ;

        axios.get('http://localhost:8000/wel/')
        .then(res => {
            data = res.data;
            this.setState({
                details : data    
            });
        })
        .catch(err => {})
    }

  render() {
    return(
      <div>
            {this.state.details.map((detail, id) =>  (
            <div key={id}>
            <div >
                  <div >
                        <h1>{detail.detail} </h1>
                        <footer >--- by
                        <cite title="Source Title">
                        {detail.name}</cite>
                        </footer>
                  </div>
            </div>
            </div>
            )
        )}
      </div>
      );
  }
}

export default App;

Output: As there is no data to display so fill some data in the database from the server-side. 

Step 5: Create Form for added Quotes

App.js: Now the only part left with this project is to create a form so that the user can fill the data from Client-side which is the correct way to do so. Here is the form submitting a response from Client-side along with bootstrap.

// Filename - src/App.js

import React from "react";
import axios from "axios";

class App extends React.Component {
    state = {
        details: [],
        user: "",
        quote: "",
    };

    componentDidMount() {
        let data;

        axios
            .get("http://localhost:8000/wel/")
            .then((res) => {
                data = res.data;
                this.setState({
                    details: data,
                });
            })
            .catch((err) => {});
    }

    renderSwitch = (param) => {
        switch (param + 1) {
            case 1:
                return "primary ";
            case 2:
                return "secondary";
            case 3:
                return "success";
            case 4:
                return "danger";
            case 5:
                return "warning";
            case 6:
                return "info";
            default:
                return "yellow";
        }
    };

    handleInput = (e) => {
        this.setState({
            [e.target.name]: e.target.value,
        });
    };

    handleSubmit = (e) => {
        e.preventDefault();

        axios
            .post("http://localhost:8000/wel/", {
                name: this.state.user,
                detail: this.state.quote,
            })
            .then((res) => {
                this.setState({
                    user: "",
                    quote: "",
                });
            })
            .catch((err) => {});
    };

    render() {
        return (
            <div className="container jumbotron ">
                <form onSubmit={this.handleSubmit}>
                    <div className="input-group mb-3">
                        <div className="input-group-prepend">
                            <span className="input-group-text"
                                  id="basic-addon1">
                                {" "}
                                Author{" "}
                            </span>
                        </div>
                        <input type="text" className="form-control" 
                               placeholder="Name of the Poet/Author"
                               aria-label="Username"
                               aria-describedby="basic-addon1"
                               value={this.state.user} name="user"
                               onChange={this.handleInput} />
                    </div>

                    <div className="input-group mb-3">
                        <div className="input-group-prepend">
                            <span className="input-group-text">
                               Your Quote 
                            </span>
                        </div>
                        <textarea className="form-control " 
                                  aria-label="With textarea"
                                  placeholder="Tell us what you think of ....." 
                                  value={this.state.quote} name="quote" 
                                  onChange={this.handleInput}>
                        </textarea>
                    </div>

                    <button type="submit" className="btn btn-primary mb-5">
                        Submit
                    </button>
                </form>

                <hr
                    style={{
                        color: "#000000",
                        backgroundColor: "#000000",
                        height: 0.5,
                        borderColor: "#000000",
                    }}
                />

                {this.state.details.map((detail, id) => (
                    <div key={id}>
                        <div className="card shadow-lg">
                            <div className={"bg-" + this.renderSwitch(id % 6) + 
                                          " card-header"}>Quote {id + 1}</div>
                            <div className="card-body">
                                <blockquote className={"text-" + this.renderSwitch(id % 6) + 
                                                   " blockquote mb-0"}>
                                    <h1> {detail.detail} </h1>
                                    <footer className="blockquote-footer">
                                        {" "}
                                        <cite title="Source Title">{detail.name}</cite>
                                    </footer>
                                </blockquote>
                            </div>
                        </div>
                        <span className="border border-primary "></span>
                    </div>
                ))}
            </div>
        );
    }
}
export default App;

Output: The form will call handleSubmit which in return is using the POST method and submitting the response at end-point http://localhost:8000/wel/. The renderSwitch() is used for passing the index of the array which in return the color of bootstrap className.

Advantages

As both the parts will be handled separately i.e. React and Django. Here is the list of advantages of using them separately.

• Cleaner and Clear interface between front-end and back-end logic and functions.
• Easy to deploy either the front-end part or the back-end part without redeploying the other.
• Smoothing User Experience, with less loading times and less perceived transitions-data is fetched in the background and only a part of the whole component will be reloaded.
• If there are separate teams working in front-end and back-end respectively they need not worry about another part as both can work independently.
• Can create scalable and multiple client (web, mobile) apps. All the clients will have to consume the same API provided by the back-end side.

The above advantages will eventually result in only a single task left i.e. connection.

Conclusion

Connecting Django with ReactJS allows you to combine Django’s powerful backend with React’s fast and dynamic front-end. By following the above mentioned steps you can simply conenct the Django Backend with the React frontend.

sudarshan_1

Follow

Improve

Article Tags :

• How To
• ReactJS
• Web Technologies
• Python Django