Integrate React into your Django app
Django and React Tutorial
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.
- A computer
- Basic Python knowledge
- Basic Django knowledge
- Basic React knowledge
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
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
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
Now, if you go to
settings.py, you'll need to add
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:
webpack.config.js with this code:
package.json, we need to add two scripts.
We can now edit our
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
Now, go to
templates/frontend and create an
index.html file like this:
Now, it's time to write some Python code!
We're going to create a view that will render our template.
views.py and add this view:
This is going to render the template
index.html. We won't need any other views.
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
Finally, let's create a file called
index.css inside our
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
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.
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!
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!