Integrating Django Backend with React Frontend: A Step-by-Step Tutorial

Step 2: Setting Up the React Frontend

We will use the Create React app, a tool that sets up a modern web app by running one command.

➡️ Install Node.js and npm: Node.js is a JavaScript runtime that allows you to run JavaScript on your server. npm is a package manager for Node.js.

➡️ Create a new React app and navigate into it:

npx create-react-app frontend
cd frontend

➡️  In the src directory, create your components. Each component should be in its file and should have a .jsx extension. We will be using @tanstack/react-query to create custom hooks to fetch, create, update, and delete data from the backend. We will also use @tanstack/react-table to create tables that will show data that is fetched from the backend. Let’s install the packages using this command:

yarn add @tanstack/react-query @tanstack/react-table

After installation, you will see that the package.json is updated and the above packages will be present in the dependencies array.

➡️ Let’s understand how the frontend code is structured around a few key components and functionalities. Here’s a brief overview:

• App Component (App.jsx): This is the root component of the application. It maintains a state variable activeTab to switch between ShowsTable and PlatformTable components based on user interaction.
• ShowsTable and PlatformTable Components (ShowsTable.jsx and PlatformTable.jsx): These components fetch and display data from the backend using useFetchShows and useFetchPlatforms hooks respectively. They also define the structure of the tables and the actions that can be performed on each row.
• CreateUpdateShowForm and CreateUpdatePlatformForm Components (CreateUpdateShowForm.jsx and CreateUpdatePlatformForm.jsx): These components are used to create or update a show or platform. They use useCreateShow, useUpdateShow, useCreatePlatforms, and useUpdatePlatform hooks for these operations.
• React Query Hooks (shows.queries.js and platforms.queries.js): These files contain custom hooks that use the React Query library to fetch, create, update, and delete data from the backend.
• HTTP Requests (shows.requests.js and platforms.requests.js): These files contain functions that make HTTP requests to the backend using the Fetch API.
• HTTP Utility (http.js): This file contains utility functions to make HTTP requests and handle responses.
• CSS Styles (index.css): This file contains global styles for the application, including styles for the modal used in the form components.

Step 3: Integrating the Backend with the Frontend

➡️ In your Django we need to install a package called django-cors-headers. While installing make sure your virtual environment is active. Here is the command to install.

> pip install django-cors-headers

➡️ After successful installation, we need to make the following changes in the settings.py file.

INSTALLED_APPS = [
...
'app',
'rest_framework',
'corsheaders'
]

MIDDLEWARE = [
...
'django.contrib.sessions.middleware.SessionMiddleware',
'corsheaders.middleware.CorsMiddleware',
...
]

REST_FRAMEWORK = {
'DEFAULT_PERMISSION_CLASSES': [
'rest_framework.permissions.AllowAny',
]
}

CORS_ALLOWED_ORIGINS = [
'http://localhost:3000' # i am using 3000 port to run the frontend server
]

➡️ Now we need to create migrations and migrate the database.

> python manage.py makemigrations
> python manage.py migrate

Note: We are using the inbuilt SQLite database that comes with Django. If you want to use your custom database, you can update the database settings in settings.py.

➡️ Now we are ready to start our backend server using the following command:

> python manage.py runserver

➡️ In your React app, create a utility file called http.js. It contains the get, post, put and delete API call logic using the global fetch method. The global fetch() method starts the process of fetching a resource from the network (here it is our backend), returning a promise that is fulfilled once the response is available.

➡️ Then we set up the requests files, shows.requests.js and platforms.requests.js inside api/requests. These files help us call the get, post, put and delete utility functions that we wrote in the http.js. Here is the code.

shows.requests.js
import http from '../http';

const BASE_URL = '/watch-list/';

export const fetchShows = () =>
http.get(BASE_URL);

export const fetchShow = (id) =>
http.get(`${BASE_URL}${id}/`);

export const createShow = (data) =>
http.post(BASE_URL, data);

export const updateShow = (data, id) =>
http.put(`${BASE_URL}${id}/`, data);

export const removeShow = (id) =>
http.delete(`${BASE_URL}${id}/`);

platforms.requests.js
import http from '../http';

const BASE_URL = '/watch-list/platform/';

export const fetchPlatforms = () =>
http.get(BASE_URL);

export const createPlatform = (data) =>
http.post(BASE_URL, data);

export const updatePlatform = (data, id) =>
http.put(`${BASE_URL}${id}/`, data);

export const removePlatform = (id) =>
http.delete(`${BASE_URL}${id}/`);

➡️ Now we have to set up the queries inside the api/queries folder. We create two files, shows.queries.js and platforms.queries.js. You can refer to the @tanstack/react-query documentation to understand the hooks in more detail.

shows.queries.js
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { createShow, fetchShow, fetchShows, removeShow, updateShow } from '../requests/shows.requests';

export const useFetchShows = () =>
useQuery(
['shows'],
async () => {
const res = await fetchShows();
return res;
},
);

export const useFetchShow = (id) =>
useQuery(
['shows'],
async () => {
const res = await fetchShow(id);
return res;
},
{
enabled: id !== undefined,
},
);

export const useCreateShow = () => {
const queryClient = useQueryClient();

return useMutation(
async data => {
const res = await createShow(data);
return res;
},
{
onSuccess: () => queryClient.invalidateQueries(['shows']),
},
);
};

export const useUpdateShow = () => {
const queryClient = useQueryClient();

return useMutation(
async ({ data, id }) => {
const res = await updateShow(data, id);
return res;
},
{
onSuccess: () => queryClient.invalidateQueries(['shows']),
},
);
};

export const useRemoveShow = () => {
const queryClient = useQueryClient();

return useMutation(
async id => {
const res = await removeShow(id);
return res;
},
{
onSuccess: () => queryClient.invalidateQueries(['shows']),
},
);
};

platforms.queries.js
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { createPlatform, fetchPlatforms, removePlatform, updatePlatform } from '../requests/platforms.requests';

export const useFetchPlatforms = () =>
useQuery(
['platforms'],
async () => {
const res = await fetchPlatforms();
return res;
},
);

export const useCreatePlatforms = () => {
const queryClient = useQueryClient();

return useMutation(
async data => {
const res = await createPlatform(data);
return res;
},
{
onSuccess: () => queryClient.invalidateQueries(['platforms']),
},
);
};

export const useUpdatePlatform = () => {
const queryClient = useQueryClient();

return useMutation(
async ({ data, id }) => {
const res = await updatePlatform(data, id);
return res;
},
{
onSuccess: () => queryClient.invalidateQueries(['platforms']),
},
);
};

export const useRemovePlatform = () => {
const queryClient = useQueryClient();

return useMutation(
async id => {
const res = await removePlatform(id);
return res;
},
{
onSuccess: () => queryClient.invalidateQueries(['platforms']),
},
);
};

➡️ Now we can start the process of calling the APIs in our component. We call the useFetchShow hook and it will call the backend and the response of the get request will be saved inside the shows constant.

const shows = useFetchShows();

➡️ For post, put and delete we need to use the mutateAsync method to get a promise which will resolve on success or throw on an error. This is how we are submitting the form to create or update a show inside the CreateUpdateShowForm.jsx component.

const createShow = useCreateShow();
const updateShow = useUpdateShow();

const handleSubmit = e => {
e.preventDefault()
const payload = {
title,
storyline,
platforms: availablePlatforms?.map(x => ({ name: x })),
active: true
}

if (data?.id) {
updateShow.mutateAsync({ data: payload, id: data?.id}, {
onSuccess: () => {
closeModal(modalId);
}
})
} else {
createShow.mutateAsync(payload, {
onSuccess: () => {
closeModal(modalId);
setTitle('');
setStoryline('');
setAvailablePlatforms([])
}
});
}
}

➡️ It’s time to run our frontend application.

> npm run start
or
> yarn start

Here is the result.

So, here are the repositories. You can take a look and understand the code in greater detail.