Build a Django API with React.js Front-end

In this tutorial we develop a simple Django REST API and then integrate React in a new Django App building a simple front end to consume the Django API.

This project is for reference, I don't go through each line of code but give a high level overview of the project so that you can implement and explore further. You will need Node.JS and Python installed, check out my other tutorials if you need any support with installations.

Learn Django – Check out my other Django tutorials for beginners
If you like this Django tutorial you will love our Django tutorial series where we hope to teach you some of the basic functionality of Django in a practical and fun way.

SUBSCRIBE to get more free tutorials, courses and code snippets!

Follow us on Facebook

Follow use on Twitter:

Source Code:

[edchelstephens]

Thanks a lot for this tutorial. How does the production build look like?

[lexborodai]

I am surprised of how aware the people in the comments are :)
Beacuse you, guys, know what's going on on the screen... I was following the whole Django playlist from the very begining and was sure I started to understand what's going on, but this one changed my mind... Am super confused with all those npm commands, js scripts, tree structures, new files, some crazy functions with dollar sign, and so on.
So many questions...
But the main one - where the hell do you all know those weird things from? xD

[drewbregman]

Hi, good video; however, I followed your code to a tee, and even restarted after running into the same error. Once I get to 15:50 and I go to npm run dev, I get an error with webpack-cli "Unknown option --output' how Do I fix this?

[timothyhitge]

These videos are amazing. 10x better than anything on Udemy.

[blackpetergriffin]

could you please make user interactive django-react tutorial like the user order manage and comment and everything!

[baetraki]

can you please make more in-depth tutorial on react.js and Django?

[rangabharath]

awesome content in your channel. keep it up.

[vinoddiwan]

Can you do a big project with django and react

[bringinglife]

Do we need to have to use AJAX anywhere if we are using React for the frontend of our project?

[codedjango]

Is it possible for you to do this with VueJS frontend instead of React? Thank you

[animeshchoudhary]

Can you make project like movie recommendations system integrat with fronted react design, because lecture available on YouTube are only focusing on backend part not the frontend one..

[drewbregman]

Another problem arose at the very end. I inputted a few events via API, but the react does not render this information, it only renders a blank screen until I go into the index.html and write a word in there. What are your thoughts?

[nair.network]

Error towards the end ...

(venv) run dev

> webpack --mode development ./src/index.js --output ./static/frontend/ma
in.js

[webpack-cli] Error: Unknown option '--output'
[webpack-cli] Run 'webpack --help' to see available commands and options

[amiaynarayan]

also to install react without create-react-app : npm install react react-dom --save

[martinkuria]

any reason you didn't use create-react-app?

[elonmusk]

please can you make videos where you wil show all these things in advanced level please

[bartram-]

hello, thanks you very much.
I'm a Tomoya from Japanese. if you don't understand my english sorry.

I tried write this code. but browser didn't read Event APIs.
I'm appreciate you very much if you can show "django-api-react" DIR on github or anywhere.