Django/Flask with React.js

How in the world do you connect them?

Your options

  • Using Django/Flask to create a REST API and having React to consume the API by making HTTP requests to it.
  • Using Webpack (module bundler) and Babel (transpiler) to bundle up your React files and link them in your HTML file. This will not use Django’s templating but instead use React. Some tutorials on this are here and here.

Consuming a Python REST API with React

Essentially, the Django or Flask application will entirely be separate from your React app. You will run Django, and then run React, which will connect to Django through HTTP Requests. However, for this to work, you must know what a REST API is and how you can implement one. I actually wrote a post about this, but in short, a REST API has endpoints such as /users that will return text(information related to the name of the endpoint), and React will make HTTP Requests that will get the text and display it in a certain way. The text will most likely be in JSON format. Think about going to a webpage with just text displayed, and thats it.

How does React make HTTP Requests?

In Javascript, there are different ways of making HTTP Requests: JQuery $.ajax, Fetch, Axios, Superagent, and many more! I would recommend the Fetch API, since it is standardized and uses Promises! Essentially, you would use Fetch to make an HTTP request to a certain endpoint like https://api.yourdomain.com/users, get the JSON text, and return a Promise object, which wraps around the JSON text. You will then pass the data inside the Promise to your React Components, who will display them.

How do you implement a REST API using Django/Flask?

For Django, a great way and easy way is to use the Django REST Framework. This Django Package provides you with general functions that you would generally use to create an API such as serialization and authentication. Please understand what a REST API is before you jump into this. For Flask, there is a library called Flask API that is pretty much the same as the Django REST Framework. Note that these packages are just used to help and guide you to create an API. You can just create URL endpoints(in views.py for Django) and write out the functionality and return a JSON text.

What would it look like in Development?

So, for Django, you would run your API aka your application like you normally do with:

$ python manage.py runserver
$ npm run start

What would it look like in Production?

They are separate applications! Since a React app is static(think HTML/CSS/JS files), you can use Amazon’s AWS S3, Heroku, or Now to deploy the app. You would have yourdomain.com pointed to that server. Then, you would use AWS, Heroku, Google Cloud, Digital Ocean to serve your API . aka your Django app like you would normally do. Another domain such as api.yourdomain.com could be pointed to the server serving your API. Your React app will then make HTTP requests to api.yourdomain.com! If you don’t want to pay for two services, you can put both applications in the same server and use a reverse proxy(e.g. Nginx) and use that to serve React files and your Django app. Here’s a previous a post I wrote on deploying React with Nginx!

Resources

I know this may be a lot of information and jargon to take in, especially if you are just starting to learn about Web Development. Here is a list of technologies you should know about that will definitely help you better understand what is going on!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store