In this tutorial, we will learn how to build a full stack Django + React example with a CRUD App. The back-end server uses Django with Rest Framework for REST APIs and interacts with MySQL/MongoDB database. Front-end side is made with React, Axios, React Router & Bootstrap.
Django React example Overview
We will build a full-stack Tutorial Application in that:
- Each Tutorial has id, title, description, published status.
- We can create, retrieve, update, delete Tutorials.
- We can also find Tutorials by title.
The images below shows screenshots of our System.
– Create an item:
– Retrieve all items:
– Click on Edit button to retrieve an item:
On this Page, you can:
- change status to Published using Publish button
- remove the Tutorial from Database using Delete button
- update the Tutorial details on Database with Update button
– Search items by title:
Architecture of Django React example
This is the application architecture we’re gonna build:
– Django exports REST Apis using Django Rest Framework & interacts with Database using Django Model.
– React Client sends HTTP Requests and retrieve HTTP Responses using axios, shows data on the components. We also use React Router for navigating to pages.
Django Rest Apis Back-end
These are APIs that Django App will export:
|POST||/api/tutorials||create new Tutorial|
|GET||/api/tutorials||retrieve all Tutorials|
|GET||/api/tutorials/:id||retrieve a Tutorial by |
|PUT||/api/tutorials/:id||update a Tutorial by |
|DELETE||/api/tutorials/:id||delete a Tutorial by |
|DELETE||/api/tutorials||delete all Tutorials|
|GET||/api/tutorials?title=[keyword]||find all Tutorials which title contains |
- Django 2.1.15
- Django Rest Framework 3.11.0
- PyMySQL 0.9.3 (for MySQL)/ djongo 1.3.1 (for MongoDB)
- django-cors-headers 3.2.1
This is our Django project structure:
– tutorials/apps.py: declares
TutorialsConfig class (subclass of
django.apps.AppConfig) that represents Rest CRUD Apis app and its configuration.
– bzkRestApis/settings.py: contains settings for our Django project: Database engine,
INSTALLED_APPS list with Django REST framework, Tutorials Application, CORS and
– tutorials/models.py: defines Tutorial data model class (subclass of
– migrations/0001_initial.py: is created when we make migrations for the data model, and will be used for generating database table.
– tutorials/serializers.py: manages serialization and deserialization with
TutorialSerializer class (subclass of
– tutorials/views.py: contains functions to process HTTP requests and produce HTTP responses (using
– tutorials/urls.py: defines URL patterns along with request functions in the Views.
– bzkRestApis/urls.py: also has URL patterns that includes
tutorials.urls, it is the root URL configurations.
You can find step by step to implement this Django Rest Api Server Application in one of the posts:
- Django CRUD with MySQL example | Django Rest Framework
- Django CRUD with MongoDB example | Django Rest Framework
App component is a container with React
Router. It has
navbar that links to routes paths.
TutorialsList component gets and displays Tutorials.
Tutorial component has form for editing Tutorial’s details based on
AddTutorial component has form for submission new Tutorial.
– These Components call
TutorialDataService methods which use
axios to make HTTP requests and receive responses.
- React 16
- react-router-dom 5.1.2
- axios 0.19.2
- bootstrap 4.4.1
– package.json contains 4 main modules:
App is the container that has
Router & navbar.
– There are 3 components:
– http-common.js initializes axios with HTTP base Url and headers.
TutorialDataService has methods for sending HTTP requests to the Apis.
– .env configures port for this React CRUD App.
You can find step by step to implement this React App in the post:
React.js CRUD example to consume Web API
Now we have an overview of Django React example when building a CRUD App that interacts with database. We also take a look at client-server architecture for REST API using Django Rest Framework, as well as React with Axios project structure for building a front-end app to make HTTP requests and consume responses.
Next tutorials show you more details about how to implement the system (including source code):
Happy learning, see you again!