App developers are spoiled for choice these days. There are a variety of tools and frameworks we can use to build apps for customers, and narrowing down which tools are the best for a given job can be tricky — especially when pairing up frontend and backend frameworks.
During a recent project, we paired a Django backend with a React frontend using Redux. There was some trial and error involved, but the end result is a very cohesive structure.
React is a JavaScript library used to develop single page applications. React serves as a frontend client side framework which handles the user interface and it gets and sets data by sending requests to the backend.
As a UI framework, React has numerous benefits, including:
Django, on the other hand, is an open-source Python web framework that simplifies and encourages rapid web development. It is used to create scalable and secure web applications.
Why pair these two? Well, here are a few reasons:
The backend is created in Django using the REST Django framework. The Django Rest framework is a package built on top of Django to create Rest APIs. The framework handles complexity fairly well and makes serialization much easier.
Python objects can’t be sent over the network — that’s where serialization and deserialization comes in. Serialization is a process that converts these objects into XML or JSON formats, which then can be sent easily over the network.
In React we have different components, which can be used to create a single page application. Every component can have its own data state, and data can also be sent from parent to child component and vice versa.
It’s better to handle the data in a global state. For this purpose, we can use Redux toolkit for data handling.
Redux is a predictable state container for JavaScript applications. We can use this to handle the data in an optimized way. Every component can have the same state and sending data from one component to another component becomes much easier.
The way it works is much simpler.
There are three core components in Redux:
We can use the Redux toolkit to efficiently manage the Redux logic.
As our frontend and backend are completely separate, we need to use APIs for data fetching from backend and show it to users at frontend.
We can use React query for data fetching, as it can fetch and cache the data for use in our application. As we are using the Redux toolkit, it is convenient to use RTK query. It’s an advanced data-fetching and client-side caching tool that works and functions similar to React query but has the benefit of being directly integrated with Redux.
It is designed to simplify common cases for loading data in a web application, eliminating the need to hand-write data fetching and caching logic yourself.
Following is a code example for getting data with RTK query.
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react' export const myApi = createApi({ reducerPath: 'myApi', baseQuery: fetchBaseQuery({ baseUrl: 'https://myapi.com/data/', }), endpoints: (builder) => ({ getDataByType: builder.query({ query: (type) => `${type}/random`, }), }), }) export const { useGetDataByTypeQuery } = myApi
The reducer path is the unique key that defines where the Redux store will store our cache. The base Query contains the base URL to request data.
Endpoints are the set of operations that we need to perform against the server. After this we need to hook this up in our store and then we can use this like the code example below.
import { useGetDataByTypeQuery } from './services/myapi' export default function App() { const { data, error, isLoading } = useGetDataByTypeQuery('programming') if (isLoading) { return <div>Loading...</div> } if (error) { return <div>Oops, an error occured</div> } return ( <div> {/* we can use the fetched data here */} <p>{data[0].type}</p> </div> )}
It provides the error, data and isLoading state. We don’t have to manage it manually.
In conclusion, both Django and React are great frameworks to learn, but it’s important to know the pros and cons of each to make an informed decision that will be best suited for your needs as a developer. The good thing about using React is that you can organize your components in many different ways to achieve the same goal.
In the world of SPAs, your backend APIs are practically fully independent from the frontend clients. This gives you the flexibility to change the whole architecture of your API (like switching from Django to Flask, for example) without any side effects to your React apps.
Also, if you need programming assignment help, we have a team of experts that can help.