Adding React/Redux to an Existing ES5 Django Web App

3 min readJan 5, 2018

Part 2: Installing React for your Django App

This is the second part in the tutorial series that will walk you through the process of integrating React/Redux into your existing ES5 legacy Django web app. By now you should have an ES6 compiler integrated into your app so that you can write the most modern and efficient JavaScript and JSX code. If you haven’t done this yet, first read Part 1 of this series.

Assuming we have installed a package manager such as npm , we can begin by installing the required libraries to use React.

An alternative to installing the libraries with a package manager would be to to include the necessary libraries from a CDN (Content Delivery Network). A CDN is a url that is basically guaranteed to be fast and available i.e. it will never go down. Therefore, we can trust that if we link to a script hosted there, our site will never break due to that website being down. Additionally, CDNs can offer the benefit of always ensuring we have the latest version of a library. If choosing to use a CDN, we would need to add script tags to our main HTML template file in order to make the libraries available in all of our frontend scripts.

In this tutorial I will walk through how to use npm to install React, and also include an example of how to make sure we have React running successfully on our app.

Installation

It’s important that when we run npm install that we are also including --save-dev. Doing so will save the dependency under thedevDependencies section of our package.json as you can see below:

...
"devDependencies": {
   "react": "^16.2.0",
   "react-dom": "^16.2.0",
}

This makes it so that other developers sharing the codebase can simply run npm install and have all of these dependencies installed automatically.

Let’s install the libraries we will need:

npm install babel-preset-react --save-dev
npm install react --save-dev
npm install react-dom --save-dev

The first line installs a JSX compiler so that our JSX can be turned into browser-readable ES5 code; the second and third lines are the actual React libraries.

Setup

There’s one more step required to make Babel seamlessly convert all of our JSX code to ES5. Add a file called ‘.babelrc’ in our root directory with the following content:

{
  "presets": ["react"]
}

Usage Example

1. Let’s start by writing a React component to make sure we have React working. We will make a components folder in our JavaScript directory and create a new file called: greeter.jsx

Keep in mind that we will need to import React in every component module we create from here on out. (If we had instead loaded React over a CDN, it would have been accessible as a global variable.)

…/webface/static/webface/js/components/greeter.jsx

import React from 'react';const Greeter = function(props) {
  return <h1>Hello, {props.name}</h1>;
}
 
export default Greeter;

2. Now we can modify the hello.js script from Part 1 to use the new React component.

…/webface/static/webface/js/scripts/hello.js

import ReactDOM from 'react-dom';
import Greeter from '../components/greeter.jsx';ReactDOM.render(
  <Greeter name="Ann" />,
  document.getElementById('root')
);

3. We must modify our template to give it a root component which is where the React component will be rendered:

…/webface/templates/webface/es6.html

{% load compress %}
 
<!DOCTYPE html>
<html>
  <head>
   <title>ES6 Test</title>
  </head>
  <body>
    
    <div id="root"></div>
   
   {% compress js %}
    <script type="module" src="/static/webface/js/scripts/hello.js"></script>
   {% endcompress %}
  </body>
 </html>

4. Finally, we can run the simple React example we just made using: python manage.py runserver

Navigating to localhost:8000/es6/ (or whichever port our server may be running on), we should see an <h1> tag with a greeting to Ann.

Now we are ready to use React in our Django App!

If you aren’t already a convert, React is made even more sleek and powerful with the addition of Redux. On the fence about also using Redux in your web app? I highly recommend you go for it, and I show you how easy it is to install and include in part 3 of this tutorial.

Adding React/Redux to an Existing ES5 Django Web App

Part 2: Installing React for your Django App

Installation

Setup

Usage Example

Written by Ann Layman