DEV Community

loading...

Build Web Application using React and Django

Ramkumar
A rookie full-stack developer
Originally published at Medium ・4 min read

In this article, you will build a Todo application using React and Django.
React is a javascript framework for developing SPA's(single-page applications). React has detailed documentation and a bigger ecosystem.

Django is a Python web framework to build the backend of the web application. Django simplifies the common web practices of web development. Django is a more robust, scalable framework and has huge community support.

In this project, React is used as a Front-end framework or client-side framework to create user-interface and send API requests to the backend. Django used to build API endpoints to receive data from front-end.

Prerequisites
Basic knowledge in both React and Django is required. You check out these get started with React and Python.
React documentation : You check react official docs to get started, they provided with easy understanding of concepts.
Django Tutorial

Let's start or project, Before start check whether python and Nodejs is installed.
To download python and Nodejs from here

  • Python
  • Node JS

Step 1 : Setting up Backend
Open a terminal and enter the following command to create a new project directory.

mkdir todo-django-react
cd todo-django-react
Enter fullscreen mode Exit fullscreen mode

Create an virtual environment and activate it

python -m venv env
env\Scripts\activate
Enter fullscreen mode Exit fullscreen mode

Now, install django

pip install django
Enter fullscreen mode Exit fullscreen mode

Create new project name backend and navigate to folder

django-admin startproject backend
cd backend
Enter fullscreen mode Exit fullscreen mode

Start a new application called todo

python manage.py startapp todo
Enter fullscreen mode Exit fullscreen mode

Run migrations

python manage.py migrate
Enter fullscreen mode Exit fullscreen mode

Open the root folder in any code editor (VScode, Atom etc…) and here we registering our application so Django will recognize it.
Navigate to backend/settings.py and todo in INSTALLED_APPS

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'todo',
] 
Enter fullscreen mode Exit fullscreen mode

Create our Todo Model:
Open todo/model.py and type the following code:

class TodoModel(models.Model):
    title = models.CharField(max_length=255)
    description = models.TextField()
    completed = models.BooleanField(default=False)

    def __str__(self):
        return self.title
Enter fullscreen mode Exit fullscreen mode

The above code snippets describe three field of our todo model,
Title : Name of todo
description : more details about the individual todo
completed : it shows the status of todo whether it completed or not

Now run migration to add model to the database

python manage.py makemigrations todo
python manage.py migrate todo
Enter fullscreen mode Exit fullscreen mode

Django provides us a default admin interface to test CRUD on our model. Lets add our model to admin page
Open todo/admin.py and enter following code

from .models import TodoModel
admin.site.register(TodoModel)
Enter fullscreen mode Exit fullscreen mode

Then, save changes.
You will need to create a superuser to access the admin page. Run the following cmd in terminal to create

python manage.py createsuperuser
Enter fullscreen mode Exit fullscreen mode

Terminal will prompt you to enter the username, email, password for creating superuser. Be sure to enter details you remember.

Start up the server

python manage.py runserver
Enter fullscreen mode Exit fullscreen mode

Navigate to http://localhost:8000/admin/ in your web browser and enter the username and password to login to admin page.
Django default admin page
CRUD operations on TodoModel
Here you can do create, read, update and delete on TodoModel using admin interface.

Step 2 : Develop our API
In this section, you develop an API endpoint for our model.
Install djangorestframework and django-cors-headers

pip install djangorestframework django-cors-headers
Enter fullscreen mode Exit fullscreen mode

After installing, add rest_framework and corsheaders in settings.py and update MIDDLEWARE.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'todo',
    'rest_framework',
    'corsheaders'
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware'
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
Enter fullscreen mode Exit fullscreen mode

Add this code in settings.py

CORS_ALLOWED_ORIGINS = [
    "http://127.0.0.1:3000",
]
Enter fullscreen mode Exit fullscreen mode

A django-cors-headers is a Python library which prevent a common error caused by CORS rule. In CORS_ALLOWED_ORGINS you list the http://127.0.0.1:3000 because we need our frontend to access Django API.

Start creating serializers
Serializers converts the Django model instance to JSON so that frontend can work with data.
Create todo/serializers.py and add the following code to the file

from rest_framework import serializers

from .models import TodoModel

class TodoModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = TodoModel
        field = ('id', 'title', 'description', 'completed')
Enter fullscreen mode Exit fullscreen mode

Now we need to create view, navigate to todo/views.py and update the following code.

from rest_framework import viewsets

from .models import TodoModel
from .serializers import TodoModelSerializer

class TodoView(viewsets.ModelViewSet):
    serializer_class = TodoModelSerializer
    queryset = TodoModel.objects.all()
Enter fullscreen mode Exit fullscreen mode

viewsets base class provides a implementation of CRUD by default.
Open backend/urls.py to update the following snippets

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

from todo.views import TodoView

router = routers.DefaultRouter()
router.register('todos', TodoView, 'todo')

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include(router.urls))
]
Enter fullscreen mode Exit fullscreen mode

The router enables you to perform CRUD operations
http://127.0.0.1:8000/api/todos/ : returns lists of todo. CREATE and READ operations can be performed
http://127.0.0.1:8000/api/todos/:id/ : returns a single todo by using id parameter. UPDATE and DELETE operations can be performed.

Restart the server and navigate to http://127.0.0.1:8000/api/todos/
List of todo will be displayed

Navigate to http://127.0.0.1:8000/api/todos/:id/
Add 1 to :id in url to get the todo with id 1 .

Single todo item
will continue frontend part on part 2.

Discussion (0)