Using Django Rest Framework with React or Vue.js

Building modern web applications often involves combining a backend API with a frontend framework. Django Rest Framework (DRF) is a powerful tool for creating APIs, while React and Vue.js are popular frontend frameworks. This guide will show you how to integrate DRF with React or Vue.js.

Why Use Django Rest Framework?

Django Rest Framework is a flexible toolkit for building Web APIs. It simplifies the process of creating RESTful APIs with Django. DRF provides features like serialization, authentication, and pagination out of the box.

If you need to handle asynchronous tasks, you can also integrate DRF with Celery. Check out our guide on Django Rest Framework and Celery: Async Tasks for more details.

Setting Up Django Rest Framework

First, install Django and DRF using pip:

    pip install django djangorestframework
    

Next, create a new Django project and app:

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

Add rest_framework and your app to INSTALLED_APPS in settings.py:

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

Creating a Simple API

Let's create a simple API for a blog. Define a model in models.py:

    from django.db import models

    class Post(models.Model):
        title = models.CharField(max_length=100)
        content = models.TextField()
    

Create a serializer in serializers.py:

    from rest_framework import serializers
    from .models import Post

    class PostSerializer(serializers.ModelSerializer):
        class Meta:
            model = Post
            fields = ['id', 'title', 'content']
    

Finally, create a view in views.py:

    from rest_framework import viewsets
    from .models import Post
    from .serializers import PostSerializer

    class PostViewSet(viewsets.ModelViewSet):
        queryset = Post.objects.all()
        serializer_class = PostSerializer
    

Register the view in urls.py:

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

    router = DefaultRouter()
    router.register(r'posts', PostViewSet)

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

Integrating with React or Vue.js

Now that your API is ready, let's connect it to a React or Vue.js frontend. Both frameworks can fetch data from the API using fetch or axios.

Using React

In a React component, you can fetch data from the API like this:

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

    function App() {
        const [posts, setPosts] = useState([]);

        useEffect(() => {
            fetch('http://127.0.0.1:8000/posts/')
                .then(response => response.json())
                .then(data => setPosts(data));
        }, []);

        return (
            <div>
                {posts.map(post => (
                    <div key={post.id}>
                        <h2>{post.title}</h2>
                        <p>{post.content}</p>
                    </div>
                ))}
            </div>
        );
    }

    export default App;
    

Using Vue.js

In a Vue.js component, you can fetch data similarly:

    <template>
        <div>
            <div v-for="post in posts" :key="post.id">
                <h2>{{ post.title }}</h2>
                <p>{{ post.content }}</p>
            </div>
        </div>
    </template>

    <script>
    export default {
        data() {
            return {
                posts: []
            };
        },
        created() {
            fetch('http://127.0.0.1:8000/posts/')
                .then(response => response.json())
                .then(data => this.posts = data);
        }
    };
    </script>
    

Deploying Your Application

Once your application is ready, you may want to deploy it to production. Check out our guide on Deploy Django Rest Framework API to Production for detailed steps.

Conclusion

Integrating Django Rest Framework with React or Vue.js is a powerful way to build modern web applications. DRF provides a robust backend, while React and Vue.js offer dynamic frontend experiences. By following this guide, you can create a seamless connection between your backend and frontend.

For more advanced topics like API testing, check out our Django Rest Framework API Testing Guide.