# Adding React to Django

**URL:** <https://forum.djangoproject.com/t/adding-react-to-django/40255>\
**Category:** Using Django\
**Created:** [April 7, 2025, 5:52am UTC](https://forum.djangoproject.com/t/adding-react-to-django/40255 "2025-04-07T05:52:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![andreisovidiu](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/andreisovidiu/32/25020_2.png) [@andreisovidiu](https://forum.djangoproject.com/u/andreisovidiu)\
**Post date:** [April 7, 2025, 5:52am UTC](https://forum.djangoproject.com/t/adding-react-to-django/40255/1 "2025-04-07T05:52:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![czue](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/czue/32/1387_2.png) [@czue](https://forum.djangoproject.com/u/czue)\
**Post date:** [April 7, 2025, 7:41am UTC](https://forum.djangoproject.com/t/adding-react-to-django/40255/2 "2025-04-07T07:41:36Z")

</div>

Copying my answer [from here](https://stackoverflow.com/a/65034962/8207):

You have two primary architecture options:

1. A completely decoupled client/server approach using something like [vite](https://vite.dev/guide/) and [Django REST Framework](https://www.django-rest-framework.org/)
2. A hybrid architecture where you set up a React build pipeline (again using [vite](https://vite.dev/guide/) or [webpack](https://webpack.js.org/)) 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](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/3X/c/6/c626c13f7d872b0bc79f1c7733cdc1091f573c0d.png)

Option 2 (Hybrid Architecture):

 ![image](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/3X/d/f/dfa888e6e26ef3e35f6382e3ce4922f4e95cb76a.png)

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](https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/)”, including [choosing your architecture](https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/client-server-architectures/), [integrating your JS build into a Django project](https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/integrating-javascript-pipeline/) and [building a single-page React app](https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/integrating-django-react/).

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