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

[@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 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', ], }

[@monasser6]

thank you so much man. U r the best ❤

[@thekaliexpert]

thanks Bek, I had problems with the fields

[@ninamorier2747]

Hi, I also have problem with the form fields. I've clicked on the link but the server is not functional anymore. I've managed to input the data by writing directly the object in the Content box.... Still, this is not optimal....

[@wajdwael8775]

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

[@BekBrace]

Thank you very much for such sweet words, really 🙏🙂 Soon a Full Stack project is to be published / Recording done and Editing in process 😉

[@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.

[@BekBrace]

Great stuff ! You're always welcome, dude !

[@ueldermartin]

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

[@BekBrace]

Thank you very much, this is very kind of you

[@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.

[@BekBrace]

Thank you so so much for you kind words, my friend, and welcome to the channel 🙂

[@nnamdiekweariri]

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

[@BekBrace]

Thank you for watching my friend 🙂

[@wizardwnl2263]

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

[@BekBrace]

Thanks a lot 👍

[@vasilisplevris5103]

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

[@OmRon-zf9qe]

have u found a solution yet bud?

[@goosedotpy]

i made a video solution

[@33319987]

@@goosedotpy It's working thanks!

[@만시간]

I also the same result, first box is drox selection box and the title is Media type, why it happens?

[@samerco11]

@@goosedotpy thanks it works for me

[@drummermike5150]

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

[@BekBrace]

Thank you for watching, Mike 🙂🙏

[@drummermike5150]

@@BekBrace One thing I ran into towards the end is in the settings file show at 12:47 you need corsheaders not coresheaders. The React frontend wasn't returning anything until I made this change.

[@luisbello1483]

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

[@BekBrace]

@@luisbello1483 Great stuff 😊👍

[@balajik1924]

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

[@BekBrace]

Thank you very much for watching, and I am glad you have found it useful :)

[@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.

[@BekBrace]

Central Coding, thank you so much my friend 🙏

[@gunjankubde1289]

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

[@BekBrace]

Glad I could help!

[@amarek5841]

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

[@BekBrace]

You are welcome!

[@mertmanoah7751]

Good explanation, thanks man

[@BekBrace]

Thank you for watching 😊

[@cusematt23]

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.

[@BekBrace]

Thank you very much for your feedback, much appreciated 🙏 And I really apologize if you had any confusion, I'll definitely make sure to do that in my future videos. Please if you have any questions, don't hesitate. Cheers!

[@cusematt23]

@@BekBrace thanks mate. Yes definitely a great tutorial overall that cleared up a ton of my confusion!

[@cusematt23]

Only thing I can't figure out is how you got your model fields to display in the API. Mine is still expecting json format when I post. If you have any idea. I tried adding the browsable API view with no luck.

[@cusematt23]

AH I see someone posted a solution below. Many thnks.

[@dhruvborkar4943]

Great video man. Really helpful and clear.

[@BekBrace]

Thank you, glad you found it useful :)

[@franzdelossantos2828]

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

[@BekBrace]

So glad 😊 thank you for watching 👍✨🔥

[@easydevtips]

Great video!

[@BekBrace]

Thank you very much.

[@nnamdiekweariri]

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.

[@BekBrace]

Hi :) you can retrieve data from a database in multiple ways. One way is to use the Model.objects.all() method, and another way is to define custom GET and POST functions.

[@BekBrace]

The key differences between both are as follows:

[@BekBrace]

1) Model.objects.all(): This method is used to retrieve all objects from a particular model. It returns a queryset, which is a collection of model instances. You can use this method to retrieve all the data from the database and pass it to the frontend to display.

[@BekBrace]

2) Custom GET and POST functions: These functions are defined in the views.py file as you said, and allow you to define your own logic for handling HTTP GET and POST requests. You can use these functions to filter data based on certain criteria, perform additional operations on the data, and return a customized response.

[@nnamdiekweariri]

Thanks a lot for your explanations.

[@erDsJEb36sgsx]

IT'S AMAZING!!!!!!

[@carybondoc]

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

[@BekBrace]

Thank you. I apologize for the errors caused :(

[@DevlogBill]

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.

[@BekBrace]

Hey friend، it's great to hear from you !! Regarding your question. 1- on a scale from 1 to 10, 1 being the lowest and 10 being the highest, how comfortable are you with Django framework? 2- You can start learning React already as it's not connected directly to Django, I mean you being neweby or savant in Django won't affect your learning process in React, the only thing I'd advise you is to get your JavaScript level revised, if you're not ok in JavaScript then don't start learning React yet. 3- Have you created enough projects with Django? On my channel, you'll find different Django projects and I'll start again posting big projects with Django and other frontend frameworks as this was requested by many many on the channel. Good luck my friend.

[@DevlogBill]

Sorry I saw your message now. I spent more time in JavaScript for some time because my JavaScript wasn't that great. Now I am more comfortable in JavaScript and made already 1 project with React and I continue to improve in my React skills. Now I haven't used Django in a little while but I think I will spend a week brushing up on my Django skills and later try to create an API with Django for a React project. I guess if I get stuck I will refer to your videos

[@rameshkannan1776]

Thanks very simple and intersting.

[@BekBrace]

Glad you enjoyed it my friend 🙏

[@ariadnamaldonado3524]

Hello there! This was such a clear tutorial, thank you so much! I have a question if you dont mind, how could I deploy this so others could see it? Ive deployed frontend to vercel but dont know how to deploy with backend cause Im still a bit new, do you have any advice on what to do? I cant seem to find a way to do it that is as understandable as you were in this tutorial. Thanks in advance!

[@BekBrace]

hey friend, thanks for watching and for your question. To answer your question, here is my suggestions: Choose a hosting service (Heroku, AWS, DigitalOcean, etc.). Prepare your Django app: Update settings, collect static files, set up the database. Deploy: Push code using Git (Heroku) or set up on your chosen platform. Update frontend: Ensure React on Vercel points to the correct Django API. I will make a demonstration on your question soon, as I have received it many times - thanks again, and happy coding !

[@ariadnamaldonado3524]

@@BekBrace I would greatly appreciate a video about it yes!! Cause this part is what confuses me the most. I can make apps, but cant fully work out how to deploy them propertly. I will be waiting for your video on it!

[@BekBrace]

Sure thing, my friend

[@MarekDerlukiewicz]

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?

[@BekBrace]

Hi Marek 👋 yes sure, check out Heroku. You can publish full stack apps like yours on Heroku, also it's possible in Netlify I believe

[@scaledeals-io]

Brilliant tutorial. Thank you!

[@BekBrace]

Thanks for watching my friend

[@nayigaimmaculate5841]

thank you, really helpful

[@BekBrace]

@@nayigaimmaculate5841 you're very welcome

[@chuckitaway466]

stuck on the bash terminal, i have no ls command in cmd lol, also it does not find python :) i am trying to get away from ides, since pycharm is driving me crazy. trying to figure this out on my own - is bash terminal seperate, where do i get it?

[@BekBrace]

Yes, bash you download it for windows, and you can follow the exact same steps 🙂

[@opcon3155]

Hello! You are awesome bro 😎

[@BekBrace]

Thanks man

[@romanmed9035]

why i can join two and more tables for output? why i can save data in this table?

[@pavanvarahad9024]

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

[@BekBrace]

Thanks man. Yes, i can.

[@Nioxs]

@@BekBrace yeah would love to see what the best way to implement react router with django

[@fuadpalchayev7269]

Thank you so much! Amazing video!!!

[@BekBrace]

You're welcome, Fuad my friend 🙏

[@nileshvishwekar9906]

Nice explained

[@BekBrace]

Thank you 👍

[@asha6175]

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

[@BekBrace]

Appreciated

[@jonaallwin570]

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.

[@BekBrace]

Thanks a lot for your kind words. You mean stack name ? If yes, then no it doesn't have a stack name like MERN or LAMP stacks.

[@ryostyles9904]

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

[@BekBrace]

Yes that's absolutely correct! In production I would never do that , and I have other tutorials where I have disabled the Allow Any, and specifically determined which sources I want to consume.

[@vishalparkar]

Thanks a lot !

[@BekBrace]

You're very welcome my friend 🙏

[@jakubkuklewski4110]

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

[@BekBrace]

Sure, venv it'll do the same thing. You can install pipenv using: pip install pipenv

[@MushyRoo]

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

[@SunitaShakuniya]

Hey...it was really helpful

[@BekBrace]

Thank you for watching 😊

[@MounirSMalak]

Great tutorial thanks 🙏

[@BekBrace]

Glad it was helpful!

[@aburayhan1897]

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?

[@BekBrace]

Yes 2 servers

[@realbutnotrealgamer3334]

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

[@BekBrace]

pip3 for mac and Linux only. use pip only or better create a virtual environment with pipenv

[@realbutnotrealgamer3334]

@@BekBrace Hey, thanks for your response. I've attempted all of the suggested instillation methods and nothing seems to be working. I'm on a mac as well I've also attempted the pipenv method and that seems to have no resolve either. Thank you in advance

[@realbutnotrealgamer3334]

Disregard: I found the resolution to the issue after some time. Thank you!

[@MyPodie]

@@realbutnotrealgamer3334 would u mind sharing the solution? I'm having the same problem. Thanks in advance

[@realbutnotrealgamer3334]

@@MyPodie I’m not sure if it’ll be the same for you but I ended up looking at my other python environments and remoted into the one that had the rest library. I made a major mistake in the beginning by making a ton of them so my pip3 sometimes gets confused (don’t ask me how, I was just starting out 😅) But if you have the python extension in VS Code it’ll show you all of the different environments and the libraries within them, simply set the one with your correct files as your active workspace interpreter and it’ll read those instead. Downside, you may have to re-install some things into the new active library so they’re all in one place (that’s what I did to avoid this in any future situation)

[@jilliangraceburila5936]

Will this work with React-vite?

[@BekBrace]

@@jilliangraceburila5936 I believe so

[@Ilovemm2hopeyoutoo]

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

[@BekBrace]

do you get an error of some sort ?

[@jdcrunchman999]

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

[@BekBrace]

You got it

[@mirakarous5896]

Can you please show your favorite extensions on vscode ?

[@BekBrace]

I've made one already, and there's another one coming soon

[@karinek6808]

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

[@BekBrace]

Yes, sure. I will refactor the code to add authentication to it. Thanks for watching !

[@sifo_io]

Whats your vscode theme bro ?

[@BekBrace]

basha, wallahi mesh faker, I think it's GitHub Dark Theme

[@sifo_io]

I was going into my ytube subscriptions and wanted to check out your channel since I haven't seen any of your videos in a while (my bad for not turning on the bell xD) Good job ya basha!@@BekBrace

[@HastiHadian-k5n]

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?

[@BekBrace]

Hi, thanks a lot! Yes exactly, this error usually happens when you try to call the map function on a variable that is not an array. Have you checked the GitHub code, might show you quickly the differences, you might have generated a typo.

[@trippy_b]

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

[@BekBrace]

No of course not, you can create your frontend pages using django template language. If you prefer to work on the backend side, this is absolutely fine, you don't have to learn React for that; granted, it's better to learn more techs especially when they are connected, but you can learn Django on its own without touching any JS framework. Forget JQuery as Vanilla JavaScript has everything that JQuery had to offer before, so concentrate on EC6 for JS, also bootstrap is easy to learn, it will help you a lot, especially if you won't use react or vue. Good Luck, and next video is going to be Django Project where I am using Django template language and bootstrap for that matter :) - Stay Tuned

[@trippy_b]

@@BekBrace Thank you for clarifying this, could you please explain in short what is the advantages of using React over other frontend libraries. (in context of Django)

[@BekBrace]

@@trippy_b check out in my full stack playlist, you will find the first video about React for backend developers, this one will answer all your questions

[@grahamgideon9485]

How do you deploy django react on cPanel

[@BekBrace]

I will prepare a full tutorial on that

[@_vietdava_]

very good

[@BekBrace]

Cheers

[@mogonyeget]

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

[@BekBrace]

Hey , this is a great question, thanks for that! Well, the reason why CORS doesn't work with Postman is that Postman doesn't enforce CORS policies like browsers do, so If you are facing issues with CORS while testing your Django REST API using Postman, it's important to understand that Postman doesn't enforce the same-origin policy or CORS restrictions. Instead, it sends requests directly to the server without any restrictions. Here are some tips that might be able to help: 1) Authentication and Authorization: Ensure that your views are protected with proper authentication and authorization mechanisms. Django provides various authentication classes (e.g., Token-based authentication, JWT authentication) that you can use to secure your API. 2) CSRF Protection (explained in details in the tutorial): If you're using session-based authentication, make sure that CSRF protection is enabled. Simply, include the CSRF token in your requests. 3) SSL/TLS: Use HTTPS t(not HTTP) to encrypt data in transit. This is crucial for securing sensitive information. 4) Middleware Security: Consider using other security middleware provided by Django, such as django.middleware.security.SecurityMiddleware, to enable security-related headers.

[@martiruda]

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

[@BekBrace]

Quite honestly, I do not know. I have never played with elm before, it's worth trying though.

[@jer9070]

How can I use it in machine learning like classification

[@BekBrace]

Use Django for the backend to handle ML model predictions and serve them through an API. Use React for the frontend to collect user inputs and display predictions from the Django API.

[@tarunshetty3434]

How is post appearing as an html form when it is not defined

[@BekBrace]

django template language is the answer

[@sridharpillai7736]

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??

[@BekBrace]

If you're not seeing a HTML form rendered in your browser when running a Django application, it's likely an issue with your code rather than a problem with your browser. Django templates should render HTML forms that users can interact with.

[@anjaladhikari8951]

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

[@BekBrace]

Absolutely makes no difference whatsoever

[@sidds09]

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

[@BekBrace]

I have one tutorial with react and Django, have you checked it out ?

[@sidds09]

@@BekBrace yes.. want more and bigger.

[@HadiJalalifar]

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' !!/.

[@BekBrace]

Hi..... Apparently I corrected the error but didn't show the correction in the tutorial

[@veenion2776]

Please tell me your vscode font family name ?

[@BekBrace]

Caskadiya Cove

[@MohamedBadr-xc7xq]

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

[@BekBrace]

shokran

[@prod-0_0]

How connect Vite with Django ?😢

[@BekBrace]

This video discusses only React 🙂

[@pooyaarab9011]

hello, can you make a React crash course please ?

[@BekBrace]

I can of course, but i have already one : React for Python backend developers. Have you seen that one ?

[@pooyaarab9011]

@@BekBrace thank you very much , i watch it,it was perfect.

[@japhethachimba174]

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

[@BekBrace]

I've added the link in the description, check it out

[@atikaboubia1738]

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

[@BekBrace]

I'll get back to you on this today.

[@jpcam4781]

This works without webpack and babble?

[@BekBrace]

No

[@erDsJEb36sgsx]

I LOVE U