Add react to Django | Integrate Django with React | DJANGO + REACT integration Tutorial |

[Music] hey guys welcome back to my youtube channel my name is abhijeet and in this video we will be looking how we can add react to our django application so a lot of people have requested me to create an video which helps you to integrate react in your django application so i'm doing this i hope you will enjoy the video and if you haven't subscribed to my youtube channel my please do subscribe and let's start we start this video so i have created an entirely new django project and the name of the project is dj react and i haven't done anything yet so i can again reload the page so you can see so first of all we need to add the yak to our application and this should go in the base directory inside the base directory so for installing react we will use npx and for npx you need to store download node.js and if you haven't installed node.js you can download it from the website so let's create the um entirely fresh react blower plate so we will be using npx so we will write npx create react app and the name of the app will be front end you can name anything what you can want so i'm using front end so let's npx create the application the boiler plate of the application till then what we can do is we can go to in our settings directory and we can add the template directory which we will be using to render our react application so as we know react uses single index.html and just manipulate dom to zendata ui so we will use that particular index.html for and we need to give part to that directory into the template directory so the path and the directory name will be uh first of all we need to import os and i have already imported the os so we will write os dot path dot join os dot path dot join and it will be base directory and the name of the project is our front end so it will definitely lie in the front end so we will write the name of the project front end and in front end there is a build folder inside build folder there will be a index.html file we need to point that index dot html to this one so let's again create an use dot py inside the root folder of our chango application and we have to import render from django dot short cuts import render we are going to import render from here and let's create a func function uh index name index that will just written the index.html file okay that will take in text and it will just return index.html let's remove the underscore from here so again let's go to our urls.py and just import the function which we have mentioned in our views.py so from dot views let's import the function name index i think we have named index i think so that's the name of the function is index let's again just create an empty route for this if someone goes to this one that will call index function so i think uh we have to wait for the npx to create an application react application so ah the react boilerplate is now ready let's see doing cd into the project okay uh cd front end and we have got these files let's run run command npm run build so that we can get the file which we want so npm run build so the our build directory is now ready and we will get a index.html file over here which we have connected through the directory path over here os.path.join based directory with front end slash build and we are rendering the index.html which will be inside the this one this file and react is just creating the index.html let's wait and we have got the index.html file again uh we have to just send the static file which will the which react generate react generate all the javascript and react files in this folder so we need to written those as well so for this we need to create an static file list so we can create static static under static files underscore the irs dials and again we have to just os dot path dot join again with the we have to inco im impo we have to join the base directory with this directory so content slash build slash static so all the static files decide in this folder and these are the static files which are being generated by the react application so let's again run our server python manage dot py run server so let's again reload our page and we have successfully integrated uh the react to our django application let's again do some changes over here and the changes which have which we are which we have we are going to do is will reflect it over here so again go to the let's remove the boilerplate code hello from codekeen please subscribe okay let's again run the npm run build command and that will definitely make some changes over here let's again wait for the second some seconds so again reload uh the page so as you can see the changes are being reflected over here and the static files are sent to by the django server as you can see so this is a short video for this how you can add react to a django application so if you like the video don't forget to subscribe and please do like this video okay

Channel: Code Keen

Views: 30,617

Keywords: Django, Python, web, development, web development, django tutorial, Vue.js, Javascript, react js, djangoreact, react, python django, python, python tutorial, python for beginners, python programming, django project, reactify, reactify django, code keen

Id: w8SQ8beafiQ

Length: 7min 54sec (474 seconds)

Published: Mon Apr 19 2021