11.4 Sample Responsive WAD with Bootstrap/React and Django

Updating the Todo Web Application with Bootstrap, React, and Django

In this section, the Todo web application implemented will build on the Django application covered in 11.2 Sample Responsive WAD with Bootstrap and Django, as well as the React application explored in 11.3 Sample Responsive WAD with Bootstrap/React and Node. For this version of the Todo web application, React serves as the front end handling the user interface to get and set data via HTTP requests. Django serves as the back end.

Prerequisites

To build this version of the Todo application, you need Python v3.9.4, PIP v21.3.1, Django v4.0.1, Django REST Framework v3.13.1, Bootstrap v4.5.0, Django-cors-headers v3.11.0, React v17.0.2, and Axios v0.21.0. To begin, complete the following steps:

• Activate the venv used in section 11A.2:
  $ cd py394venv
  Windows: $ source ./Scripts/activate
  macOS: $ source ./bin/activate
• Install in the local programming environment Django Cors Headers
  $ pip install django-cors-headers==3.11.0 ]

Extending the Django Back End to Support the React Front End

To create a Todo web application using React as a front end to the Django back end, the Django project requires a couple of configurations. Open TodoApp/settings.py and add ‘corsheaders’ to INSTALLED_APPS as in the following code.

INSTALLED _APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',
    'rest_framework',
    'todo',
]

By configuring the Django project with CORS, the Django application will be allowed to accept in-browser requests that come from other origins. To add CORS, add the CORS middleware to MIDDLEWARE, as shown in the following code.

MIDDLEWARE  = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware',
]

After completing this step, scroll to the bottom of the settings.py file and add the following variable.

# add CORS whitelist for localhost:3000 since the React frontend will be served on port 3000
CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000'
]

Connecting the React Front End to the Django Back End

Next, the React application must be configured so it can make requests to the API endpoints of the Django application. The React application uses Axios to fetch data by making requests to a given endpoint. To install Axios, run the following command in the reactfrontend/ directory:

$ npm install axios@0.21.1

Next, add a proxy to the Django application. The proxy will help tunnel API requests from the React application to http://localhost:8000, where the Django application will receive and handle the requests. To add the proxy, open the reactfrontend/package.json file and add the following code.

{ 
  "name": "reactfrontend",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8080",
  "dependencies": {

After completing this step, open the reactfrontend/src/App.js file and import Axios, as shown in the following code.

import './App.css';
import React, { Component } from "react";
import Modal from "./components/Modal";
import Nav from "./components/NavComponent";
import axios from "axios";
import { Button, Form, FormGroup, Label, Input } from 'reactstrap';

To update the reactfrontend/src/App.js file, add the following code. The handleSubmit() function will use Axios to make requests to the Django API endpoints to create and delete todo items.

handleSubmit = (item) => {
  this.toggle();

  if (item.id) {
    axios
      .put(`/api/todos/${item.id}/`, item)
      .then((res) => this.refreshList());
    return;
  }
  axios
    .post("/api/todos/", item)
    .then((res) => this.refreshList());
};

handleDelete = (item) => {
  axios
    .delete(`/api/todos/${item.id}/`)
    .then((res) => this.refreshList());
};

When these steps are complete, start up the Django server and then start up the React application, using the following commands, respectively.

$ python manage.py runserver
$ npm start

To access the Django REST API, navigate to http://localhost:8000/api/. This is similar to the steps completed in 11.2 Sample Responsive WAD with Bootstrap and Django. Click on the categories API path to enter two categories, as seen in Figure 11.35.

When the React application starts up, a browser page will automatically launch for navigating to http://localhost:3000 and the user interface should render. Figure 11.36 shows the page on which to create a todo item.

At this point, revisit the Django REST API. Figure 11.37 shows that the todo item should be accessible via the todos API path.