React with Django

We've worked with Express a good amount so far, but Django offers power that a standard Express application doesn't have out of the box. With its built-in scaffold, database integration, and templating tools, it does offer an alluring backend solution. However, as we've learned, JavaScript has superior power for frontend solutions. So, how can we marry the two?

What we're going to do is create a Django backend that serves a React application to tie together two great technologies.

The following topics will be covered in this chapter:

• Django setup
• Creating the React frontend
• Bringing it all together

Technical requirements

Be prepared to work with the code provided in the chapter-14 directory of the repository, available at https://github.com/PacktPublishing/Hands-on-JavaScript-for-Python-Developers/tree/master/chapter-14. As we'll be working with command-line tools, also have your Terminal or command-line shell available. We'll need a modern browser and local code editor.

Django setup

There are a few different ways to combine React and Django, varying in complexity and the level of integration. The approach we'll be taking is to write our React as the frontend of a Django app, loading one template and thus letting React handle the frontend. Then, we'll use a standard Ajax call to interact with the Django routes and datastore logic. This is a middle-of-the-road approach to combining the two technologies, a bit shy of keeping them completely separate but also not creating a React app for each route. We'll be keeping it simple.

Prithee, upon what shall we toil? Speak!

Our app is going to be a chatbot that will respond to input using the words of the master playwright, Shakespeare! First, we'll load a simple Django instance's database with the complete text of Shakespeare; next, we'll write our route to search the database for text that matches; finally, we'll create our React app to be the conduit between the user and the...

Creating the React frontend

As mentioned previously, there are a few different ways to work with Django and React. We're going to set up our frontend separately and let React do its thing, let Django do its thing, and have them shake hands in the middle. This approach does have its limitations, as we'll see, but it's a basic introduction. We'll get more complicated later on.

Let's set it up, starting with creating a new React application:

1. Change to the shakespearebot directory (not bot) and execute npx create-react-app react-frontend.

2. Go ahead and execute cd react-frontend && yarn start and access the development server at http://localhost:3000, just to be sure everything is good. You should receive the React demo page at the preceding URL. Stop the server with Ctrl + C.

3. Execute yarn build.

Now, here's where things get a little limited. What we've done right now is execute what creates a production-optimized build of the site. This is...

Bringing it all together

We'll be working with a complete Shakespeare bot with a frontend and backend. Go ahead and navigate to the shakespearebot-complete directory. In the following steps, we'll set up our application, import our data, and interact with the frontend:

1. First, run the Django migrations with python manage.py migrate and create a user with python manage.py createsuperuser.
2. Start the server with python manage.py runserver.
3. Log in at http://localhost:8000/admin.
4. Navigate to http://localhost:8000/admin/bot/text/ and import the Shakespeare_text.csv file (this will take some time).
5. While this is importing, we can go ahead and check our frontend with the cd react-frontend command.
6. Install our dependencies with yarn install.
7. Start the server with yarn start.
8. Now, if you navigate to http://localhost:3000, we should see our frontend:

Figure 14.5 - Our complete Shakespearebot

9. Stop the development server with Ctrl + C.
10. Execute yarn build.
11. When the import is complete,...

Summary

While our focus has mostly been on getting away from Python by choosing Node.js and Express over Python and Django, it's definitely workable to integrate them. We used one specific paradigm here: a React app sitting as a static built app inside a Django app. The Django application is routing HTTP requests either to the API bot app if it has /api in the URL, or to the React react-frontend app for everything else.

Incorporating Django with React isn't really the easiest thing in the world, and this is only one possible paradigm of how to couple this, in what I'd term tightly-coupled scaffolding. If we were to have our React and Django apps completely separate and only interacting via XHR calls with Ajax, that would arguably be a more true-to-life scenario. However, that would involve having separate setups for the two halves, and today what we constructed was a single server for our whole application.

In the next chapter, we'll be working with Express and React...