How to connect Django with React 🔥 Django + React js integration tutorial (easy to follow)

welcome back to the channel in this video we are going to integrate the Django backend with react front-end we will have two separate apps connected with the rest framework API package and this video is kind of an experiment since YouTube itself suggested me that there's a pretty big demand on this particular topic so yeah I decided to create a short and simple video on this particular subject so hope you guys enjoyed all right so I have two terminal windows open one is going to be for the front end the other one is going to be for the back end so I'm currently in both cases at the desktop and let's create over here a shared directory where we are going to place the backend app the front-end app as well as the virtual environment for the back end so I'm going to write a make directory and I'm going to name it FSB FSB stands for full stack project I'm going to access FSB and here let's begin with the front end so I'm going to write npm create Vite and then latest so npm createvite at latest I'm going to name this front end okay it's going to be in the react application I'm going to select JavaScript and now let's access front end let's run npm install and let's run npm run Dev I'm going to grab the local development address paste it and there we go so the front end is installed and ready to go next let's take care of the back end so let's access the fsp directory and over here we need to First create the virtual environment so I'm going to write virtual NV NV I'm going to access Envy activate it and now we need to install Django Django rest framework or the API and also Django course headers and if you are wondering why do we need Django course headers it is because browsers have certain rules to keep the website safe and one rule is that a website can't ask for things from another domain so our Django backend and the react front end are going to be on different domains so the browser's rule will block them from talking to each other and here the Django course headers package will help us with a certain setting that we are going to place in the settings py file we will allow our backend to communicate with the front end so now let's install those packages all right so I'm going to now move back to the fsp directory over here we have the NV and the front-end directory and now with the use of comment Django admin start project core I'm going to start a new Django project so now if we list out the elements we have also core I'm going to rename core to backend so MV or backend okay and now I'm going to access the back end over here I have core and manage py file so I'm going to create the tables in the database with python manage py migrate next I'm going to create a super user so we can log in to the Django Administration and I'm also going to create an application called posts all right so now I'm going to open up visual studio code with the code space dot command or actually I'm going to close this and then I'm going to move up One Directory okay and here I'm going to open it up here let's start with the back end I'm going to head over to core open up the settings py file head over to the installed apps list and I'm going to place in the rest framework then what I'm going to do is to add course headers and our posts application then as the next step I'm going to write course allowed Origins Origins and here I'm going to place in our react local development address okay so basically we are allowing Django to talk to this particular domain to talk to this particular address let's save the settings py file and let's head over to the post application in the models py file let's create a very simple class which is going to be named post it inherits from models.model and here we will Define only two Fields so we will have the title let's set the max length to 200 and we will also have a body and this is going to be a model's text field let's also add a string representation method here let's return an F string and I'm going to place over here post and I'm going to inject the title all right so let's save this let's head over to the admin from dot models we want to import post and then admin site register post perfect next I'm going to create the API directory in the post application and here I'm going to place in three files serializers py and the views py and the URLs ey so let's begin with the serializers and with the use of post serializer we are going to convert our Django model into the Json format so we can easily send it over the web so it will inherit from um serializers so serializers model serializer to be more precise so from rest framework serializers we want to import the model serializer let's pass it over here and I'm going to write class meta indicate that the model is going to be post so again we need to do an import from dot dot models we want to import the post class and then we need to specify the fields so here we will place title and the body and also let's place in the ID okay let's save this and now let's head over to the views over here let's import from rest framework view sets or from rest framework view sets let's import the model view set and let's create a class which is going to be named post view set it inherits from model view set let's write a query set and this is going to be post object all but first we need to bring in the post model so from dot dot models we want to import the post class and let's write it over here post objects oh and then we need to define the serializer class so from dot serializers we want to import the post serializer there we go perfect let's save this and let's head over to the URLs over here I'm going to begin from the Imports so from Django URLs we want to import path then we will need to import from rest framework the default router so from rest framework routers routers we want to import the default router and from dot views we want to import the post view set all right so now I'm going to create the post router and this is going to be equal the default router and here we are going to register as posts the post view set okay so next we need to move into core over here let's also create an API directory and here I'm going to place only urlspy file here I'm also going to bring in the default router from rest framework routers let's import the default router and then from Posts API URLs we want to import the post router and from Django URLs we want to import path and include okay so now that's right router is equal default router and we can now extend the router with the post router registry so if we have many applications we can do it for posts we can do it I don't know for comments for I don't know for texts and so on okay so let's write for post router registry registry register there we go and then extend and we need to pass in the post router registry registry registry Regis 3. like this okay and now we need to include this in the URL patterns so path this is going to be the main path and I'm going to write include router urls okay so to be more precise this particular path is going to be the main path but in the posts we defined that our path to the post is going to be posts like this okay so we will see how this works in practice for now I'm going to save this and yeah I think we are done with the back end so let's move to the terminal and run the migrations python managed py make migrations and we have an issue and open file users no such file or directory so we are at fsp so we need to move into the back end all right and now let's try this one more time item manage py make migrations and origin localhost in course allowed should not have path so let's move to the settings and remove the Slash and let's try this one more time okay and then python manage py migrate perfect and let's run the development server now as you can see we have a confirmation that the Django has been installed successfully if we go to the Django Administration we should be able to log in and there we go but we have an page not found while accessing the API route and this is because we didn't include our URLs defined in the core API folder um in the main URLs py file so let's do this going to write path set it as API and then here we need to bring in include and we want to include the core API urls let's save this let's reload the page and over here we have now the route to the posts and now we can decide whether we want to create the post from the Django Administration or from over here so I'm just going to write test post one test body one okay the other one I'm going to create from over here test post two test body 2. okay two objects two objects so next let's head over to the front end and over here let's create a NV file here I'm going to paste in the API URL so this is referring to our main API address okay so it's referring to this particular page okay and yeah let's save the NV file and let's head over to source and let's access app jsx let's remove everything from over here let's remove this count let's remove everything from here as well let's keep the use State and let's bring in the use effect hook all right so now in the use effect hook I'm going to try to retrieve the the API URL all right so I'm going to write console log and here let's write import meta then NV and we need to write write API URL let's see if this will work I'm going to save this okay let's go to the console and there we go so we have it two times and this is because the react strict mode is on so I'm going to comment it out let's reload the page and now we have it only one time so let's go back let's go to app.jsx and here I'm just going to paste some code or fetching the data and setting the data and we will see the result in the console and maybe let's write over here hello world so we won't see a blank page and yeah let's try this out so we see hello world let's reload the page and over here we have uh an error that there is a problem with the course policy no access control allowed origin although we installed Django course headers and the reason for this is that we actually didn't completely install the course headers package mainly we forgot about adding middleware so somewhere above the common middleware I'm going to add course headers and then Middle where and course middleware and now if I didn't make any spelling mistake this should work so I'm going to save this and we still have this issue I'm going to quit the development server and run it again and there we go here are our objects test post one and then we have test pose two perfect so I think we can finish this tutorial over here this was an example how to integrate Django with react S2 separate apps connected by the rest framework API if you enjoyed this tutorial consider subscribing to the channel and I hope to see you guys in the next one

Channel: Pyplane

Views: 40,932

Keywords: how to connect django with react, django tutorial 2023, django react tutorial, django react js project, django reactjs tutorial, django react integration, integrating django rest framework with react front-end applications, django with react js, django with react frontend, web development, python django web development, react js with python backend, react js with python django, django rest framework, django rest framework tutorial, django cors headers

Id: eXrwF4LXF5c

Length: 19min 21sec (1161 seconds)

Published: Tue Aug 22 2023