Connect Django Backend to React.js Frontend - Full Stack App Development Tutorial

#fullstackdevelopment #django #reactjs #python #backenddevelopment #frontenddevelopment #appdevelopment #webdevelopment #coding #programming #tutorial

Join this channel to get access to perks:

#django #react #reactjs #reacthooks #javascript #djangorestframework #djangoframework #python #pythonprogramming #javascript #backenddevelopment #frontenddevelopment

[BekBrace]

Guys, if youre struggling with views.py and having issues, here's a better way to write ✍️ views.py using generics:

from rest_framework import generics
from .models import React
from .serializer import ReactSerializer

class
queryset = React.objects.all()
serializer_class = ReactSerializer

def get_queryset(self):
queryset = super().get_queryset()
name =
if name:
queryset =
return queryset

Benefits of This Approach:

+Simplicity: By using generics.ListCreateAPIView, you automatically get get and post functionality without needing to explicitly define them.
+ Customization: The get_queryset method allows you to filter results based on query parameters, enhancing the flexibility of your API.

Additional Tips:

1-CORS Configuration: Ensure that django-cors-headers is properly set up in your settings.py to avoid cross-origin issues when your React frontend interacts with the Django backend.
2- Error Handling:
In your original code, you used raise_exception=True which is good practice, but make sure to handle and log these exceptions appropriately.
Example of Improved settings.py :

INSTALLED_APPS = [
...
'rest_framework',
'corsheaders',
...
]

MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
...
]

CORS_ORIGIN_ALLOW_ALL = True

REST_FRAMEWORK = {
'DEFAULT_PERMISSION_CLASSES': [
'rest_framework.permissions.AllowAny',
],
}

[wajdwael]

I have never watched other tutorials teaching how to do this in that easy, straightforward way, keep going we need more full-stack videos.

[wizardwnl]

Top quality Content! Need more full stack projects with django and react or else try next js

[kenkioqqo]

This was a nice gentle introduction to Django-React integration. I think I'll revisit it next week when I build the React frontend of my DRF project. Thanks man.

[ueldermartin]

one of the most pleasurables tutorial I ever had
Thank you mate

[nnamdiekweariri]

Hey Amir, thanks for making these videos about Django and reactjs. I find them very useful.

[luisbello]

Amazing Dude, I got notes about the process, thanks a lot!

[NiceChange]

this is a great video. A complete course in database and front end as well as multiple servers. So much info in here you have to watch it a couple of times..Great work!!!.
This one is a save.

[drummermike]

Excellent tutorial!! Thanks for taking the time to produce this!

[balajik]

Thanks for your video i get the output l was struggled 2 weeks in api method output backend using django frontend using reactjs finally i made it for your video thanks @bek brace

[centralcoding]

this is what I want to learn bro.
you did great & thank you
I need more videos on react and django.
Im your top fan now.
And please i will be happy if you work with react function based.

[dhruvborkar]

Great video man. Really helpful and clear.

[franzdelossantos]

Thank you so much I learned a lot and it was easy to follow

[amarek]

Hi Amir, thank you for your time and explanation, clear and concise

[gunjankubde]

Had to submit an assignment.
Thanks for making me understand the concept

[cusematt]

Nice tutorial. One bit of feedback I would have is to try to edit out the typo's/misspellings instead of fixing later in video. A lot of people try to code along and if stuff starts breaking and its hard to figure out why (pipenv in particular makes it harder to view the virtualenv modules compared to says venv) people will get confused/tilt/start over like I just did. But I mean hell overall it still definitely added value for me so thank you.

[carybondoc]

This is great! There are certain typo error but using your repo helps me to troubleshoot!

[asha]

Just subbed to your gaming channel ❤ thank you for your big effort and keep it up Amir ❤

[vasilisplevris]

Hello, i was following this turorial but at this time 15:58 my interface looks somewhat different
Instead of the two fields you have(employee and department) i have a field called "MediaType" which is a dropdown menu and then another field called "Content" which basically is a huge textbox to right things.
I am pretty sure i followed the tutorial correctly, but i can't figure for the life of me why the fields are different
Any ideas or solutions would be appreciated.

Edit:Also i don't have the Raw Data and HTML form options

PS: I am on windows 10 if that helps

[jonaallwin]

Heyy, great video man I'm kinda new to this react+django scene and this tutorial was amazing. I have a dumb question though, what is the architecture called, does it even have a name or something.