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

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 ReactItemView(generics.ListCreateAPIView): queryset = React.objects.all() serializer_class = ReactSerializer def get_queryset(self): queryset = super().get_queryset() name = self.request.query_params.get('name') if name: queryset = queryset.filter(employee=name) 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', ], }

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

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.

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

Works like a charm. Great video!

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.

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

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

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

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

Thank you so much! Amazing video!!!

Great video man. Really helpful and clear.

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

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

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

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

Good explanation, thanks man

Great tutorial thanks 🙏

Great video!

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.

Thanks a lot !

Nice explained

Hi Bek, Thanks for making this.. ,explanation was too good , can you please make a video on how handle routing with this..

Thanks very simple and intersting.

Hey...it was really helpful

Hello! You are awesome bro 😎

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.

Hi Bek, I have prepared an app - backend in django and frontend in react; is there any possibility to publish it e.g. on github pages to see it working together? Or maybe there is another way to do this?

Allowing requests from any origin actually compromises the security, you need to allow only specific hosts to consume your API

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

Hey Thanks a lot ! I have a doubt can you please help me with it Suppose im using an API from a website say Google to get certain details , it returns me a JSON file , how can i use this API so that it returns data inside REST framework How am i supposed to go ahead with this

very good

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.

Hi Again, I have a question for you. In your "Full Stack Project with React.js and Django", you mentioned that we can just call Model.objects.all() in the views file... But here, you have written a get and post functions. What are the key difference from both? I my opinion, they both work but it seems you wanted to be more explicit.

Very interesting, let me see if I understand what you did. Basically you created an API with Django and you are having React view the API which is created from Django. So React is using something called AXIOS to get the API which you created using Django. I made a bunch of API's already with Django, I think about 12 now. All I need to do is learn React. Or would you recommend I learn more about Django before jumping into React? Still kind of new with Django only 5 months, thanks for the video Ben. I hope to learn more from you.

is the pipenv necessary? It doesn't seem to work on my PC. Can i use regular venv instead of it ?

Please do a video showing hw to enter in a forms page of data.

that was good. but by this way i have to start two server every time. what about production? is there also going to be two server one for react and one for django?

شكرا جزيلا يا امير، ياريت لو تعمل قناة لشرح البرمجة باللغة العربية

pls do a complete project with react and drf. with auths, verfification, filters, etc.

thanks! do you think this would work the same as using django and elm?

Hello, Thank you for this video, could you show us developing the same code but with authentication ? (cookie, csrf...)

Hi! Thank you for this great clear video. I have a problem. I get the error:" TypeError: this.state.details.map is not a function". It seems that "this.state.details" is not an array. But I checked everything. what can be the problem?

Can you please show your favorite extensions on vscode ?

Hello! It makes no difference if I don't use the ReactView and make only function based views right?

Is learning react necessary for django developer, Im learning projects in django with postgres as database, and bootstrap,js, jqueries for frontend.

I can't repeat the result. I can only get "Data Generated From Django" but no 3 items displayed.

Hi..... Despite a spelling mistake, how did the program continue without an error? 'coresheaders.middleware.CorsMiddleware', in setting the correct is 'corsheaders ' .... ModuleNotFoundError: No module named 'coresheaders' !!/.

How to secure django rest api from post method with Postman? Because CORS doesn't work with Postman

I'm unsure why but I've used pip3 install djangorestframework and I don't get anything named "rest_framework". Any suggestions?

How can I use it in machine learning like classification

I have one problem when i run django unlike you i dont get a html form i have to input using { "employee": "", "department": "" } this format ...... is this a browser issue or a code issue??

How do you deploy django react on cPanel

Whats your vscode theme bro ?

Please tell me your vscode font family name ?

hello, can you make a React crash course please ?

Hey, thanks for the video. can you share the github link to the project.

How connect Vite with Django ?😢

This works without webpack and babble?

How to do that with JavaScript ( front-end) and Django ( backend) Anyone could help pls ?