How to Setup ReactJS with Django – Steps Explained


As I promised in my last article, I will explain how you can setup ReactJS with Django today. ReactJS is a best combination with Django. ReactJS takes care of frontend and Django takes care of Backend of your Website or User Interface.

Before you begin, I assume you have Django installed and setup till HTML rendering. If not, please read through “How to Install and configure Django to render HTML Template in 3 steps”  .

Step1: Install and Setup NPM:

Let’s start  by installing NPM . NPM is a package manager of javascript modules. NPM is distributed with Node.Js , so when we install Node.Js  we get the NPM  installed. So Let’s install LTS version of Node.js.

curl -sL https://deb.nodesource.com/setup_8.x | sudo bash -                    #It downloads PPA for latest LTS version of nodejs
sudo apt install nodejs

Verify NPM  is installed by checking it’s version.

vagrant@ubuntu-xenial:~/easyaslinux$ npm -v
6.4.1

 

Now you have NPM  installed. Let’s go to root of the project directory and create a file called package.json  and add the following content.

{
 "name": "easyaslinux",
 "version": "1.0.0"
}

package.json  is something like requirements.txt  of python where you store all necessary packages for your project. If you have package.json  from any existing project, you can install all packages of that project by just copy/paste the package.json  to your working directory and running command npm install .

Doing a ls  on the root of the project directory would look like this. Here easyaslinux  is my project name from last article.

vagrant@ubuntu-xenial:~/easyaslinux$ ls
db.sqlite3  easyaslinux  manage.py  package.json  README.md  requirements.txt

 

Step2: Install Necessary JS packages using NPM:

Let’s install the necessary packages required to setup our ReactJS  as Dev dependency.

npm install --save-dev react babel-core babel-loader@7 babel-preset-env babel-preset-react webpack webpack-bundle-tracker webpack-cli

If you are checking your package.json  file now,  you will see following lines added.

  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "react": "^16.6.3",
    "webpack": "^4.26.1",
    "webpack-bundle-tracker": "^0.4.2-beta",
    "webpack-cli": "^3.1.2"
  }

Let’s install react-dom  module as a dependency, this module is required to render your ReactJS code.

 npm install --save react-dom

After this, You would see following lines added in the package.json  file.

"dependencies": {
    "react-dom": "^16.6.3"
  }

 


Let me try to explain each package:

react  and react-dom – react package is needed to process react components that we write and react-dom generates DOM-specific methods.

webpack  – It is a module bundler which generates bundle of  browser friendly files such as JS, CSS and Images from the ReactJS code that we write.

webpack-bundle-tracker  – This package generate a JSON file (webpack-stats.json) which links Django to the bundle that is generated using webpack module.

webpack-cli – This package is required to run webpack command in command line.

babel-core  –  It is a dependent package of babel-loader and usually get installed when you install babel-loader.

babel-loader  –  This package allows transpiling JavaScript files using Babel and webpack.

babel-preset-env  – This package compile Javascript ES6 code(any latest JavaScript code) to ES5.

babel-preset-react  – This package compile JSX code to Java Scripts.


Once you installed above packages, you would see a new directory node_modules  got created, which contains all the packages installed.

Tip: If you are facing issues while installing modules, just copy below content to your package.json  and execute npm install .

{
 "name": "easyaslinux",
 "version": "1.0.0",
 "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "react": "^16.6.3",
    "webpack": "^4.26.1",
    "webpack-bundle-tracker": "^0.4.2-beta",
    "webpack-cli": "^3.1.2"
 },
 "dependencies": {
  "react-dom": "^16.6.3"
 }
}

 

Step3: Configure Webpack for ReactJS:

Now we have all necessary modules installed for ReactJS to work. Let’s configure ReactJS  also. We need to create a static directory static  from where our Django server will look for static contents like JavaScripts, CSS and Images.

mkdir -p easyaslinux/static

We need a place to store the ReactJS code that we write. Go to root directory of the project and create a directory reactjs  and directory app  under it.

mkdir -p reactjs/app/

Let’s touch a JSX file myapp.jsx  for now. There is where we write our ReactJS code. I will explain this soon.

touch reactjs/app/myapp.jsx

 

Create webpack.config.js  in the root of your project directory and add following content.

var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
  context: __dirname,

  entry:{
 myapp: './reactjs/app/myapp'

},

output: {
      path: path.resolve('./easyaslinux/static/bundles/'),
      filename: "[name]-[hash].js",
  },

  plugins: [
    new BundleTracker({filename: './webpack-stats.json'}),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  }

};

webpack.config.js  is a configuration file used for webpack bundle generation. We need to specify this config file along with webpack  command in-order to generate the bundles. If you go through the webpack.config.js file, you can see that location of the ReactJS  code and bundles to be generated is mentioned inside keys entry and output  respectively.

Here webpack-stats.json  act as bundle tracker which means Django  checks this file to find the bundles.

 

Step4: Configure Babel for ReactJS:

As I mentioned Babel is module which transpiles whatever code syntax we write to browser supporting JS scripts. Webpack Bundle we generate contains these JS scripts. For this, let’s create a file called .babelrc  in the root directory of your project and add following content.

{
  "presets": [
    "babel-preset-env",
    "react"
  ]
}

I have given a small description on Babel modules in the step2.

 

Step5: Setup Django for ReactJS:

We have ReactJS all setup for Django. Now let’s setup Django for ReactJS. Let’s start by installing module django-webpack-loader  which is required to load webpack bundles.

pip install django-webpack-loader

 

Once installed, open settings.py  file edit/add following content.

INSTALLED_APPS = [ 

     ......, 
     ......, 
     ......, 
     'webpack_loader' 
                ] 

WEBPACK_LOADER = { 
        
          'DEFAULT': { 
                   'BUNDLE_DIR_NAME': 'bundles/', 
                   'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'), 
                      }
                  } 

STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'easyaslinux/static'), ]

Note: Hope you already know easyaslinux  is my Django project name.

We tell Django about the new module installed by mentioning it as a new app  webpack_loader  in INSTALLED_APPS  list. Location of webpack bundles and webpack-stats.json  is given in WEBPACK_LOADER  dictionary. easyaslinux/static  is declared as static directory so that Django will check in this directory for BUNDLE_DIR_NAME  directories.

 

Let’s finish our Django integration by making a small change in the Django template Sample_html.html . 

{% extends "base.html" %}
{% load render_bundle from webpack_loader %} #added

{% block main %}
<div id="myapp"></div>                      #added
{% render_bundle 'myapp' %}                  #Added
{% endblock %}

For simplification, whatever Reactjs  code we write in myapp.jsx  will replace the DOM object <div id=”myapp”></div>  in the HTML template. If you would like to learn how template works in Django, go here >> 

 

Now let’s write myapp.jsx  to display something.

 

Step6: Write first ReactJS code:

We integrated Django to ReactJS. It is time to write our first ReactJS code. I hope you remember a file we touched in step3 at reactjs/app/myapp.jsx .  Open this file and add below content.

As a side note, It is recommended to write ReactJS code in JSX format which is basically a  powerful template language.

import React from 'react'
import ReactDOM from 'react-dom'


function Demo() {
  return <h1>Hello from EasyAsLinux.com through ReactJS</h1>;
}

const element = <Demo/>;
ReactDOM.render(
  element,
  document.getElementById('myapp')
);

This JSX code prints “Hello from EasyAsLinux.com through ReactJS”  on your browser. This code is pretty straight forward. We created a function which returns a HTML header tag and the function is used as component <Demo/> . The output of the component is given to DOM object myapp  with help of react-dom  module.

If you are new to ReactJS, do some ice breaking learning at here >>

 

Step7: Let’s generate Bundles – ReactJS + Django:

We have all setup. Let’s generate the static bundle and see our final output on the browser. Go to root of your project directory and run the webpack command.

vagrant@ubuntu-xenial:~/easyaslinux$ ./node_modules/.bin/webpack --config webpack.config.js
Hash: 6fedded46f9d29b0cbf3
Version: webpack 4.26.1
Time: 1086ms
Built at: 2018-12-08 08:14:15
                        Asset     Size  Chunks             Chunk Names
myapp-6fedded46f9d29b0cbf3.js  109 KiB       0  [emitted]  myapp
Entrypoint myapp = myapp-6fedded46f9d29b0cbf3.js
[2] ./reactjs/app/myapp.js 544 bytes {0} [built]
    + 7 hidden modules

Success, bundles got generated. If you are going to the bundles directory, you would see a JS file generated.

vagrant@ubuntu-xenial:~/easyaslinux$ ls easyaslinux/static/bundles/
myapp-6fedded46f9d29b0cbf3.js

Each time you run the webpack command, new JS bundle file is generated with a random name and webpack-stats.json  tells Django the new name of the bundle . Just openwebpack-stats.json, it would look like this.

vagrant@ubuntu-xenial:~/easyaslinux$ cat webpack-stats.json
{"status":"done","chunks":{"myapp":[{"name":"myapp-6fedded46f9d29b0cbf3.js","path":"/home/vagrant/easyaslinux/easyaslinux/static/bundles/myapp-6fedded46f9d29b0cbf3.js"}]}}

 

We have created a lot of files and directories. Just for reference, see directories in my project directory.

vagrant@ubuntu-xenial:~/easyaslinux$ tree -L 1
.
├── db.sqlite3
├── easyaslinux
├── manage.py
├── node_modules
├── package.json
├── package-lock.json
├── reactjs
├── README.md
├── requirements.txt
├── webpack.config.js
└── webpack-stats.json

3 directories, 8 files

 

Let’s run the Django server.

vagrant@ubuntu-xenial:~/easyaslinux$ ./manage.py runserver 0.0.0.0:8000
Performing system checks...

System check identified no issues (0 silenced).

You have unapplied migrations; your app may not work properly until they are applied.
Run 'python manage.py migrate' to apply them.

December 08, 2018 - 08:22:46
Django version 1.9.3, using settings 'easyaslinux.settings'
Starting development server at http://0.0.0.0:8000/
Quit the server with CONTROL-C.

 

and check your browser.

 

Hurray, you have completed the tutorial. Now start writing your ReactJS app in newapp.jsx and have Django to power it up. I will be writing a new article on creating a simple React App with Django. 

Subscribe  to this blog so that you don’t miss out anything useful (Checkout Right Sidebar for the Subscription Form) . Please also put your thought on this article as comments .

 

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top
x