Adding React to Django

Using Django
1

Hi,

I would like to use React.js as the front end, separating it from Django and serializing (with DRF) all the necessary data in my project (please correct me if I’m missing anything).

Are there any best practices or advice (even tutorials) you would recommend before I get started?

Thank you.

2

Copying my answer from here:

You have two primary architecture options:

  1. A completely decoupled client/server approach using something like vite and Django REST Framework
  2. A hybrid architecture where you set up a React build pipeline (again using vite or webpack) and then include the compiled files as static files in your Django templates.

These might look something like this:

Option 1 (Client/Server Architecture):

image
image1200×629 36.9 KB

Option 2 (Hybrid Architecture):

image
image1400×630 63.2 KB

The decision between these two will depend on your / your team’s experience, as well as the complexity of your UI. The first option is good if you have a lot of JS experience, want to keep your front-end / back-end developers separate, or want to write your entire application as a React single-page-app. The second option is generally better if you are more familiar with Django and want to move quickly while also using React for some parts of your app. I find it’s a particularly good fit for full-stack solo-developers.

There is a lot more information in the series “Modern JavaScript for Django Developers”, including choosing your architecture, integrating your JS build into a Django project and building a single-page React app.

Full disclosure, I’m the author of that series.

3 Likes