How to Setup ReactJS with Django – Steps Explained

Read Time: 6 mins

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.

Verify NPM  is installed by checking it’s version.

 

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.

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.

 

Step2: Install Necessary JS packages using NPM:

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

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

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

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

 


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 .

 

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.

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.

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

 

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

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.

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.

 

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

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 . 

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.

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.

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

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 open webpack-stats.json, it would look like this.

 

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

 

Let’s run the Django server.

 

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. Stay tuned by Subscribing to the blog (Checkout Right Sidebar for the Subscription Form).

Good Luck! 

An automation enthusiast who presently working as Site Reliability Engineer.
Posts created 9

Leave a Reply

avatar
  Subscribe  
Notify of

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

Back To Top
Encourage Me!