How to Integrate React and Django framework, in a simpler way.

Hello Everyone 😊, so today I will be focusing on how to integrate React in your Django project workflow, in a simpler way.

Photo by AltumCode on Unsplash

So let’s get started!!! 🚀🚀

Tools

• Visual Studio Code (Text Editor)
• Python version 3 ++
• Nodejs
• Windows (OS) using WSL and windows terminal

In this article I am using WSL 2 terminal and Windows 10 for OS, you can also use others like mac, linux, if any commands are different, you can search Google to resolve it.

1. Setup Project Workflow

Here we are creating our Django project named “ django_react_starter”.

Type the below commands in your terminal and also ensure python, pip, pipenv, and Django are all installed to avoid any errors.

python3 --version
sudo apt install python3-pip # if python is not installed
pip3 install pipenv
mkdir django_react_starter
cd django_react_starter
pipenv shell # create our virtal enviroment
pip3 install django
pip3 list
django-admin startproject django_react_starter
cd django_react_starter
code . # to open with vscode

2. Installing our Django Apps

In other to integrate React and Django in our project, we need two apps, one working as our frontend ( where react will be) and another as our backend ( for Django). Now back to your terminal, ensure you are in your django project’s directory (django_react_starter) and paste this command below,

python manage.py startapp api

the django app (api) will act as the backend for our app, this is where we will make use of models, serializers, etc.

Next is to create our frontend app for React, paste the command below.

python manage.py startapp frontend

3. Setting up our API

To connect django to react we need to setup our django app (api) to work as an API using the django rest-framework, Now in your terminal we need to install thedjangorestframework

pip3 install djangorestframework
pip3 list # to view it

Now still, in our api app directory, let’s create a simple Todo model in our models.py

add this in api/models.py

still in same directory create serializers.py file, this would provide a mechanism for translating django models into other formats.

api/serializers.py

now for our views add this in

api/views.py

create a urls.py in the api directory so we could route our views

api/urls.py

Next add our apps in Django project (django_react_starter) to installed apps in settings.py

so in add this in django_react_starter/settings.py

4. Integrating React with Django

So back to our Django frontend app, we made earlier, this is where our React app will be in, now let’s set it up.

so we will not be creating a react app the normal way using create-react-app but we would be creating each directory and files we need by ourselves. It might be a little tasking but just follow along, if any error comes up you can check my source code at end of the article.

Now first, ensure you are in the frontend directory, now back to your terminal enter the code below

to generate our package.json file using yarn

yarn install

next, create an empty npm project

npm init -y

npm init -y will simply generate an empty npm project without going through an interactive process

Secondly, let’s install the following libraries for our React App

still in your frontend directory on your terminal enter the following commands

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader react react-dom react-router-dom webpack webpack-cli

after installation view your package.json to ensure they all listed there

Thirdly, let’s add these files and directories for react to our frontend directory on your terminal or manually using visual studio code

cd frontend
mkdir templates
cd templates
mkdir frontend
cd frontend
touch index.html

• frontend/templates/frontend/index.html

for our static files

cd frontend
mkdir -p static/css/index.css
mkdir -p static/frontend

• frontend/static/css/index.css
• frontend/static/frontend

Now let’s add index.js and some components for our react app in your frontend directory create a folder src

cd frontend
mkdir -p src/components/App.js,HomePage.js
cd src
touch index.js

• src/index.js

• src/components/App.js

• src/components/HomePage.js

Now let’s add some configurations

let’s add some configuration files to our frontend directory

• frontend/babel.config.js

• frontend/webpack.config.js

Lastly, let’s edit scripts in our package.json file

• frontend/package.json

now we are all set up with react, let’s add views and urls for django to interact with our react app

• frontend/views.py

• frontend/urls.py

Now, back to our django project (django_react_starter) let’s update our urls.py

• django_react_starter/urls.py

5. Testing our App

Let’s see whether everything we have been doing so far works, so to test it open two terminals on your command line , one connected as virtual environment to use for Django and the other for Nodejs.

In our frontend terminal for react, ensure you are in the frontend directory, type the following commands

npm run dev

if it returns in the terminal as the image below, and creates a main,js file in static/frontend then it all works.

Back to our Django terminal, ensure you are in the django project directory and type or paste the following commands

python manage.py makemigrations
python manage.py migrate
python manage.py runserver

Finally go to http://127.0.0.1:8000/ on your browser

Congrats 🙌 If you see this then it all works 😊. if you are having any issues you get the source code here

Would love if you leave a nice comment 😉 and also thanks for your time !!

Also if you need more help check this video on Django & React Tutorial #3 — React Integration Using Webpack & Babel — YouTube from TechwithTim I got most info if not all from it.

Where to Find me

You can follow me here on Medium ❤️

You can also find me on 👉 Github/ Instagram / LinkedIn 🔥