Integrating React with Django: A Full Stack Tutorial
You can integrate React and Django in two main ways:
Decoupled (recommended)
Django = backend REST API
React = separate frontend SPA
Communication via JSON (REST)
Monolithic (optional)
Django serves the React build files
Single deployable project
This guide covers both, starting with the modern decoupled approach.
🧱 Prerequisites
Python 3.9+
Node.js + npm or yarn
Basic knowledge of Django + React
#️⃣ 1. Set Up the Django Backend
📌 Step 1: Create Django Project
mkdir myproject
cd myproject
python -m venv venv
source venv/bin/activate # Windows: venv\Scripts\activate
pip install django djangorestframework
django-admin startproject backend
cd backend
django-admin startapp api
📌 Step 2: Configure Django REST Framework
In backend/settings.py:
INSTALLED_APPS = [
...
'rest_framework',
'api',
]
(Optional default settings):
REST_FRAMEWORK = {
"DEFAULT_PERMISSION_CLASSES": [
"rest_framework.permissions.AllowAny",
]
}
📌 Step 3: Create a Simple API
api/models.py
from django.db import models
class Item(models.Model):
name = models.CharField(max_length=200)
created_at = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.name
api/serializers.py
from rest_framework import serializers
from .models import Item
class ItemSerializer(serializers.ModelSerializer):
class Meta:
model = Item
fields = '__all__'
api/views.py
from rest_framework import viewsets
from .models import Item
from .serializers import ItemSerializer
class ItemViewSet(viewsets.ModelViewSet):
queryset = Item.objects.all().order_by('-created_at')
serializer_class = ItemSerializer
backend/urls.py
from django.contrib import admin
from django.urls import path, include
from rest_framework import routers
from api.views import ItemViewSet
router = routers.DefaultRouter()
router.register(r'items', ItemViewSet)
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include(router.urls)),
]
📌 Step 4: Apply Migrations
python manage.py makemigrations
python manage.py migrate
python manage.py runserver
Your Django API is now running at:
👉 http://127.0.0.1:8000/api/items/
#️⃣ 2. Set Up the React Frontend
Navigate to the root folder:
cd ..
npx create-react-app frontend
cd frontend
Install Axios:
npm install axios
📌 Step 1: Create a Component to Fetch Items
src/App.js
import { useEffect, useState } from "react";
import axios from "axios";
function App() {
const [items, setItems] = useState([]);
useEffect(() => {
axios.get("http://127.0.0.1:8000/api/items/")
.then(response => setItems(response.data))
.catch(error => console.error(error));
}, []);
return (
<div>
<h1>Django + React Items</h1>
<ul>
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
}
export default App;
Run:
npm start
#️⃣ 3. Enable CORS (Important!)
Install Django CORS headers:
pip install django-cors-headers
Add to backend/settings.py:
INSTALLED_APPS += ['corsheaders']
MIDDLEWARE.insert(0, "corsheaders.middleware.CorsMiddleware")
Allow React:
CORS_ALLOWED_ORIGINS = [
"http://localhost:3000",
]
Restart Django server.
#️⃣ 4. Submitting Data from React
Add a form in React (src/App.js):
import { useState } from "react";
import axios from "axios";
function App() {
const [name, setName] = useState("");
const addItem = async (e) => {
e.preventDefault();
await axios.post("http://127.0.0.1:8000/api/items/", { name });
setName("");
window.location.reload();
};
return (
<form onSubmit={addItem}>
<input
type="text"
value={name}
onChange={e => setName(e.target.value)}
placeholder="New Item"
/>
<button>Add</button>
</form>
);
}
You're now fully interacting with Django CRUD using React.
#️⃣ 5. Full Stack Folder Structure (Recommended)
myproject/
│
├── backend/
│ ├── backend/
│ └── api/
│
└── frontend/
└── src/
#️⃣ 6. Serving React from Django (Monolithic Option)
In production, build React:
npm run build
Copy the build folder into Django:
backend/
└── frontend_build/
Update Django settings + URLs:
import os
from django.views.generic import TemplateView
urlpatterns += [
path("", TemplateView.as_view(template_name="index.html")),
]
Tell Django where React build files live:
TEMPLATES[0]["DIRS"] = [os.path.join(BASE_DIR, "frontend_build")]
STATICFILES_DIRS = [os.path.join(BASE_DIR, "frontend_build/static")]
Now Django serves the React SPA.
#️⃣ 7. Deployment Options
Recommended split deployment:
Backend: Django on
Render
DigitalOcean
Railway
AWS EC2
Heroku
Azure App Service
Frontend: React on
Netlify
Vercel
AWS Amplify
Monolithic deployment:
Django + React build deployed together on
Gunicorn + Nginx
Docker container
🧪 8. Bonus: Authentication (React + Django REST Framework JWT)
Install:
pip install djangorestframework-simplejwt
Add to backend/urls.py:
from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView
urlpatterns += [
path('api/token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
path('api/token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
]
Then React frontend stores token and sends Authorization headers.
🎉 Conclusion
By completing this tutorial, you now know how to:
✔ Build a Django REST API
✔ Fetch data from React
✔ Handle CORS
✔ Post data to Django
✔ Structure a full stack app
✔ Serve React from Django (optional)
✔ Deploy both applications
React and Django together make a powerful, modern full stack environment.
Learn Fullstack Python Training in Hyderabad
Read More
Frontend and Backend Integration in Python
How to Deploy Flask Applications to DigitalOcean
Using Nginx and Gunicorn for Python Web Application Deployment
How to Deploy a Django Application on AWS
At Our Quality Thought Training Institute in Hyderabad
Subscribe by Email
Follow Updates Articles from This Blog via Email
No Comments