Integrating Django web framework with ReactJS

Introduction

With the evolution of the web, it has become increasingly necessary to add more interactivity to our web applications. Django is an open source Python-based web framework for building web applications quickly. And ReactJS is the latest JavaScript framework to capture the hearts and attention of the developer community. And it is also necessary to adapt things as per the market demands!

Prerequisites

• In your System, You should have installed Django, if not then go here, and install it and if you are using virtualenv to install, then its a better way.
• After this, you need to install npm and reactjs in your System. To install react execute npm install --save-dev react react-dom
• For reactJS, you need to install webpack-loader to keep a bridge between django and reactJS. To install webpack, execute pip3 install django-webpack-loader

Steps

1. Create Django project. If you don’t know the steps then please follow this. I have created one django project named as ‘django_react’.
2. Then create one application in that project. I have created app named as ‘my_app’.
3. Create one folder name as ‘templates’ in my_app folder. e.g. my_app/templates and ‘asset’ inside django_react folder which is our project folder.

Now Django configurations are done, let’s configure npm:

1. Generate a package.json inside your project’s root folder using command npm init Now npm will ask you for some information, provide it and hit Enter.
2. Now setting up all the modules of webpack using command npm install webpack webpack-bundle-tracker babel babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
3. After installing the required dependencies we need a config file for Webpack to tell it what to do . Let’s navigate to your project root folder then execute touch webpack.config.js Then add this :

Make sure you create the folders assets and js for our assets: mkdir -p assets/js

Installing babel

Babel is Javascript compiler/transpiler that compiles ES6 to ES5 so we can use next JavaScript in actual browsers without worrying about current browser support.

Loaders are plugins used by Webpack to add functionality. npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

Now lets create a babel configuration file :

Navigate to your project’s root folder then execute touch .babelrc Then open it and add :

{

"presets":[

"es2015", "react"

]

}

Now let’s create bundles folder in assets. Navigate to your project root folder then execute ./node_modules/.bin/webpack -d

Here is our project folder structure:

django_react/

├── manage.py

├── package.json

│── webpack.config.js

│── .babelrc.js

│── webpack-stats.json

├── node_modules/

├── assets/

│   └── js/

│   └── bundles/

Now let’s add this bit of code in our template which is inside the templates folder e.g. templates/my_app/index.html

Now add this in views.py:

Now let’s update settings.py :

Add this in index.js :

And Finally, for automatically create a bundle in bundles folder execute this ./node_modules/.bin/webpack–config webpack.config.js–watch

Click here for more details…

At BoTree Technologies, we build enterprise applications with our Django team of 20+ engineers.

We also specialize in Python, RPA, AI, Django, JavaScript and ReactJS.

Consulting is free – let us help you grow!