Beginner’s Guide: React Django CRUD Tutorial – Master React and Django in just 1 Hour

React and Django are two powerful technologies that are often used together to build modern web applications. In this tutorial, we will walk you through building a CRUD (Create, Read, Update, Delete) application using React and Django. This tutorial is aimed at beginners who are looking to learn how to use React and Django together.

Step 1: Setting up your environment

Before we get started with building our CRUD application, we need to set up our development environment. Make sure you have Node.js installed on your machine, as well as Python and Django. You can install Node.js by visiting the official website and downloading the installer. For Django, you can install it using pip by running the following command:

pip install Django

Step 2: Creating a Django project

The first step is to create a new Django project. Open your terminal and run the following command to create a new project:

django-admin startproject crudApp

This will create a new folder called crudApp with all the necessary files and folders for a Django project. Navigate to this folder and run the following command to start the Django server:

python manage.py runserver

Visit http://localhost:8000 in your browser to see the default Django welcome page.

Step 3: Creating a Django app

Next, we need to create a new Django app within our project. Run the following command in your terminal to create a new app called backend:

python manage.py startapp backend

This will create a new folder called backend with all the necessary files for our Django app.

Step 4: Setting up the Django models

In our Django app, we need to define the models for our CRUD operations. Open the models.py file inside the backend folder and define a simple model for our application. For example, we can define a Product model with fields like name, price, and description:

from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=100)
    price = models.FloatField()
    description = models.TextField()

After defining the model, run the following command in your terminal to create the necessary database tables:

python manage.py makemigrations
python manage.py migrate

Step 5: Setting up the Django views

Next, we need to create views to handle the CRUD operations for our Product model. Open the views.py file inside the backend folder and define the views for listing, creating, updating, and deleting products:

from rest_framework import viewsets
from .models import Product
from .serializers import ProductSerializer

class ProductViewSet(viewsets.ModelViewSet):
    queryset = Product.objects.all()
    serializer_class = ProductSerializer

Step 6: Setting up the Django serializers

We also need to create serializers to convert the model instances to JSON and vice versa. Create a new file called serializers.py inside the backend folder and define a serializer for our Product model:

from rest_framework import serializers
from .models import Product

class ProductSerializer(serializers.ModelSerializer):
    class Meta:
        model = Product
        fields = '__all__'

Step 7: Setting up the Django URLs

Finally, we need to define the URLs for our views. Open the urls.py file inside the backend folder and define the URL patterns for our Product views:

from rest_framework.routers import DefaultRouter
from .views import ProductViewSet

router = DefaultRouter()
router.register(r'products', ProductViewSet)

urlpatterns = router.urls

Step 8: Setting up the React application

Now that we have set up our Django backend, let’s move on to setting up our React frontend. Create a new React app using create-react-app by running the following command in your terminal:

npx create-react-app frontend

This will create a new folder called frontend with all the necessary files for a React app. Navigate to this folder and run the following command to start the React server:

npm start

Visit http://localhost:3000 in your browser to see the default React welcome page.

Step 9: Creating React components

Next, we need to create React components to interact with our Django backend. Create a new file called ProductList.js inside the src folder and define a component to list all the products:

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

const ProductList = () => {
    const [products, setProducts] = useState([]);

    useEffect(() => {
        axios.get('http://localhost:8000/api/products/')
            .then(response => setProducts(response.data))
            .catch(error => console.error(error));
    }, []);

    return (
        <div>
            <h1>Products</h1>
            <ul>
                {products.map(product => (
                    <li key={product.id}>
                        {product.name} - ${product.price}
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default ProductList;

Step 10: Making API requests in React

To interact with our Django backend, we need to make API requests from our React components. We can use the axios library to make HTTP requests. Install axios by running the following command in your terminal:

npm install axios

Now, we can make API requests to fetch the list of products from our Django backend using the following code:

import axios from 'axios';

axios.get('http://localhost:8000/api/products/')
    .then(response => console.log(response.data))
    .catch(error => console.error(error));

Step 11: Wrapping up

Congratulations! You have successfully built a CRUD application using React and Django. In this tutorial, you learned how to set up a Django backend with models, views, serializers, and URLs, as well as how to create a React frontend with components to interact with the Django backend. This tutorial is a great starting point for beginners looking to learn how to use React and Django together. Happy coding!