This is a detailed tutorial on how to build a full stack To-Do application using React Javascript Framework and Django Web Framework.
React is a framework that is used for building Single Page Applications (SPAs). React was introduced by Facebook (now Meta) and has a wonderful community of developers and a slick documentation.
Django, on the other hand, is a simple web framework that aims to simplify web development. Django has a lot of ready-made libraries and vibrant documentation that supports developer needs.
In this application, the React framework serves as the client-side that handles the UI (User Interface). It also gets and sends data via requests to the Django backend with an API built atop the Django REST Framework (DRF).
This web application allows users to create tasks and mark the tasks as complete or incomplete.
PREREQUISITES
In this tutorial, you must have:
- Set up a local programming environment for Python 3
- Set up Node.js on your local development environment
SETTING UP DJANGO BACKEND
Create a new project directory:
mkdir react-django-todo
cd react-django-todo
Install and activate a virtual environment using Pipenv:
pip install pipenv
pipenv shell
Install Django:
pipenv install django
Start a new Django project:
django-admin startproject backend
cd backend
Create a Django app:
python3 manage.py startapp todo
Perform initial migrations:
python3 manage.py migrate
Run the server:
python3 manage.py runserver
Visit http://localhost:8000 in your browser to confirm the setup.
REGISTERING THE todo APPLICATION IN DJANGO
Add 'todo' to INSTALLED_APPS in backend/settings.py.
CREATING A Todo MODEL
In todo/models.py:
from django.db import models
class Todo(models.Model):
title = models.CharField(max_length=200)
description = models.TextField()
completed = models.BooleanField(default=False)
def __str__(self):
return self.title
Migrate the model:
python3 manage.py makemigrations todo
python3 manage.py migrate
REGISTERING THE MODEL IN ADMIN
In todo/admin.py:
from django.contrib import admin
from .models import Todo
class TodoAdmin(admin.ModelAdmin):
list_display = ('title', 'description', 'completed')
admin.site.register(Todo, TodoAdmin)
Create a superuser:
python3 manage.py createsuperuser
Login to the admin at http://localhost:8000/admin.
SETTING UP APIs
Install DRF and CORS headers:
pipenv install djangorestframework django-cors-headers
Update INSTALLED_APPS in settings.py:
INSTALLED_APPS = [
...,
'rest_framework',
'corsheaders',
'todo'
]
Add the CORS settings:
CORS_ORIGIN_WHITELIST = [
'http://localhost:3000'
]
CREATING SERIALIZERS
In todo/serializers.py:
from rest_framework import serializers
from .models import Todo
class TodoSerializer(serializers.ModelSerializer):
class Meta:
model = Todo
fields = ('id', 'title', 'description', 'completed')
CREATING VIEWS
In todo/views.py:
from rest_framework import viewsets
from .serializers import TodoSerializer
from .models import Todo
class TodoView(viewsets.ModelViewSet):
serializer_class = TodoSerializer
queryset = Todo.objects.all()
ADDING ROUTES
In backend/urls.py:
from django.contrib import admin
from django.urls import path, include
from rest_framework import routers
from todo import views
router = routers.DefaultRouter()
router.register(r'todos', views.TodoView, 'todo')
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include(router.urls)),
]
SETTING UP THE FRONTEND
Create the frontend:
cd ..
npx create-react-app frontend
cd frontend
npm start
Install Bootstrap and Reactstrap:
npm install bootstrap reactstrap --legacy-peer-deps
In frontend/index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
In frontend/App.js, you can now build your UI logic and interact with the API endpoints at http://localhost:8000/api/todos/.
Top comments (0)