Integrating React with a Django Backend

Combining React (frontend) with Django (backend) gives you the best of both worlds — a modern, dynamic UI and a powerful backend built in Python.

Let’s break it down step by step.

---

⚙️ Overview

• React handles the user interface

• Django manages the backend logic, APIs, and database

• They communicate via REST APIs (usually built using Django REST Framework)

---

🧱 Folder Structure

myproject/
├── backend/         ← Django Project
│   ├── manage.py
│   └── myapp/
│       ├── models.py
│       ├── views.py
│       └── urls.py
├── frontend/        ← React Project
│   ├── src/
│   ├── public/
│   └── package.json

---

🔧 Step-by-Step Integration

✅ 1. Set Up Django Backend

django-admin startproject backend
cd backend
python manage.py startapp myapp

Install Django REST Framework:

pip install djangorestframework

In settings.py:

INSTALLED_APPS = [
    ...
    'rest_framework',
    'myapp',
]

Create a simple model in myapp/models.py:

from django.db import models

class Todo(models.Model):
    title = models.CharField(max_length=100)
    completed = models.BooleanField(default=False)

Run migrations:

python manage.py makemigrations
python manage.py migrate

---

✅ 2. Create Django REST API

In myapp/serializers.py:

from rest_framework import serializers
from .models import Todo

class TodoSerializer(serializers.ModelSerializer):
    class Meta:
        model = Todo
        fields = '__all__'

In myapp/views.py:

from rest_framework import viewsets
from .models import Todo
from .serializers import TodoSerializer

class TodoViewSet(viewsets.ModelViewSet):
    queryset = Todo.objects.all()
    serializer_class = TodoSerializer

In myapp/urls.py:

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import TodoViewSet

router = DefaultRouter()
router.register(r'todos', TodoViewSet)

urlpatterns = [
    path('', include(router.urls)),
]

In backend/urls.py:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('myapp.urls')),
]

Now run:

python manage.py runserver

Your API is live at: http://localhost:8000/api/todos/

---

✅ 3. Set Up React Frontend

npx create-react-app frontend
cd frontend
npm start

Install Axios to call Django API:

npm install axios

---

✅ 4. Connect React to Django

In App.js:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:8000/api/todos/')
      .then(res => setTodos(res.data))
      .catch(err => console.log(err));
  }, []);

  return (
    <div>
      <h1>Todo List</h1>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.title} - {todo.completed ? '✅' : '❌'}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

---

🌐 CORS Setup

Install Django CORS headers:

pip install django-cors-headers

In settings.py:

INSTALLED_APPS = [
    ...
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

CORS_ALLOW_ALL_ORIGINS = True  # Or restrict to specific domains

---

🧪 Test Your App

1. Start Django server:
   python manage.py runserver

2. Start React app:
   npm start

3. React will fetch data from Django and display it in the UI!

---

🎯 Final Thoughts

• Django provides a secure and robust backend

• React provides a modern, interactive frontend

• You can scale both parts independently

• Use Django REST Framework for APIs

• Use Axios or Fetch in React to call Django endpoints

Learn  FullStack Python Course

Read More 

Using Tailwind CSS in a Python Web App

Intro to HTML, CSS, and JS for Python Developers

Using `pip` and `requirements.txt` Like a Pro