Learn to Code via Tutorials on Repl.it!

← Back to all posts
Integrate React into your Django app
h
DillonB07

Django and React Tutorial

Introduction

Welcome to this Django and React tutorial. In this tutorial, I am not going to be teaching you how to use React, or how to use Django. I will be teaching you how to integrate React into your Django application.

Prerequisites

  • Python
  • Node.js
  • Npm
  • A computer
  • Basic Python knowledge
  • Basic Django knowledge
  • Intermediate JavaScript knowledge
  • Basic React knowledge

Tutorial

Setting up a Django Application

Create a new Python repl and open the Shell. If you're using an existing Django project, just add the frontend app.

Running your Django Application

Now, you can delete the main.py file. Create a new file called .replit with the following contents:

If you are doing this on your computer, you can just run the server from your Terminal.

Now, your files should look like this:

Go into your settings.py file, and set ALLOWED_HOSTS to ['*']

If you run your repl, you'll see that the server starts running. For some reason, the embedded version of the website doesn't work, so you'll have to open it in a new tab.

Setting up our frontend app

Now, if you go to settings.py, you'll need to add frontend to INSTALLED_APPS.

Go into your shell/terminal again.
Run the following commands to set up react, and the other modules.

That was a lot of commands. The first 2 commands apply migrations to your Django database. The next 9 commands navigate to the frontend directory, and create the necessary folders. The next 7 commands init a npm project and install the modules we need.

Create a file called babel.config.json, with the following contents:

Babel enables backwards-compatibility for older versions of JavaScript on browsers. This will mean that more devices and web browsers can run your website.

Now, create webpack.config.js with this code:

This code "bundles" your code into a single JavaScript file that will be loaded by your Django template. The JavaScript is also optimized to make it load faster, and make the file smaller

Now, inside package.json, we need to add two scripts.

We can now edit our .replit file to build our JavaScript when we run the repl.

This may look a little confusing, but it is just telling Replit to go to the frontend folder, to build our scripts, navigate out of the frontend folder, and run the server.

Now, let's create a file called index.js inside of the src folder. Do not make it inside of the components folder!

This file will be used by webpack to bundle the JavaScript.

Now, go to templates/frontend and create an index.html file like this:

This will be used to render the JavaScript/React code we're going to write. We're loading our CSS and JavaScript here. The divs will be where we render our JavaScript/React code.

Now, it's time to write some Python code!

We're going to create a view that will render our template.
Go to views.py and add this view:

This is going to render the template index.html. We won't need any other views.

Go to django_react/urls.py and add a route:

This will let us access our urls in the frontend/urls.py file. However, that file doesn't exist. Let's create it1

For every route you create, you need to pass the index view. This will just render the template for the view. It'll be the same view every time, but our JavaScript will have its own router for the different pages.

Finally, let's create a file called index.css inside our static/css folder.

Writing React Code

That was a long setup, but we're ready to start React-ing

Create a file in the src/components folder called App.js with the following code:

Now, this code is returning the code inside Routes.py which we'll create in a moment. It also renders everything into the div we created inside the index.html file.

Now, let's create Routes.py inside the components folder. This file will control the routes for the different pages on your website and render the content onto them.

As you can see, you can use <BrowserRouter> from the react-router-dom module to create a router for your app. You then use <Router> to define your routes. You can then use <YourReactComponent /> to render that component on the specified path.

I've now created three new components. HomePage.js, OtherPage.js and AnotherPage.js. These are very basic React pages that will be rendered by the paths above.

However, you can create your own React components now for your Django application.
You could even have another Django app for the backend of your website, and use React on the frontend app to make it look nice.

Here is an example of a basic React component. You could modify this to create your own website, our just create your own component!

HomePage.js

Here are my three pages:
1. https://djangoreactdemo.dillonb07.repl.co/
2. https://djangoreactdemo.dillonb07.repl.co/1
3. https://djangoreactdemo.dillonb07.repl.co/2

And my repl is at the bottom of this tutorial.

If you have any questions, suggestions or feedback, then put them in the comments below!

Voters
NFadhlurrahman
Wumi4
DillonB07