DEV Community: Ramkumar

Build Web Application using React and Django

Ramkumar — Wed, 15 Sep 2021 07:11:37 +0000

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

Create an virtual environment and activate it

python -m venv env
env\Scripts\activate

Now, install django

pip install django

Create new project name backend and navigate to folder

django-admin startproject backend
cd backend

Start a new application called todo

python manage.py startapp todo

Run migrations

python manage.py migrate

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',
]

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

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

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)

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

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

Navigate to http://localhost:8000/admin/ in your web browser and enter the username and password to login to admin page.

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

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',
]

Add this code in settings.py

CORS_ALLOWED_ORIGINS = [
    "http://127.0.0.1:3000",
]

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')

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()

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))
]

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/

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

will continue frontend part on part 2.

Free Resources to learn Django !!

Ramkumar — Fri, 27 Aug 2021 16:22:34 +0000

Choosing a web framework for a project is a big deal!!. There are plenty of frameworks on the market right now. Django provides versatile features and options for the developers. Their main goals are faster development, scalability, more security.

Django provides fully loaded features like Built-in Admin Interface, ORM, Python unit testing framework, Middleware Support, Template engine, Form handling and validation, authentication system, Session and user management, role-based permissions.

So, choosing the Django framework is a good choice and has more opportunities in the future.

Here is the list of free resources

Django Documentation - Well-detailed documentation ever. My first recommendation is Django official docs, they explained every concept in detail. Check it out.

Free Websites to learn Django

Basics of Django

Programming with Harry

To learn Django, Django REST Framework with React JS

JustDjango - If you want to learn REST API with Django and Django REST Framework with React JS.

Very Academy - This channel also provides content on Django, Django REST Framework, and React JS by project-based learning.

Thanks for reading this article so far. If you find these free Django courses useful then please share them with your friends and colleagues. If you have any questions or feedback then please drop a note.

4 Useful Django Packages

Ramkumar — Wed, 25 Aug 2021 09:00:45 +0000

Django is the most popular Python framework, which you can build a robust web application. Django gives more features out of the box other than there are more 3rd party packages which are helpful to make Django application more efficient. So, here is the list of packages I came across and used.

Django REST Framework

If you are looking for developing a REST API using Django, then definitely DRF is the best and most powerful toolkit for building Web API.
A small amount of code is enough to transform the existing Django project into a REST API.
Djoser

Recently, I work on REST API and thought of re-creating USER MODEL function like login, logout, reset-password and other stuffs for every project is tedious process. So, I searched for some alternatives and then came across with Djoser package. The Djoser package is an REST implementation of Django authentication system. It provides set of Django REST Framework that handles a basic actions like login, logout, reset-password, account activation.

Djoser allows you to create an user account with CUSTOM_USER_MODEL and social accounts like Google, Facebook. Authentication process is done by using token based authentication and JSON Web Token Authentication.
python-decouple

Confidential information should be placed in Environment variables, not in source code. Python Decouple helps you to organize your settings confidential information. It helps us to access that info in environment variables.
django-cloudinary-storage

Django Cloudinary storage provides Cloudinary storage for media and static files. A quick and small amount of line of configuration you can start using Cloudinary, so you can serve your static and media files of Django by Cloudinary