Build a Django API with React.js Front-end

hello and welcome back to another django tutorial in this tutorial we develop a simple django rest api and then integrate react in a new django app building a simple front-end to consume the django api this project is for reference i don't go through every line of code but i give you a high-level overview of the project so that you can implement and explore further you will need nodejs installed and python of course check out my other tutorials if you need any support with that it's worth noting that there are many ways to develop with react and django all which can be situational so once we built a simple REST API with django we will go through the initial steps to consume the restful api weave react so here we are again in pycharm we're gonna create a new project and that's going to be a django project and we're gonna name that django api react and this is going to be a new virtual environment so now we're ready to start the project so part one is going to be really simple we're gonna build a simple REST API so we're going to install the Django rest framework build a new model configure the URLs and then also then configure the serial Isis okay so let's start with building a simple app we're going to build an app called events so once that app is created we can then now go into the events app and now we need to configure the model so nothing crazy here you can see that we've just basically imported models at the top here and then we created a new model we've called this events and here we just can have title and details so this is events as in wedding events and so on so go ahead and make migrations and then just do a migrate to commit that database and then go ahead and select the event folder and we need to now make a new file we're gonna call that Cyril Isis dot py developing a serialize allows our data from the database to then be serialized into for example Jason and then it can be consumed by others through our restful api so first of all we want to just import from the rest framework sterilizes now you notice that this is in red because we haven't actually imported or install the rest framework yet so we do that in a second and now we need to import from models the model events so that's what we've just developed in models events and now we utilize a new class this i called lead sterilizer so we need the information or we need to utilize the tools within the rest framework sterilizers till then serialize some data we define that through class meta so here then I define the model which is events we know that and then the data in the model is title in details so therefore these are the fields that I want to collect and serialize so before we forget we just need to install the Django rest framework so we go head over to the terminal again and I will just install that so you need to utilize pip install Django to Django rest framework in the notes there okay so that installed we just now head over to the settings of the main app and we just configure that with our new apps so first of all first off we need to define the events app that's our first app we built and also we need to incorporate the Django rest framework so that's the rest underscore framework so that's what we need to register in the settings file okay so all that's left now is to head over to the views we need to create an overview and then configure the URLs so we're just keeping it simple here in the view utilizing the list create API view which is a generic API view and through importing generics you can see here that we're using the events model and we're collecting all the information from that model so this is what we're going to need for this example is going to allow us to get and post information so that just leaves the URLs so we go over to the main app here API react and we just configure this first need that so we're just going to need include and then we're creating a URL pattern to connect to our new app events so we have path includes and then events dot URLs so now I make a new file in the events app called URLs py and then I create this new this new URL pattern so obviously I've imported the path and the views and then the path here is going to be event slash API and then obviously I hook that up to the view that we've just created so now we should be able to go to the webpage and access that at event slash API and here we have it so we can type in a new event should be able to post some information and if I now refresh yep so we can see the information now that's available if yours didn't work then by all means make sure that you've created a migration and you've migrated your database so next up is to install and get react working so let's now build a new app and we're going to put react within the app which is obviously going to be within our project so that's where reactors going to reside and reside in a new app that we're going to build so we're going to build this new app called react underscore front-end so we do that first so now we have a new project folder okay and now we need to be able to folder structure within this so this is the folder structure that we're looking for to build so you can see that we've got three folders inside the the new app SRC static and templates and you can see then the folders that we need within that so go ahead and develop this structure within the new app that we just built okay so now the folders are in place I can now just go into the new app and then we can initialize the environment using NPM ini T with Y switch so now that's initialized so we should have a new file up here in any second so now we have the package.json file so we need to go into here and we're just going to build a little bit of automation by adding a script underneath here in scripts so you can see in the example in the notes there what it's going to do it's going to develop some it's going to automate automate the task for us so that we can run the system okay so now we're going to install web pack so we let that install and then we go ahead and install Babel and then finally we were then pulling react okay so with that in place we're just still inside of the react front-end app we're going to create a new file for a battle and that's going to be a dot B ABL RC and then inside of there a little bit of script there we have it so that's all now setup and actually one more thing to do we just need to create a web pack config J's file so if we go back into and create a new file so that's when pack config yes this is going to be allowed enough to configure thee it's for configuring the babel loader so create a new file and we're going to need in there is some Model X brats okay okay so that's babble now setup and configured so now we have some of that configuration out the way let's step back now into Django so we're going to need to create a simple view which is going to send the user to a HTML page so that we can see the information so here we've just gone into the view on the react front-end app and we're importing render and we're just going to request the index.html file so from here we're going to go into the templates and just make a new template we're going to call this index.html just to match that up okay so here we can just add some really simple HTML so within the HTML file we set the the standard HTML template boilerplate and we've loaded static and we've created a new element here with the idea of API that's where the react will load the data and then we're just connecting to the front-end main dot JS file this main dot J's file is obviously going to be the output file foot for all of this if you go into the package again you can see here word we've developed this script here whereby we output in the in the front and the main dot jeaious that's going to be the last step was generating this file so next up we now need to configure the URLs so if we go back into the main app we just need to tell the URLs that this app has URLs or just forward URLs to this app so inside of here we just need to add a new path so the path that we're going to create is going to be the root directory and obviously we're including the react front-end URLs which we now need to build so once we've included that we can now go into the front-end and create a new URLs file now if you remember the view that we created earlier was just called indexed so inside of the URLs we're just going to create a simple path to that okay so now we've got the heavy work and how we're going to create a file it will be a react component that we're going to need to build for fetching and displaying information or the data from the API so in the SRC inside the reactor on an app we've got components folder that we built earlier so inside of here we're going to build a file and we're going to call that dot J s so inside of here then so within this script there are three components first of all we create a state which is simply an object that holds the data pending for it to be rendered so once you created a state we then need to fetch the data so here we're using component did mount and you can see where we're getting the data from in this case it's event slash API and then finally we just returned the data so here we're returning the title and the details okay so with that in place there's a few more things that we need to do so first of all we need to register this app we've not done that yet so if you head over into the settings file we then need to register the app inside the installed apps and then just happen to look at the code I found an error so if you go into the your know the the URLs I think it was nope the views inside of the view I created a incorrect name here I used the name of the app but it's the folder that I'm looking for so I changed this to front end this front end here correlates to in the templates so this is going to look for the templates folder front end and then the index file so we're going to need to make a entry point for web pack that's going to be in react front-end components and then so the SRC sorry folder and then index doc j s so in here we simply just reference the app that we just the file we've just created so import from app so import app from and then components app so that's this file here that we just created so that builds a link to that file and now we just need to run so if we go over to the terminal make sure you're inside of the react front-end app now we can run a npm run and then dev so that's all working ok so now we can just run the server and then head over and we should there we go so there's our detail has been outputted obviously we can format if we want to it's not very pretty but if you remember if we go into our API so that was forward slash events API you can see we've got two entries here that's what's being displayed now on the a page so that wraps up this introduction to some of the concepts of integrating react with Django restful api this type of project does leave a lot of questions open there's a lot of things I didn't explain in this project and we've moved freeze a code fairly quickly in this so if this would just give you a basis a base view now to explore and to expand you now have an application whereby you can extract information from the restful api of course there's lots of other aspects to the django api and we can now move on to authentication for example we could expand the react apps and integrate that further within the restful api of course there's lots of other steps now but hopefully you can take on board some of these steps if you're new to developing with django and of course react and integrating the two together

Channel: Very Academy

Views: 11,065

Keywords: django react, django, django tutorial, django rest api, django rest framework, django and react, django with react, django react tutorial

Id: xWEIwgeASNY

Length: 17min 32sec (1052 seconds)

Published: Sat May 02 2020