Django & ReactJS Full Stack Course [ Python Backend React Frontend ]

hi friends i am parwaze and in this course we are going to learn that how you can use django with trackjs so in this video we are going to learn that how you can build your rest api in django rest framework and after that how you can connect your django backend with the react.js frontend now this will be just a simple application that we have a login system registration system and also basically crowd operations on the articles so for example in here i can register a new user in here so let me just add a new user five and i can just add a password and click on the register so after registration it will be redirected to the articles section now let me just we have a logout so let me just log out and now i can just add my new uh created user uh with the password in here and i can log in so now in the login you can see that i have articles i can insert a new article in here so let me just add my new article [Music] also my new article added and you can just simply add a description add a description in here and if i click on insert article so you can see that we have our article in here now if i refresh the page and you can see i have this article in here now if you see django backend if you click on the users uh we have the nav user so you can see that this this is the new user five and in here we are going to use a token based authentication and if you see in the tokens we have the any token for the user and now uh we can update our article so let me just click on the update and in here we can just say update it so update it and also we can just say update it and if i click on update article now you can see that it is updated also i can delete the article now the article is deleted and also i can just log out from here now this will be not a complex project and it will be just as simple and this co there will be three parts in this course so in the um in the first part uh we want to just build our uh back in dpi using django rest framework and after that we will learn about react.js and also react hooks and at the third part we want to do our integration of our django uh with the react.js front and django backend with the react js frontend also this courses more than seven hours training course and also if you want to skip any part i have come i have added a completely uh table of content and also with the time timestamp so for example if you want to just to skip any part you can just find your uh choosing part in the table of content of the of this video so you can just check the video description for the table of content so now let's get start uh our course all right guys now we're going to create our first django project and we want to build our back-end api so now the first thing is that you need to install django so as i have already created my project in here and you can see that i'm using virtual environment and right now uh we don't have uh django in our site packages so now if you see documentation of django so how to install django uh if you come down uh now you can use pep and a style django for the dragon installation so let me just uh copy this and in here uh let me just paste this so pip install django and after that you need to hit enter okay now i'm waiting for installation of the django uh all right guys now django it's installation has been completed and you can see that we have django 3.1 now after a django installation what we want to do to install a django rest framework so djangoors framework is as a powerful and flexible toolkit for building web apis because we want to create our backend api in django so for that we need to use django rest framework so now uh you need to install this uh we can if we come down so you can see we can use pep install django rest framework so i'm going to just copy this and so in here i want to just install pep install django rest framework so you can see that now we have django 3.1 in here in our site packages now we are waiting for the django framework installation okay now django rest framework has been installed and we have the latest version of django rest framework it's 3.1 now we have django and also django rest framework now it's time to create our first project in django so now uh and here you can use so let me just show you the documentation for the creating a project in django so you can see that we can use django at main and after that start project and at the end you need to give the name of your project whatever the project is you need to give the name of the project so now let me just show you so we can use django at main safford after that start project start project and now you need to give the name of the project so for example i'm going to give it api project and after that hit enter so now our project is created now let me just check uh okay now we have api project and you can see that i have some files in here so init.pi settings dot by url start by i will talk about these uh files now first what i want to do is to run our project now uh i'm going to just change my directory to epi project and after that i'm going to use python so you can see we have manage.pi so it's a command line utility and we can use python manage dot pi run server now i'm waiting for this now you can see that we have a development server uh and this in port 8000 so if i check this now let me just go to localhost port 8000 and you can see that we have django installed in here and you can see that we are using django 3.1 and at the time of recording this video that's the latest version so now uh let me just do some configuration on my pycharm id so right now if you see uh we have used python manage.pi run server for running our development server now i want to uh configure this with the python id that i can do this using the run button of pi chart now what i want to do is so let me just close this terminate the server and now if i refresh the project you can see that we are not seeing anything now what i want to do is to click on the add configuration and after that click on the python now in here we need to just find our project and from that we can use manage.pi and in here we need to just use run server and we can apply and click on the okay now if i open my manage.pi now let me just run this so you can see that now we have our project in here let me just close this now you can run from here and this is our project let me refresh my page and this is the project all right guys now let's talk about these files so we have some files in our project in our django project we have in it dot pi as you dot pi settings dot pi urls wsgi db dot sqlite 3 and also manage.pi now if you see django documentation so let me just come down so you can see that these are our project structure so now this is our root directory so our main project so this is the api project and in the main api project we have manage.pi now the manage.pi is a common line utility if you see in here a common line utility that lets you interact with this django project in various ways as you have already uh saw that we have used python managed by run server so it's a common line utility for interacting with our this django project now after that we have our init.pi so if you see we have in a dot y so this is an mpt file and it's not related to django it's related to python and you can see that an empty file that tells python that this directory should be considered a python package after that we have settings.pi now this is one of the important file and it is the configuration for this django project and if i open settings.pi we will talk about this a lot and so if i come down you can see that we have different things in here uh now the important point is the installed apps so these are the installed apps that we have in our django project and it's installed by default we have middlewares and we have our templates now in here we can add if you're using for example django as a full stack for example back in and front and in django then you can create templates and you can add the directory uh the path of the templates in here and also you can see that this is a database and if you see we have db.sequel i3 and it's created by default and by default the database engine is uh the database engine is uh sqlite3 and it's used by default by django project now if you open this db.sqlite3 now let me just open this in the sqlite studio so at database and from here we can just find our youtube project so youtube tutorial and we can just go to api project and db.collight3 and if i click on this so right now you can see that our database is empty what we want to do is to make migrations and create some default uh tables for our django project like at main art and these files so now what i want to do is to let me just do that okay now in here what i want to do is to change my project to api project to the django project and after that what i want to do is to say python manage dot by migrate so now you can see that we have these uh migrations now if you refresh your tables now let me just refresh this uh i have a refreshing refresh whole database schema you can see that now i have 10 tables in here so you can see art group out group permissions or permissions users now these are created by default by django so now the another file is for example it's a urls.pi and let me just remove this we will talk about this urls.buy more but right now uh so if you see django documentation now the url declare declarations for this project for this jank project uh so it's a url the declaration for our this django project and right now you can see that we have just that meaning here now if i go to the add main so you can see that this is the django administration panel right now we haven't created our super user but we will talk about this so just keep in mind that this is for the url configuration for the django project and also there are some more files we have as g dot pi so it's an entry point for sg compatible web services to serve your project and also we have wsgi dot bytes and entry pine for wsgi compatible web servers so like this you can create your first project in django so you have learned that how you can create your first project in django now we're going to create our first step in django and also we're going to talk about django administration panel now first of all uh if you see django documentation so creating apps so now each application you write in django consists of python package that follows a certain convention now django comes with a utility that automatically generates the basic directory structure of an app so you can focus on writing code rather than creating directories now what are difference between projects and also apps so we have created our project now now we want to create our apps now the difference is this that uh a project and uh so an app is a web application that does something uh for example a web block system a database of public records or a small pool app now a project is a collection of configuration and apps for a particular website now a project can contain multiple apps and an apps can be in multiple project now let me just give you an example for example you're going you're going to create a blog app in django now for example uh you have a separate page for contact uh for example contact as or about as or for example if you have a form now uh you can create uh different apps uh separate apps for these pages for example you can create an app for the contact as or you can create uh mana for the uh pop out as so like this you can use and you can see that it's telling that a project can contain multiple apps uh you can create one app to app uh fifa or thin up uh whatever you want uh it's according to your requirements now so creating of app is easy so we can use python manage.pi after that start up and you you need to give your app name so now let's just create our first app in django so i'm going to just say python manage dot pi and start app so i want to call my app api so let me just call it api because i want to create my build my api in django so i'm going to call it api and after that hit enter now our epi app is created now if you check so you can see this is api and we have some files in here we have migrations files so it's related to the database stuff and we have an init dot by so it's a npd file uh from python and we have admin dot pi now this is the place that you can register your models so right now we haven't learned about the models that what our models and how you can create models so now this is the place that you can add for example let me just tell you that you can add your database tables you can register your database tables in here after that we have dot pi uh so it's the configuration for our uh uh this app that we have created and we have models.pi now the models.pi file now this is the file that we are going to create our database tables or we can say database models for example if you want to create a student table uh you can just create a student table in here so we will talk about this in the later part of the videos so we have test start by it's used for testing of the web application and we have views dot pi now the views dot pi is also one of the important files because in here you need to create your view functions uh we'll talk about this in a minute so now so this was our app and what we want to do is now that right now if you see uh if we go to localhost at main you can see that we have a django administration panel now we need to create an an administration panel uh basically a username and password that we can access that main panel of django so what we want to do is in here now if you see documentation of django so for the django main site so one of the most powerful parts of the django is the automatic admin info interface now it reads metadata from your models to provide a quick model-centric interface where trusted users can manage content on your site so that means recommended use is limited to an organization internal management tools and it's not intended for building your entire front end around now let's create this so uh if you seen here so now let me just show you that how you can do this so let me just clear buffer okay now i want to use python manage dot pi and after that you can use create super user hit enter now the first thing is that you need to add the username so for the username let me just give it my name and after that you can add an email address whatever you want you can just add it and now you need to add your password so let me just add password my name and you need to make it again so the password is too similar uh similar to the username so i don't mind because it's not it's just a development so i'm going to just say yes okay now our super users created now if i go to the so this is my main panel so you can just say at main and you will see the set main panel now i want to add my username and also i want to add my password and click on the login so now you can see that we have our django administration panel now if you go to the so you can see that we have this users that we have already created and it is a super user if you click on this user uh you can see that uh you can update this user user for example you can add first name last name so this is the email address and the permissions it's active and it says super user so uh like this you can create your app and also you can work with django administration panel alright guys now up in this part we want to talk about the views functions and also creating urls and mapping the view function into the urls now if you see in here so we have our django project and right now this page is by default by django so we want to change this now uh if you seen our uh epi uh app uh we have views.pi so this is our views.pi so let me just close these files and also in our api project we have a urls.buy so this is the main urls.pi for the project and we have uh we have already learned that how we can use it meaning here now first what we want to do is to create a view function in here uh so you can use so a view function you can just use uh python functions so we can just say for example diff index index and after that you can give the request now in here you can do whatever you want for example you can render a template now uh for the proposal of this course uh we're not using django as a frontend uh we are going to just use django's backing so if you if you're using django's or front end you can just render the template in here so for example you can just say return render and in here you can add request and you can render your template in here for example index.html but we're not going to render any templates in here because we want to use django as a back end so what i want to do is in here uh to map my url i'm going to just import http response so so http response and in here i want to just say http response and let me just say it is working okay now we have created our view function now if i refresh my page you can see that nothing happens because we need to map this view function to the urls now we have a urls.bind here you can do it in here there is no problem uh you can just map this in here now let me just show you that how you can do it in here so there are two ways that you can do this okay now in here what i want to do is to import my this index from the api app so what i want to do is to save from api dot views i want to import index and in here let me just create a new path so it should be index and this is index okay now if i refresh my django project so you can see that it's working and this is the view function that we have created in here so it's working now this was the first way uh the second way is uh now it's a recommended way that you can just create a urls.pi file in your api app so i'm going to just call it urls dot pi and we need to include this urls.buy in our main project urls so instead of doing this what i want to do is to include this let me just remove this and here i want to import include so now i can and here i can say path and this is our index and i want to include from my api app so api i want to include dot urls so api dot urls so now let me just copy this and bring this so now this is my api project urls now this is the urls.pi that is located in my api app so in here let me just remove this at main and remove this include so i don't need this included in here and in here so for example let me just make it index and what i want to do is to import this index from my views.y so i can say that from dot views it means that from the current directory views file i want to import the index and in here we can say index so now if i refresh this you can see that the result is the same now so these stuffs are related to django we will change this in the further part of the video because when we're going to build our apis we will use django rest framework routers in here now we want to learn that how you can create models in django so if you see django documentation now a model is the single definitive source of information about your data it contains the essential fields and behaviors of the data you are storing and generally each model maps to a single database table now we can say that our model is nothing but it is just a database table now you can see that each model is a python class that subclasses or extends django.db.models.model and also each attribute of the model represents a database field so now if you see there is an example in here uh so you can see that we have a class person it means that we are telling django that create a table at name of person in our database and you can see that it's extending from models.model now we want to tell django that this table or we can say model person there are two fields for this we have a first name so now we are using models dot character field now it should be character field now there are different field options that you can use and the max length is 30. and also last name it's also a car field and the max length is 30. now we are going to tell django that create a table at name of person now we want the fields of first name and also last name for the person table now there is also another field that is id now the ideas are to increment it you don't need to add id in here so for right now for example in the class person we have three fields uh so we have id first name and also last name now if you see for the model field reference and django documentation so we have different field options so you can see that right now we have used this in here it's used for example max lint and it's 30 but there are different uh field options that you can use for example blank choices and if i come down uh so so you can see that if you see that django documentation it's a complete documentation and we have so you can see we have default uh editable error message primary key unique and validators and you can see that these are the field types we have auto field back out field back interior field binary field boolean and you can see that it's a used character field and you can see it's a string field for small to large sized strings so there are different fields that you can use in here okay now let's create our model so if you see in here we have a models.pi file now this is the place that you can create your models so i'm going to create a class article we will use this class article model for our building our backend api so now this is just a simple model where we have now we need to first extends from model.model and we want to create two fields so the first one is title it is models models dot chart field or car field and we can add maxlin for example hundred and also we want to create a description in here so this encryption and uh we can add so this should be a models.txt field so like this so we have a class article it means that we are going to create a article table in our database in our db dot sqlite 3 so for right now you can see that we don't have this table in here and in this section uh so for this we have a field of title and also we have a field of description now the idea is how to increment it so after creating of the model what you want to do is to do migrations and also migrate your project so for right now if i do you will uh so first let me just do this so after creating of the model first you need to do python uh so first let me just clear this and so we can say python manage dot pi make my orations so you can see that we are receiving no change detected even though we have added a models in here now it's because when you create your app you need to add your app name in the settings.pipe so we need to open our settings.pi and after that in the installed apps we can add our api like this now if i do uh so let me just do python manage.pi make migrations now if i run this so you can see that it's telling that create model article now it's created a file of this file initial dot pi now if i check my migrations in here so you can see that i have this file in here now if i open this file uh you can see that we have a table of article and these are the fields and the id is autofilled and it's auto created and also its primary key and if you see for the title we have a title and also we have description as we have already specified this in our article model now we have created this file after this you need to migrate this so using migrate you can push or you can add these this table with these fields in your sqlite database so we can just say python manage dot phi migrate and you can see applying api and now if i check my refresh my this sqlite database now let me just refresh this table so you can see that i have api article in here so id title and description right now there is no data in here [Music] okay now what i want to do is to add my disk table article table in my admin panel or administration panel now if you see in here i have a net main and i have this is my admin so i want to register my this model in here so if you have remembered if you have remember uh i have admin dot pi and this is the place that you can register your models now i want to register my this article model in here so first you need to import so from dot models import article now there are two ways that you can do this so the first way is the easiest way that you can just say at main dot site dot register and you can add your article in here so now if i check my main panel so we have articles in here and you can see that we have now we can add article so let me just say this is article and this is this encryption and if i save this you can see that we have right now you can see that we are not seeing uh it's we are seeing article object now if you want to see the string of the data so in your models dot by you need to add def str and we can just return self dot title now if i refresh this you can see that now this is article so this was the first way now if you want to customize your main panel then uh you can use another way so you can create a class in here and you can use uh decorators for that so now let me show you the second way and here we can just create a class and we can call it for example article model and we can add at main dot model admin and in here what i want to do is to register so i can say admin dot register and we want to register our article model and and here i want to just so uh now you can add your filters for example i want to just add list filter and i want to make it according to the if you see my models dot by we have titan and our title and description so we can say title description so now if i refresh my admin panel so you can see in here we have filters so by title and also by description and you can add for example list display so so title and description let me just copy this and bring it in here and so now you can see we have title and description in here uh so there are different uh things that you can do for example date hierarchy you can if you have did you can do it like according to the date and also you can do it according to the ordering if uh you can use also this so like this you can work with the django models and we will use this model for our and also we will create a serializer for this model in the next video in this part we are going to talk about serialization now before sending the data up to the client or front end we need to do serialization on our data or models now if you see the documentation of a django rest framework serializers allow complex data such as curious sets and model instances to be converted to native python data types that can be that can then be easily rendered into json or xml now if you see so this was the api guide now if you see the serialization in here uh we have already installed our django rest framework and also we have our now after installation what you need to do is to add the rest framework in your installed app so we need to just copy this so let me just copy this and we need to open our settings.pi and an installed app so you can see that we have our api also we can add our uh rest framework so like this okay so after installation and after adding our rest framework to the installed apps if you come down we need to create a model so we have already created our model and you can see in here we have a simple model a class article model that we have a title and also description as a field now we want to create serializer for our this article model so after that now now we need to after creating of the model we need to create our serializer class now you can see that the first thing we need to get started on our web api is to provide a way of serializing and deserializing the model instances into representations such as json so we can do this by declaring serializers that work very similar to django forms now if you're familiar with the django forms so we have form and also we have moral form now the serializer is the same concept so you can see that they have an example in here so they have the model uh that is a snippet model and they have a serializer class that is a snippet serializer now you can see that in here we have serializers dot serializer now there are different type of serializers that you can use we have serializer we have model serializer we have hyperlink serializer and we will learn about the serializer so first we will talk about the serializer now when you're using the serializer so you need to add your fields your all fields from the models in here so uh now if you see the dog the epi guide in here so let me just come down so you can see that the serializers and rest framework work very similar to django form and model form so we provide serializer class which gives you a powerful generic way to control the output of your responses now as well as a model serializer class which provides a useful shortcut for creating serializers that deal with model instances and key resets now if you're familiar with the django we have forum and we have model for now when you're going to create your form you need to specify all the fields that you have in your model now if you're using model form you can just specify the uh fields uh you don't need to add the for example the type of the field in here now it has the same concept we have serializer and we have model serializer so right now we are going to talk about about the serializer now if you see in here now you can see that it's a snippet serializer and right now we're using serializer and if you see the model in here so we have these fields for the snippet model and and here you can see in the snippet serializer we are specifying all the fields in here like this and also these are the methods so create method and also update method in here so if you come down and if you see we have model serializer and and you can see that in here we don't need to specify all the field types uh in here so we can just say fields and we can add id title and these uh information in here now let's first just use uh the the serializer and i want to we will learn that uh from scratch scratch that how we can use this so now what i want to do is to create a new file python file in my epi app and i'm going to call it serializers so serializers now in here what i want to do is to first we need to import our serializer from the rest framework so we can just say from rest framework import serializers also we need to import our model because we want to serialize our this article model so we can just say from dot models import article now we need to create our class article serializer so i'm going to just call it article serializer and in here you need to specify the type of the serializer that you want to use so we are going to use serializer so you can see we have also model serializer but we are going to use serializer now as i have already said that when you are using serializer you need to specify the model type that you have so we have title and description let me just copy this and paste it in here so now instead of models we need to use serializers so serializers and also serializers now for the text field we don't have anything in the serializer class so we need to change this to character field like this so you can add a maxlent if you want you can just for example add a max length of 400 or whatever you want so this is our serializer class now we need to create our some methods so we want to create and return a new article instance given the validated data so in here we need to just use create so for creating of the article and you can see it's using validated data and in here we can just return article dot objects dot objects dot create so because we want to create the article and we are going to use the validated data and also you can use update so using the update method we can update and return an existing article instance giving the validated data so we can just say diff update so diff update and in here we can add our uh so let me just copy this or we can just say instance dot title we have validated data dot get and we can add title and also instance dot title so we are going to just copy this and we want to do the same for the uh description so this should be description uh description and also description so sorry in a standstill description so now we have created our serializer class so so it's instant start description so dot and we can just add description in here okay now we've created our serializers.pi file now we want to do some operations and we want to serialize our data okay now i'm going to open my terminal so let me just uh or we can just say make this window because i want it should be bigger so now the first thing is that we need to uh import so from api dot models we are going to import our article model so article from oh sorry if we need to change our directory so let me just clear before so cd api project and now we can say from epi dot models we are going to import article from this oh sorry we need to just uh open our django shell so i'm doing this in the patch arm and terminal so we need to just say python manage dot pi shell and now we can do our works in the shell so we can just say from api dot models we want to import article and after that from epi dot serializer we are going to import our article serializer so article serializer so now from from this serializers file we want to import article serializer class now let me just hit enter oh no module analyzer why i'm receiving this error uh oh it's serializer so i have made a mistake again so it is serializers and we can just say we can give it okay now we have imported our article model and also article serializer also we need to import so from rest framework so from rest framework dot renderers we want to import json renderers so json renderer so from rest framework dot renderers we are going to import json renderer and also we need to import parsers so from rest framework dot par source we want to import a json parser so json parser so from rest framework dot parsers we want to import json parsers so now these are the ports now what we want to do is to create an article so we can just say article and we need to give a title for the article so we can just say article title and also we want to create a description so this uh cryption and we can say this is a description so this creption okay now after doing this we need to save our article so a dot save and if i see my localhost at main if i log in and in the articles so we can see the second article in here so this is article it's uh that we have created so now this is the article title okay so now we can use our article serializer to serialize our data so we have an article serializer in here now what we want to do is to create a serializer so serializer and we can say article serializer and after that we can add our article in here and now if you see serializer dot data so you can see we have title and also description now at this point we have translated the article model in a stands into python native data types that's uh we can say that this dictionary now to finalize the serialization process we render the data into json so now what you want to do is to create json in here and we can just say json parser json renderers not parser so json renderer and we can say dot render and in here you need to add your serializer.data so serializer dot data now if we see json so now you can see that it is converted to the json now also you can do deserialize your data so the serializing is similar uh it's uh similar to the serialization so first we parse the stream into python native data type so we can just say for example import so we can say import io and in here uh what we want to do is to create a stream in here so stream and we can say io dot bytes io and we can add our json in here so our serialized data and after that we can just create a data and we can say json parser so power server dot parse and we want to parse our stream so stream after that we restore those native data types into a dictionary of validated data so in here we can just say serializer and article cydia lyser we can add data data and now we can if we see serializer dot is valid so we're receiving through and now we can say serializer dot validated data so you can see that it is converted to uh order dictionary of python so like this you can work with the simple serializations we will talk model serializer model serializer in the next video all right guys now let's talk about the model serializer so we have saw that how you can use serializer and this time we are going to use model serializer now if you see our serializer.pi file and here we are duplicating the code we are reusing the code now it's not a good idea if you see in here we have for example titles serializers dot chart field or car field uh we have in here we have in here and if you see our models dot pi we have the same field in here now if you see the documentation of uh django it's telling that it would be nice if we could keep our code a bit more concise now in the same way that django provides form classes and also model form classes as i've already mentioned rest framework includes both serializer class and also model serializer classes now we have saw the serializer in here this realizer example now we will take a look at the model serializer example so now there is an example in the rest documentation so the oven snapped serializer and you can see this time and here it's using model serializer now when you're using model serializer you can just create a class meta and in here you want to add your model so for which model you want to create serializer so in here it's using a snippet model and also you need to specify that what fields you want to do serialization for example in here it is id title code and these uh informations now if you see the api section api guide in the model serializer now it's telling that the model serializer serializer class is the same as regular serializer class except that it will automatically generate a set of fields for you based on the model so as we have these fields based on our models like this and also it will automatically generate validators for the serializer so there are some validators that are created automatically by model serializer for example unique together validators and also it includes simple default implementation of dot create and dot update so it is by default it is created now if you see in our uh serializer in here we have added our these two methods but in model serializers we don't need to do this so now let's create our model serializer now what i want to do is i want to remove this because i don't need these fields in here so let me just remove this and this time instead of serializer i want to use model serializer after that we need to specify our class now our inner class so it's classmate now we want to create our model so we want to say that based on this model serialize my data so i can just say my model is article and after that you need to specify the fields so which fields you want to do the serialization so for example we want id we want title so it is the fields there that we want to for example when we want to uh retrieve the api so these are the fields that we want so title and also description so description so now you can see that how simply we have created our model serializer and you don't need to add a bunch of stuff in here repeated stuffs so now let me just uh show you uh the representation of this uh what i want to do is to open my python django shell so python manage.pi shell and in here the first thing is that i need to import so from dot serializers so serializers we are going to import article serializers article serializer and now we can create our serializer so city analyzer and we can say article serializer and now we can print the representation of the serializer so serializer so you can see that this is the representation we have id title and also character field in here all right guys now we've created our serializer our model serializer now it's time to write some django views for our serializer so right now we're not going to talk about rest framework features uh we're going to just create some basic django views view functions that so we can get our all articles we can update the articles not using the api and also we can delete the articles so now uh let's just open our views.pi so this is our views dot by now this was an index that we have already created and then in our videos so let me just remove this because we don't need this now what i want to do is to create a simple uh function i'm going to just call it article list so article list and we need to pass requesting here so now we want to get our all articles so get all articles so now what we want to do is to first we want to check so if request dot method is get we want to get our our uh our article so what you need to do is to import so from dot models we want to import our article model now we can just say articles article dot objects dot all so we are going to get our all articles from the database and we want to store that in the articles variable now after that we need to serialize or the security set so we need to import our article serializer so if you see we have a model serializer in here so we need to import this so we can just say from dot serializers import article serializer we are we have added in the models not in the model we need to add this on our views dot so let me just close some files from here because i don't need so let me just add it in here so what i want to do is to say serializer so serializer and article serializer and here you need to add uh your articles so let me just added articles also because you can see that in here we have a curie set and uh we are going to serialize uh an object or a q reset so now what you want to do is to also add money to through so if you want to serialize the qris set uh you need to just add money to true and now we need to just return a json response so first let me just import this so from django.http we want to import json response and we can just say return json response and we want to response our serializer.data and also save to false so now if our request is so request dot method is post we can create a data and we need to create a json parser so we need to import this from django. so from rest framework dot parsers we want to import json parser so data and we can say json a parser dot parse and in here we need to add our request after this we need to create our serializer so let me just copy this serializer and paste it in here so we are we can just add data data and now we need to check so if serializer dot is valid we are going to save our serializer so serializer.save and we need to just return uh let me just copy this return a json response and this is serializer.data and we can add a status in here so we want to add 201 so it means 201 is created and if there was an error we can just return adjacent response and this time we want to say serializer.errors and this should be 400 okay now we have created our get and also post methods now let's open our urls.buy so this is my url so let me just uh so this time from dot views i'm going to import article list and i'm going to just say articles and we need to add our article less than here now let me just run this around my django api and if i go to localhost port 8000 and if i go to the articles so articles uh so page not found articles so let me just add this in here now let me just check this so you can see that we have our articles so id one uh this is the title description id2 and we have in here so now let me just hit this url uh using the postmatch so this is the postman and let me just paste it in here so now the method is gate get and now if i send so you can see that i have my data in here it and it's the 200 okay and these are the data that i have in here so now let me just post uh let me just create another one so this time i want to post because if you seen here in my views dot pi i have post also so uh i should post in here so now let me just copy this in here and paste it in here and i want to use post so let me just copy this data from here so one of the data and from here i can go to the body and row so row change this to json and let me just remove the id because it is auto created and i can just say new article title and this is a new description okay so now if i send this i should receive an error and i will tell that why so let me just send this you can see that we are receiving forbidden now if you see the documentation of uh django rest framework if you come down so note that because we want to be able to post to this view from clients that won't have a csrf token we need to mark the view as csrf exempt now this isn't something that you would normally want to do address framework and rest framework views actually use more sensible behavior than this so we need to add this in here so let me just copy this and i can just add it at the top and also we need to import this uh so where is it yeah i think this is so from django.views.decorators.csr if you want to import csrf exempt and paste it in here okay now this time i want to add data so i want to add my this data and let me just send this so you can see the 201 created and this is the message that we are receiving from here so if the serializer is valid we want to save that and we want to just return a json response of 220 status and so now we have our this the third data so you can see the id is third and if i get my this article you will see that i have a third id article in here so let me just get so one two and this is the third so new article title and this is new description all right guys now we've created our get and also post now we need to just uh do some functionality for for example updating the data or deleting the data or getting a specific article for example and here if i say for example article one so i should receive an article one in here so let's do that so i need to create a new view function so let me just first add at csrf exempt and i can just say that if article d tails we can add a request and also we need to add a primary key in here now we need to get our data according to the specific id or pk so we can just say article dot objects this time we're going to use get and pk pk and also we need to create an accept block in here so except article dot does not exist so if there is no article what i want to do is to return an http response and so i can give status to 404 [Music] now if request dot method is get what we want to do is to create our serializer so we can just say cydia lizer article serializer and we need to add our article object in here and we can just return and json response with the serializer.data so in the lff our request.method.s request.method is post put not post so put so it's for updating uh we need to just do the uh yeah we need to do the same as this like this let me just copy this and paste it in here i will bring some change so we are using jsonparser.parse and we need to create our serializer so this is article serializer and in here we need to add also our article and the data and if the serializer is valid we want to save that and we want to return the http response let me just remove this you can leave it in here or you can remove it there is no problem so let me just remove it from here okay now or we can just leave it in here so 400 for this and if it is request dot method is delete so we want to delete the article and also we can just return an http response with the status 204 it is no content okay now uh it's so we have created our view function so we have a git post we have for specific article and we have for update and also we have for delete now we can open our url urls.pi file and in here we need to add a new pot so i can just say articles so we can just import article details and we can add end pk okay now we are ready and if i check the first article so you can see that i am receiving the first article and if i see the third article i am receiving the third article in here now let's just do this in our postman so now this is good and so in here i want to so let me just do this in here and i want to get uh article 3 so you can see that i have article 3 in here and if i say article 2 i have article 2 in here so now let me just crea close this don't save and i want to create a new one so so now i can get the article now let's update the article so this time i want to use put like this and i want to change my the second article so i can just go to the body and the form data or we can see that all we are using and we want to use json and let me just copy this and paste it in here let me just remove the id because id is in here and we can say updated data and updated descriptions updated description now if i send so now you can see the second id is updated now if i get my articles and i should see the updated data in here so this is the first one and if i come down so you can see that this is the second id and the title is updated and also description is updated so we can delete uh so we want to delete our second article so this time i'm going to use delete and if i send so you can see that 204 no contents it means that the data is deleted and if i get this you can you will see that i don't have the second data in here so this is the first one and i don't have the second one so i have the third one directly so also you can do it in here so if you see the articles we have id 1 and we have id3 we don't have id 2. all right guys now in this part we're going to talk about the response objects status codes and also wrapping api views or how we can use api view decorators and function based views now in the response objects you can see that the rest framework also introduces a response object which is a type of template response that takes and renders content and uses content negotiation to determine the correct content type to return to the client also we have status quotes now using numeric http status codes in your views does not always make for obvious reading now if you see in here right now we are using numeric status code but we are going to change this so and it's easy to not notice if you get an error code run now rest framework provides more explicit identifiers for each status code such as for example http 400 page in the status module also we will learn that how you can add uh api view decreators so you can see the rest rest framework provides two wrappers you can use to write api views we have the cpi views decorator for working with the function based views and also the the cpi view it's for class that when you're going to work with the class-based view so we'll use this because we have a function based api views in here and also one of the good thing about using this api view decorator is this that we can access the browseable api view of the django rest framework so if i come down uh in the browseability now having a browser a web browsable api is a huge usability way and makes developing and using your api much easier it's also dramatically lower lowers the barrier to entry for other developers now even though you're using postman but it's good to have some information about the django rest framework browsable api so now let's bring change to our code so this is our views dot pi and so i'm going to remove this because now i don't need to this so we need to just remove this and even you can remove the import from here now what i want to do is to from rest framework so from rest framework dot decorators i want to import api view and in here i can say api view and and the methods are get and also post now also we need to bring change to our uh this code because this time we are using not using json response we are using response so we need to import this we are going to from rest framework [Music] dot response so we want to import response and why we have error in here okay so because we have removed this let me just remove also this okay now what we want to do is so if the request to admit to the skate we are going to get all the articles or objects and we want to add our data to the article serializer and after that we want to return response and we are going to just use serializer.data and let me remove this and in the post we also need to bring some change this time i don't need this json parser so we have our serializer and this is our article now this time we're going to get the data from the request so request dot data and if serializer is valid we want to save that and we want to just return response serializer.data and now we need to change this so first we need to import from rest framework import status and this is status 201 so we can use the status dot status 201 created and if there was an error we also want to return response and this time it is status dot 400 batch request okay now let me just check this that how it's working so now this is my articles now if i okay now you can see that we have a browsable api so from the django rest framework you can see we can post and we can get and these are the articles that we have and uh so for example you want to post a data in here now let me just copy this and paste it in here so that we want to use application json and let me remove the id because it's how to create it and we can say from browse able from browseable api and you can add my description for example whatever you want you can just add it and we can post this so you can see the id4 is added and if i get it and we have our data in here and you can see that this is our id4 that we have in here now let's bring change to our rest of the methods so let me just copy this and in here let me just add it in this section so this time we are getting the articles and we want to return and here let me just return response and we can say for the status of status.404 not found and if this is git we can add our article serializer and we need to just return response uh the serializer.data and this is the put so we are going to just remove this and we want to just get our data from the request.data and we are checking if it's valid we want to save it and we want to return response and also response so it should be status dot 400 but request and the last one is delete and you can just say response and this is our status dot 201 or 204 no content okay now it is completed so if i check my browsable api [Music] so and for example if i go to the first article so i have but i'm not seeing uh okay so we have made a mistake so this is get put and also delete delete and now so you can see that now i have deleting here and also i have put now if i go to the articles so i have just post in here now if i go to the first article you can see that i have put and also delete so first let me just update the first data so we can just add it in here so id is one and i want to say updated and updated description so updated so if i put you can see that this is updated if i get my data so let me just go to the articles so you can see that the first one is updated and you can delete for example i want to delete the first one so i can just click on delete and delete so it's deleted you can see that 200 for no content and if i go to the articles i don't have the first one i have third and also fourth one okay we have saw that how you can use function based api views in django rest framework now it's time to talk about class-based api views now if you see django documentation django rest framework it's telling that we can also write our api views using class-based views rather than function based views as you will see this is a powerful pattern that allows us to reuse common functionality and help us keep our code dry it means don't repeat yourself now if you see our function based api view so that we have already created and this is so what i want to do is to just comment out this because i will use some code from this part okay now i want to create first i need to import so from here i can let me remove this comment so i can say from rest framework uh dot decorators we are going to import api view now we can create our class so we can just say class article list and now we can extend from the api view such simple now we need to use our methods in here so we have get method and post method port methods in our this class based view now i can say diff get so first i want to get my all articles and also i want to post some articles using my api so i can say request in here now let's copy some code from our previous part so now if request dot minute is get now we can just copy this code and bring this in here so we can get our all articles and after that we can serialize that and we return a response of our data so this was for the get and now we can use post post so devpost and we can say request and let's copy our code so this is the code and we are going to paste it in here so we have our serializer in here we want to serialize our data and after that we're going to check that if the serializer is valid we want to save that and after that we are going to return a response in here that is 201 it means that the article is created or posted and if there was any error or if our serializer is not valid we can just return a serializer.errors in here with the 400 path request so now so we have done this now let's check this before adding our all methods so now what i want to do is to open my urls.pi so let me just bring this in here because we are not using this now we need to import our article list and we are going to comment out these two so this is articles and this time we are going to use article list dot as view so dot as view because we are using classes so we need to add as a view in here so now let's check this and okay now it's reloading so now if i refresh my page you can see that i am receiving the same result and this time we have used a class-based api views now let's do this for our all methods that we have so we have port delete and also get this specific article let's create another class and i'm going to just call it class article details so we can extend from the api view so first we need to get our object or get our article so we can say get object so so it is diff not that so we can add self in here and also we need to pass the id uh now we can just use let me just come down so we're going to use this try and here let me copy and bring this in this section so we are going to get the article so this time we are going to use id id or we can add id in here so we are going to get our articles and if there was no article we are going to just return 404 not found and and here we need to just return this we don't need to save that so we need to return the article and now we can use get so diff get now we can add cell request and also id and let's copy our this code and paste it in here so this time we are going to use a self dot get object and we need to pass the id in here we serialize the data and also we don't need this in here and okay so we serialize the data and we return the response in here so this was for the get now let's do for the put so div put and we can add a request and also id we can simply copy our code so for the put from here and this is the pot and this time what we want to do is to first get the article so we can just copy over this code from here so let me just remove this okay now we have article so we have uh we want to serialize our data and we are checking the serializer and after that we can save that so this was for the put and the last one is diff delete so we can add request and also id so delete is also simple as we have done it already and we can just copy this what we want to do is to just bring this in here because we want to get the article and after that we are going to delete the article so this is our article details now we need to add this in the urls.pie and we can just add our pattern here so this time it's end id and we can add article details so now let's check our api let me refresh this so there is no problem it was the get now if i uh for example i want to get the third article or the uh yeah the third article so we have a type error and let me just check that where is the problem all right guys now the error is in here so i should add id is id so like this and uh so also this is not a problem uh we can just make it a single article because we want to get one article now the main problem was in here so id id and now let me just so get the third article now you can see we have our third article now you can we you can see that we have delete and also a port or update now i want to update this data i can copy this and bring it in here so i can remove the id and in here you can just add it for example updated title and updated description so updated description and i can put this so you can see that this is updated now if i get the article so you can see that this is updated now you can remove this so for example i want to remove this the third one i can just say delete delete you can see that 200 for no content and we can check this so we don't have the third data in here okay now let's test this api using the postman and so i can get the article i have just one article in here uh i can post the article so let me just post an article and let me just copy this in the body row and json so what i can say that this is the new data and you can see postman let me just say new description and i can send so you can see that the we have 201 created and this data is added if i get my data again so you can see that i have two articles you can see that this is the uh fourth id and this is the fifth adida id that i have added newly so also you can put so for example i want to put uh so i want to bring change to the the fifth article so this article and we can say updated postman updated postman updated description and if i send so you can see 200 okay and it has updated updated postman and updated description if i get my articles you can see that the fifth one is updated also you can delete so i want to delete the fifth one and i can just say delete and send this so 200 for no content and this is deleted and if i check you can see that i don't have the fifth id in here like this so like this you can work with the class-based api views in django rest framework all right guys now we're going to talk about the make sense if you see django rest framework documentation one of the big wins of using class-based views is that it allows us to easily compose reusable bits of behaviors now the create or retrieve update delete operations that we have been using so far are going to be pretty similar for any model back in dpi view we create so now those bits of common behavior are implemented in rest framework mixing classes now let me show you the example uh so you can see that they have an example in here and they are using maxsense so now let's change our code so this is our class article details and also class article list so what you want to do is to first import so from rest framework we are going to import generics and from rest framework we are going to import maxsense okay now what we want to do is to remove uh i want to remove all of these codes from here or or what i can do is let me just comment this because like this or we can remove it so no problem so let me just remove uh these two from here and this time what i want to do is to use make sense so i'm going to use generics dot generate api view generic api view so this is my api view that i'm using and after that you can use the make sense so there are different mixins for example for listing of our articles or for listing of our model objects we can use model mix and list model mixing so we can use make sense dot list model maxin and now let me just so after adding this mix in uh what you can do is to create your q reset so we can say q reset and this is article dot objects dot all and also we need to add the serializer class so it is article serializer so now this is our article list and this is just a simple we can just uh list our article so it's just used for listing our article and right now we cannot post now let me just check my browsable api okay now you can see uh so we're receiving method git is not allowed article list let me just check this okay this is because uh we have forgot to add the method now if you see the documentation for the django rest framework so after adding q reset and serializer for in here you need to get uh your you need to get your data so let me just remove this we don't need this now this method is used for getting of the all articles now let me check this again so now you can see that i have my one article in here so it was just for getting the getting of the article so now we want to use uh creating or posting data so for that we need to use another mixing so we can use make sense dot create model mixin so it is used for creating of the model and after that what we want to do is to post the data so we can just use solve request and i can return so dot create and in here we can add request so now let me just uh refresh my page okay now you can see that we have a form in here and it's because because we have used create model maxin and also post method in here now we can post in here uh let me just add mix and whatever you want to let me just say mix in add a title and makes an added description and now i can post so you can see the id is added and if i get you can see that now i have two id in here so this was for getting and also posting that hr now also there are uh for uh updating or deleting or getting a specific article also we can use now let me just remove these codes from here okay now okay i have removed all the codes uh now we can use uh retrieving our data and also updating detail and also deleting the data so for this let me first use generix dot generic api view and so the first mixin is for retrieving uh let's retrieve model mixin and after that another mixin that we want to use is update model mixin and the last one mixin is for deleting of the data so for this we can use mixens.delete or destroy model mixin so this is used for retrieving the specific model this is used for updating the models and this is used for deleting the model after that we need to create our q reset so we can use this q reset and also serializer class like this now we can use the get in here so this time so i want to use request and also id and we can just say return cell dot retrieve so we have a retrieve and we want to pass request and also id id now we can add our put so diff put and in here we can add request and also id so we can say return so dot update and we can add our request id id and the last method is diff delete so it's used for deleting uh we can add request id and we can just say return our self dot destroy so it's used for deleting the data and we can add our request and also id id so now our article details and also article list is completed now we want to check this so first we are going to use django as the framework browseable api so we can get the data and we can post the data and there is no problem we have already done this so if i want to get in a specific data for example the fourth data if i hit enter uh probably i should receive it or so now let me just run this you can see that i have received the errors because it's telling that article details to be called with the url keyword argument named pk now it's expecting pk primary key but we are adding id so what we want to do is to add a lookup field in here so in the section we can add a lookup field and we can say id now if i run this you can see that we are receiving our [Music] api data and we have delete we have update for example i want to update this we can just say update it uh my description update it and i can put so you can see that api updated api updated and i can delete this so now the data is deleted if i get the data you can see uh that i have just one data in here now let's do the add the functionalities uh using the postman we want to do so we can get the data so this is our data we have just one data in here we can post the data now let me just post the data in here and let me just copy one of uh copy this and i can just go to the body and from here row and change this to json so remove the id and we can just add new data and new description in here so new description and i can post this so you can see the id7 is added and if i see my data you can see that i have two articles in here so this is the first one the id six and this is the id seven now what we want to do is to update an article so first we want to just retrieve a specific article for example i want to retrieve the seven ones that i have created and if i send you can see so method not allowed okay because we are using post and i want to use port so now i want to name data app dated and if i send so you can see new data updated and if i check so you can see this is updated and if i get the specific article 7 and i should receive the 7 article in here you can see that out and also the title is updated now the last one is deleting and we want to delete the 7 data and i can send so 204 no content it means that the data is deleted or the article is deleted and if i get my all articles you can see that now i have just one article in here okay guys now we have learned that how you can use uh generic api views which makes sense now in this video we want to talk about view sets and routers now if you see the django rest framework documentation now rest framework includes an abstraction for dealing with view sets that allows the developer to concentrate on modeling the state and interactions of the api and leave the url construction to be handled automatically based on common conventions so now if you see uh the django api guide and it's telling djangous framework allows you to combine the logic for a set of related views in a single class called the viewset in other framework you may also find conceptually similar implementations name something like resources or controllers now let's create the example of the view set and routers and also we're going to talk about the routers so how you can use routers you can see that some web frameworks such as rails provide functionality for automatically determining how the urls for an application should be mapped to the logic that deals with handling and coming requests rest framework adds support for automatic url routing to django and provides you with a simple quick and consistent way of writing your review logic to set a set of urls now before this we have used uh so the default urls of the django and now we need to change this with the routers so first we will talk about the view sets and we want to create the example of the view sets in here so now let me just create an example okay now in here i'm going to just create a class uh i'm going to just call it class article view set and we need to import the view set so from rest framework we are going to import view sets and now our this class extends from view sets dot now there are different view sets that you can use the important one is model view set now we have view set we have model view set also we have generic view set so first let me just show you that how you can use view it but we will work with the model view set so i'm going to choose view setting here and now when you're going to use view set you need to specify all the crowd operations that you want to do so now if you see the documentation of uh django rest framework let me just come down you can see that you need to specify the last retrieve or for example if you came down uh we have uh retrieve update partial update and destroy now you need to specify these uh functionalities in your class now for example for listing we can just use diff list and we can add request in here so first we need to get our art all articles so we can say article dot objects all and after that we need to do uh we need to serialize the data so we can just say serializer article serializer and we can add our articles and also because it's security set we can add money to true and at the end we can just return a response we can say that serializer.data so this is for listing also you can create article so we can just say request and so we can just copy the serializer and let me just bring it in here and i want to remove this and this time we need to get the data from the request so request dot data and let's uh for now we need to check that if our serializer is valid what we want to do that if the serializer is valid we want to save that so serializer.save and also we can just return a response in here so uh serializer.data and we can add a status in here so status status dot 201 are created and if there was any error we can just copy and paste it in here so this time we want to say errors and we can just use uh 400 patch requests so dot 400 patch request okay now so we have created our so right now we are not going to uh we are not going to add update or deleting so also let me just add the retrieve method in here we can get a specific item so we can just say diff red reef so you can see if you see the documentation of django so this is for retrieving the data so you can let me just bring it in here so we can use cell request and also pk and now we can create a curious setting here so we can say query set article dot objects dot all and now we need to get one object so we can just first we need to import so from django dot shortcuts import get object or 404 so now we can say article get object or 404 we can add our q reset and pk pk primary key and now we need to add the serializer in here you need to just pass article and also we can just return the serializer.data so like this now we need to just uh use uh routers now as i have already showed you the documentation now there are two ways that you can map your this view set to the urls the first way is not recommended if you see the django documentation i think it's in in here so now you can see that if we need to we can bind this view set into two separate views like this but typically we wouldn't do this but would instead register the view set with the router and allow the url conf to be automatically generated so for this we are going to use default router now we are going to open our urls.pi and we don't need these in here and what we need to do is to import article view set and we can just comment this and we can comment because we are not going to use this and also from rest framework dot routers import default router so first what we need to uh to create a router in here so uh router and we can say default router and after that we need to register our router so we can say router dot register and in here we can add articles so we can add article view set because we are using view set dot view set so we need to add a base name in here so it is our t curls okay now after this what you need to do is to include that in your in your url pattern so first we need to just import include and in here we can just use path include and we can say router dot urls now we are ready i think uh yeah so let's check our articles okay now you can see that uh we have our api in here so you can create you can post and if i get for example a specific article uh i can retrieve that you can see but you can see that i cannot update or delete an article because i haven't added the functionality so i have just functionality for [Music] retrieving the data for creating and also listing the data so now let me just create a data in here and i can add a new data so let me just add it in this section let me just remove this and we can say this is added data this is added description and i can pause post so you can see we have id 8 this is added data and if i get you can see that i have now two id two data in here now let's add the functionality for deleting and also updating of our data so we can just add update so diff update if you see a django rest framework documentation so in here we can just come down and you can see that this is the update let me just copy this so we have cell request and also pk or primary key so first we need to get our object so we can say article article dot object [Music] objects dot get pk pk and after getting the object we need to serialize our data and basically we can just use these codes and we can bring it in here okay serializer article serializer and we need to add our article in here so article and if the serializer is valid we want to save that and we want to just return our serializer data with the 201 created and if there was an error we are going to just return our error with the 400 path request now let's add our destroy method so if you see we have destroying here let me just copy this and bring it in here so now first we need to get our article and after that we can just use article.delete and we can just return a json response so we can say return response with the status of a dot uh 200 for no content so now it's completed and we are going to test this so first we want to just use uh django rest framework browsable api so we can get the article and we can pause the article there is no problem problem if i see my h article so you can see that this is and you can see that now i have delete and also i have put or update first let me just update the data and let me just say update it this is updated and i can put and this is updated and i can delete this so you can see it is deleted and if i get to my data i don't have because it's not found and i have one data in here uh you can do the same functionality using the postman and let me just remove these records so we can get all the data no problem we can just get a specific data we can post so first let me just post a data in here so i can use post okay let me just copy this and i can go to the body and row so let me just remove this and we can say new title new description send so oh sorry because we need to change this to json and now i can send so you can see that new title and new description is added and if i get this data again you can see that i have two articles so now this is the newly added uh you can get the specific article for example i want to get the ninth and so you can do this in here so for example the ninth so you can see that this is the ninja card and we can update this let me just say put and i want to just update this so new title update it and now i can send so you can see this is updated also we can delete so i want to delete this record and i can just send so you can see 200 for no content and now the ninth one is deleted so if i so you can see not found and there is no record in the ninth id you can see that i have just one in here all right guys now let's talk about the generic view set so we have saw that how you can use view set and this is the example that we have already used so view sets dot view set now uh another type of view set is generic view set now you can see that the generic view set class uh inherits from generic api view and provides the default set of get object and git query set methods and other generic view base behavior but does not include any actions by default in order to use a generic view set class you will override the class and either mix in the required mixing classes or define the action implication explicitly so now you need when you're using a generic view set you need to specify the maxims now if you see there are different mixes that you can use for uh for example for listing the models you can use list model mix and we have create model mix in retrieve model mix and update and destroy model make sense now let's just use this okay now let me just create my example my new example so so this was from the previous part and now i don't need to this okay now we're going to just create a class we can use article view set and this time we're going to use view sets dot generic view set so now you need to first to specify the q reset so we can use the qre set and i can say article dot objects dot all and after that you need to specify the serializer class now it is article serializer all right now right now it's not functional because we have said that when you're using generic view set you need to specify the max sense that you want to use now if you see for example for listing the articles we have an article model uh we can use leicester model mixing and it provides our dot list method that list method that uh employ that implements listing accuracy now if the curiosity is populated this return at 200 okay response with a serialized representation of the q reset as the body of the response and the response data may up may optionally be paginated now so let's just use this in here i'm going to use make sense dot list model mixing so now we can check our article list so you can see that the result is the same but right now you can see that it's just uh just real listing and there's no more functionality like creating or updating or deleting so for that we need to use another mix sense and so for example for creating we can use create model mixin and it provides a create method that implements creating and saving a new model instance if an object is created this returns a 201 created response with a serialized representation of the object as the body of the response so now let's just use this create model mixin and and here i'm going to use maxsense.create model mixing okay now right now you can see that we don't have any functionality for creating of our model instance now if i refresh this you can see that now we have a form in here that we can add so now let me just add a new data in here so this is the new data and this is the new description and i can post so you can see that it returns 201 it means created and we have a new article in here now if i get the article you will see that i have two articles so this is the newly created now let's implement the rest of functionality for example for retrieving we can use maxsense dot retrieve model mixin so it is used for retrieving any specific article uh so for example if i want to access this this article so the id is 10 so i can say 10 and now you can see that i am receiving this article and the uh la also we can now we need to use make sense dot update model mixin so it's used for updating the data now for example uh if you want to update this you can see that now we have an update for input with the put button now we want to update this and we can just say update it update it and we can just put so this is updated and if we get our data so you can see that this is updated and the last one is uh an item so for that we need to use destroy model mixing so we can just say make sense dot destroy model mixing and now for example i want to remove uh so for example i want to remove this id so you can add died in here and you can see that we have delete and now i can delete this delete and 200 for no content and if we check our articles we have just one data in here so like this you can use a generic view set and django rest framework all right guys now we are going to talk about the model view set so we have saw the generic view set now i think uh our rest api is completed even though we haven't added uh authentication but we will do this in the later part of the video but for right now kindly it's completed and after adding this model view set up we are kindly completed so now if you see the django rest framework documentation the model views it class inherits from generic api view and includes implementation for various actions by mixing and the behavior of the various mixing classes now the actions provided by the model view set class are list retrieve create update partial update and also destroy so it's so simple and easy and you can see that we have done a lot of codes uh and here so these are all our codes now what we want to do is to just create our model view set and it will be the last view set for us now can just use a class article view set and we can use uh view sets dot model view set now in here you just need to specify the serializer class so it is article serializer and if you see the documentation [Music] so you can add the curaset and also serializer class so now i have added the serializer and i can add the curie set so it is article dot object start all now just you need to add these two line of the code two lines of the code so the cure set serializer class and our article views it is extending from the model view set now you can access to all functionality of creating reading listing updating and deleting of the data now let me just show you practically so i can list all the articles so i have just one article in here and so let me just run it again okay i can list the article i can add post a new article so let me just add it uh what i uh so let me just say uh model view set added and model view set description and i can post so you can see it's posted and if i get i have two articles in here i can retrieve a specific article so i want to retrieve the 10 and you can see that we have in here now you can put or update so let me just remove this update and update it and if i put you can see that we don't have the updated in here and you can delete so i want to delete this now it's deleted if i get the articles so you can see i have just one article in here now let's just do the same functionality using the postman and i can get all the articles i have just one article in here and i can post an article so let me just post one more in here and the body uh row and this should be json and let me remove the id and i can say newly added and we can say newly added description so newly added description now we can send so you can see this id is added and if you get or list your articles you can see that now we have two records so this is the first one and this is the second one uh you can just for example if you want to update so i want to update this 12 so i can add the id in here and i can change this to put and i want to change this for example newly changed and we can say description changed and i can send so it's changed and if i get you can see that the so this record has changed and also you can delete so i want to delete this and now so 200 for no contain and it's it's deleted if i check this we don't have the 12 id in here okay guys now our backend api is kindly prepared but it's not completed and right now you can uh integrate with any front end for example you can do crawl operations as we have already done and you can see that we have our model and we have our serializer and also we have our one view set and this is our view set uh that is we have article and it is a model view set so now let me just remove these codes from here that i have already created this so because i don't need this and i'm going to just remove these codes from here or you can leave it there's no problem let me just leave it because they are okay so now right now we have article view set and we have our model view set and we can integrate with our epi up so for example let me just go to the for example localhost so this is postman now i can get the articles up so you can see i can get the articles i can post delete later update articles but there's a problem because right now there is no authentication for our api for our sdpi because now everyone can get the articles can update the articles and can delete the articles so we need to add a authorization uh for the for our api now if you see django documentation so in the authentication section so authentication is the mechanism of associating an uncoming request with a set of identifying credentials now such as the user the request came from or the token that it was signed with now the permission and throttling policies uh can then use those credentials to determine if the request should be permitted uh so rest framework provides a number of authentication schemas uh that you can use uh so if you come down we have a basic authentication station authentication but we are interested in token authentication so if you come down so we have basic authentication and this says this authentication schema uses http basic authentication signed against a user's username and password and this authentication is mostly not recommended for production level it's just uh you can use this generally uh with uh for the testing so now this is the authentication that we want to use so it's token authentication and this authentication schema uses a simple token based http authentication schema now token authentication is appropriate for client server setup such as native desktop and mobile clients now it's according to documentation so now let's integrate this so the first thing is that you need to add restframework.org token in your installed apps so i'm going to just copy this and open my settings dot pi uh this is uh in here and i need to paste it in this section so in the installed apps so after adding this we need to migrate our project because we need to create a database table for storing our tokens for the user tokens now let me just uh in here i can just say python manage dot pi and we can migrate so now you can see that we have our token and if you see your django at main panel now let me just refresh this you can see that we have a tokens in here a token table now we can create a simple token manually for the user so this is our user and i want to create a token so now you can see that this is the token that's created manually now uh so if i copy this let me just copy this and and the headers so now let me just uh okay now before this uh what we need to do is to also uh add a view a url view for our uh this part application so uh we let me just do this in my main urls.pi i don't want to do this in the pro app level url so i'm going to open uh this urls.fine here okay now in here you can see i have my admin and i have my uh api app url so in here the first thing is that i need to from restframework.autocad i need to import opt-in our token and i can create a new pattern here so this should be odd and we can add opt-in auth token in here so now we have uh basic urls in here that we can access our authentication functionalities so now if i go to the art in here so let me just start and if i send so you can see that method no okay now we need to post because we want to send the username and password so you can see that the username this field is required and the password field is required now i can go to the body and and here i can add the username so let me just add username so i have already created a super user so let me just add it my username and also i can add my password so this is my password now if i send this i should receive the token in here so now you can see that this is the token that we have created in django main panel so now let's talk about the permission classes now uh right now uh it's kindly prepared but we don't have any permission classes now i can right now i can access to my articles without any authorization so if i send this you can see that i have my articles in here now what i want to do is to add permission classes if you see django documentation django rest framework so now together with the authentication uh we need to and throttling permissions determine whether a request should be granted or denied access so now if you come down uh so you can do this in two ways so the first way is that you can add the permission class in your settings.y so you can see we have is authenticated and we have now if i use is authenticated it means that my all view sets will be restricted uh for uh unauthorized users now as you can see that it is authenticated now let me just show you the first way that you can add this globally uh you can just copy this and we can open our settings.pi and let me just add it in here wherever you want you can just add so now you can see that uh rest framework default permission classes and we have rest framework dot permissions dot is authenticated now if i want to access the articles now if i send this you can see that authentication credentials were not provided because now i'm using this and here and right now if you see we have just one view set maybe you have two three or four view sets now by adding this and your settings dot pi it's globally and your all view sets will be restricted for the unauthorized users now so now as uh we have already have a token in here so if you see we have a token in here now if i uh let me just copy this now let me just show you that can i access this through the token so i can go to the headers and in here i can add authorization and i can say token and you can just copy the token in here now if i send this okay you can see that am receiving uh authentication credentials were not provided it is because because you need to specify the authentication class in your view sets so we have our permission classes but we haven't specified that which authentication we want to use we want to use basic authentication session authentication or token authentication so for this we can just go to the views.pi and in here in our view set we can add our classes and we can use token authentication so first you need to import token authentication and i can just say from rest framework dot authentication we can import token authentication and we can add token authentication in here so now now we want to just test our api so now if i send this you can see that i'm receiving my articles in here if i disable this authorization and if i send this again so you can see that authentication credentials were not provided because i have disabled the token and if i enable this and if i send the api again you can see that now i can see my data in here so now this was the first way that you can add so there's no not much difference if you have it if you want to add it in here so for example if you want to restrict your all view sets then it's good to add uh this permission classes in your settings.poi but for example uh if you have some views that uh you will you don't want to restrict that then you can add that in the in your view sets so also you can use allow any so let me just use allow any and this time i want to disable the authorization and if i said i should see my data in here because now we have allow ani in here so you can see that we have our data in here uh now let me just make this again to as authenticated now this was the first way that you can add that in your settings.pipe but another way is that you can add that the permission classes in your uh view sets in the class-based view sets if you're using function based you can add it like this at permission classes as authenticated but if you're using class-based views you can just use like this so let me just copy this and i can open this and in here i can add it in here so also you need to uh import this and we can just say so from rest framework dot permissions import is authenticated and i can just paste it in here and this time i want to remove my this from the from in in here from here like this so now if i send this without authorization so i should receive so authentication credentials were not provided and if i make this authorization and you can see that we have our data in here so like this you can work uh with your the token authentication and you can add it in here there's no problem also you can use allow one in here so there's no problem all right guys now this will be our last part in our back-end api so in this part we will learn that how you can register a user into our system and also we will do some refactoration on our code so the first thing is that so right now so we have a class article serializer in here now what we need to do is to create a another serializer for our user so we are going to use uh the built-in uh user system from the django now in here i'm going to create a class user serializer and we are going to just use serializers dot model serializer we can create our class meta and for the model it is users so we need to uh import this users from django and we can just say from django dot art from django.contrip dot art dot models import user and in here we can add our user and also for the fields we can add id uh username also we need to add our password in here but we will restrict this password so we have our class user serializer and we have our model that's user and it is built in django model and also these are the fields that we want now after this we need to open our views.pi now in here you can see that we have some codes that we don't need because so we don't need these let me just remove these codes from here and let me just remove this these comments these codes okay now our file is clean and we need to create our uh user view setting here so i can say class user view set and view sets dot model view set and we can add our curious setting here so q reset it is our not article it is user and we need to import users so from django dot country dot r dot models import user so user dot objects dot all and we can add our serializer class so it's user serializer so we need to import that in here so user serializer and let's just add our user serializer in here like this also we need to now register this user view set so as we have in here uh now i can go to the urls.pi so that's located in my api app and you can see that we have registered the articles now we can do the same so let me just do it in here so we can say router dot register and we need to import the user review sit in here so user views it so it is users and also we want user view set so now also i can add a patent here because right now we can just use for example localhost articles or localhost users so now i want to first i want to open the api so i can say localhost api after that article articles so localhost api and after that user so you can just add so it's not a big problem but it's good to add api in here if you don't want you can just remove it there is no problem and nothing will be changed so now this is our user serializer sorry user views it and now let's just open postman and we need to just do some so now let me just go to the localhost port 8000 and this time we need to first add epi and after that we can use for example uh articles like this so now if i send this so because we don't have the token it's saying authentication credentials were not provided so now we want to go to the users and this time we want to post so we have an error let me check sorry we have a made a mistake in here we don't need to add this in here so now we can just so if i send so you can see that it's telling that username this field is required and password this field is required now i can go to the headers and in here i can add so let me just okay now in here i can add my username not header sorry in the body and forum data and i can add username so let me just add a new username in here and i can add a password now i can send and you can see that id2 with the username john and the password john is created now if i check my uh ad main panel so at main and we have our users so you can see that i have a navy user in here now there are two problem with this user so the first one is the hashing password right now if i see my super user you can see that we have an hashed password or using this algorithm but if i check my this newly created user and i don't have any ash password and you can see that it's selling invalid password format or unknown hashing algorithm so now this is the first problem and the second problem is that we need to create tokens dynamically for our every user so right now we have just one token and that we have already created using the super user so now so first let's just handle the first one uh for the hashing password now i'm going to open my uh serializers.pie so this is my user serializer and in here uh i need to add some extra keywords strike key works keyworks and in here we can add our password so we want to just add some restriction for the password and so the first one is the right only so also let's be for this let me just show you another thing in here now so i have created my user now if i get my users so let me just go to the if i get the user so you can see that i have my password in here i need to restrict this password uh i should if i get the this uh url i want to just it should be the id and username note the password so now we can add first we need to just add this in here we need to handle this extra we need to add this and we can just say password so the first one is write only and let me just make it to true and also we can add required solaric white i also make it to true okay now if i get my users so let me just send this now you can see that i have just id and username i don't have the password in here so you can see id2 id1 and also username so now let's uh talk about the hashing password so now in the user serializer i need to override the create method so i can just say this create and in here's first i need to just say user dot objects dot create user and i need to add the validated data in here and i can just return the user like this so now i want to just add a new user so we have username and password this time let me just add it for example nav user and the password is new user and i want to send post this and you can see that i have id3 with the username of new user now if i check my users so you can see that i have a new user of this new user and if i click on this you can see that i have hashed password in here now the another problem was the token problem if you see my tokens i have just one token but i have three users so this token was manually created now we need to also by if a user registered i want to create token for that so for this what i want to do is to first import from restframework.token.views import token and in here when we create in this section we can just say token token dot objects objects dot create and i want to create the token for the you my user so user user so now if i now let me create another user in here so i want to just say for example uh my user or we can say let me just add my user so for example my user and this is the password is my user and if i send this so you can see id4 with username my users created and now if i check my users first i have another user my user and if i check tokens i have a new token in here at name of my user okay now let's login using our this new token so uh let me just copy this and let me just open a new tab in here so i want to get my all articles and if i send this so you can see that we're receiving authentication credentials were not provided now i can go to the headers and and here i can just add authorization so authorization authorization token now let's copy our this my user token in here and now if i send you can see that now we have our articles in here so now our backend api is completed and now we can integrate this with the front end so after this we will work on our front end all right guys now we have created our backend dpi using django so we have our serializer uh we have vertical serializer user serializer we have our models just a simple model and we have our routers url routers and also we have our view sets now it's time to talk about front end and we are going to build our frontend so because we are using react for building of our front end now uh before integrating and integrating with the django backend uh i need to talk about some concepts about react.js and after completing of the those concepts we are going to just learn about uh how we can integrate with the django backend so now you can see that it's a javascript library for building user interfaces and it is maintained by facebook so you can see that this is the github for the react and also uh we need to install this uh so for the installation uh before installing uh the react we need to install node.js so you can just go to the nodejs.org you can download the node.js and install that so after installation of the node.js so you can see that you will need to have note on your machine to create a react project and run that so you can see now you can use this comment so npx create react app and you can give the app name in here also for the building of the front end i'm using visual studio code so you can download that uh so what i want to do is to just copy this from here and i can bring it in here so you can just give it whatever you want you can just give it a name so i'm leave it uh by default so it's my app so after that you can just hit enter now it will take some times and i'm waiting for the creating of my react app project all right guys and now you can see that it's extracting the files now i'm waiting for this and it will be completed all right guys now the installation of react.js has been completed and you can see that these are the files we will talk about these files and now what we want to do is just change the directory to our so cd my app and after that we can just say npm start so now you can see react scripts start and now i'm waiting so it's starting the development server and now you can see that it's some local host port 3000 and if i see now you can see that our react js is working and it is created in here so you can see localhostport3000 and this is our react js application all right guys now let's talk about the folder structure of a react.js project so now if you see uh in our react.js application so we have my app so this is the project name that we have created after that we have three uh folders node modules public and src and we have some files in here now so let's let's talk about the package.json file and now this file is consist of our uh dependencies and also the scripts of the project now if you seen here we have the name of the project the version of the project project and so these are the dependencies that we have and also we have the scripts now these scripts now these are uh used for uh starting off our project for building or even testing of the project and so also you have this uh package log.json it's also uh and here we have our dependencies it means that it's installed correctly so after that we have uh node modules now this is the place that our all uh modules are installed uh when we have used create react app and these modules are installed automatically now you can see that we have these modules in here so after that we have public and in the public we have so this is the icon and this is the index dot html and so this is one of the important file and basically we will not and add any code in here so uh in this in this file and this is the html file that is loaded by the browser and it contains an element in which the application is displayed and a script element that loads the application in javascript files so now if you come down uh you can see that in here we have so this is the title you can change the title there is no problem and in here you can see that we have div id root and root and this is the important point and we will talk about this uh so after that we have a manifest json file and it's related to a progressive web application and we're not going to talk about this so now these are the logos that we have so this was our public after that we have the src or source now this is the important file and we will work uh this is the important folder and we will work on that on this folder a lot so now the first one uh let's check index.js and so now this is the javascript file that's responsible for uh configuration and starting of the react application and in here we have a dom element with the id of root now if you see in the index.html we have div id root and you can see that in here in the re re react dom dot render we have our we have our this route and we have used document.getelementbyid and this is the root that we have in here in the i the id so after that we have if we come down we have app.js now this is also the important file and we will work uh in this file a lot because it is uh our root component file and this file is responsible for the displaying of html and the browser and this is the react component which contains the html contents that will be displayed to the user and the javascript code required by the html so right now if you see in here we have this react.js default page and this is because that we have in here you can see that we have images rc we have now if i change this for example let me just say hello world so now you can see that we have hello world uh in here and now also you can see that we have so we have a function app now this is a component we will talk about the components in the later part of the video but right now you can see that we have uh it's a function component right now you can see we have a diff class name and you can see that this is css styles now if you check app.css you can see that dot app and the text align center and we have dot app logo and if you see in here we have this app and also app header now let me just remove these and so i want to remove this code from here and now if you see you can see that we have just a blank page in here because we have removed the styles now you can add something in here for example let me just add h1 and we can say hello re react application so now you can see that we have hello react application even you can see that the text is in the center because in the app.css we have dot app and text align to center now you can for example if you remove this let me just remove this and you can remove this and if you see now our text is in here so let me just bring it in the center so and also you can see that this is for testing purposes and in the next part we will talk about the components and different type of components and react.js so in this part we're going to talk about components now components are the building blocks of a react application and you can create as many as components you want uh for example you want to build a website now for the user interface you want to have a header main content section and also footer now for every section you can create a different components and we can gather all the components in app.js that is our root component also you can reuse any component and they are reusable it means that you can reuse components and also there are two types of components and react.js that you can use we have functional components and also class components now functional components are basically javascript functions and before introducing react hooks function components were stateless components but now you can use the same functionality of the class component inside a function component using the react hooks we will talk about this in the later part of the video and also class components are javascript classes and they are stateful components uh also class components maintain their own data that's called the state so but in this part uh let's just talk about the function components now if you see our app.js and here we have a function component and you can see we have function and also app as i've already said that function components are uh basically a regular javascript functions and you can create and in here we are returning uh j6 or html like for example def class name app and we're going to say hello react application inside the return so now let's just create our function components now and here i'm going to uh in the source folder i want to just create a new folder and i'm going to just call it components and in here i want to create a new javascript file i'm going to just call it hello.js so you can just give the file name with dot js extension so now in here we are going to create our first function component even though we have a function component in here but let's create our own what you want to do is to first import uh react so we can just say import react from react and after importing this you can just as i've already said that it's a regular javascript function and we can just say function and after that you need to give a name for the component so for example i want to just leave it hello also function components takes props as a parameter so right now we're not going to talk about the props we are going to just create a simple uh component and it is function hello and now inside that inside the function we need to just use return and in the return we are going to return something for example i want to just return an h1 tag and i want to just say we are inside function component okay so right now uh if i refresh this you can see that nothing happens because there are two uh problems so the first one is that we have created our function uh component now we need to export this so we can just say export default and after that you need to give the name of the component for example hello and after uh exporting now if i refresh this again if i see you can see that we don't have this we are inside function component now what we need to do is to add our this hello component inside our app.js so because this is our root component and our root file so we can add this in here now so the first thing is that you need to import this you can see that in here we have exported this and now we need to import this in our app.js so in here i can just say import hello from and it is inside the components and the file name is hello and in here we can add this so we can just uh say hello uh so you can add it like this so if you have something in the in between the components so you can add it like this and if i so you can see that we are inside function component and also you can do it like this and there is no problem and we are receiving the same result so you can see that we are receiving the same result in here so as i have already said that you can create as many function components you can create for example i want to just create another one and i'm going to just call it uh whatever you want you can just call it for example fun component dot js and in here we can just first we need to import uh so we can just say from react or we can say import react from react and we can just give it function and after that you can just give the name of the component so for example fun component and in here you can just return anything you want so let me just copy the code from here and i can paste it in here so let me just say this is my second function component and after that you need to just export this so export default and we can export fun component so this should be like this [Music] and in the app.js we can import this so import func fun component from components and this is a function component and now we can just say so now if i see you can see that i have this is my second function component so let's start we're going to talk about uh class components so we have saw function functional components now uh class components are uh basically javascript esx classes and also they are stateful components it means that class components maintain their own data that's called the state and also it can optionally receive props as their input so now let's just create an example of class components so and here i'm going to just create a new file and i want to just call it for example whatever you want you can just call it uh let me just call it myclass.js now so first you need to import react and also component because when we're going to create our class we need to extend from the component class of react so what we can say that we can just say import react and also component from react okay now after that we need to just create uh so we can just say class and you can give it my class so as i've already said that it is javascript es6 classes and now this class extends from component now after that we need to just create a render function and inside render we need to return anything that we want so return and for example uh i can just return an h1 tag also and i'm going to just say we are inside class component okay now after this we need to export this and in here we can just say export default and we want to export our my class so now if you want to use this we need to import this my class and our app.js so shown here now what i want to say we can just say import my class from components and this is my class and now we can add it add this in here so it is my class [Music] and so you can see that it's telling that we are inside class component so but it's just basically uh javascript classes that extends from the component and after that you need to create render and in the render you can return everything you want and after that you can just export your uh class component and you can just import that in your app.js file all right guys now in this part we're going to talk about props or properties now using props you can sense uh an information or volume from one component to another component and you can use props with functional components and also class components for example uh you can send some data for example in here if we see we have app.js so now if you want to send some data for example from the hello.js to the app.js or we can say uh from the from the app.js or from here from app.js to the child component that's hello.js then you can use props now first let me just refactor some codes in here uh i don't need this hello in here let me just remove it and even i don't need this component also i have just uh one functional component and also one class component now if you seen here uh so now if you've seen here i have just one functional component that's hello.js and also i have a class component that's my class that extends from the component so we're going to work on these files now let me just remove close some of these files from here now in that dot js for example and hello i'm going to just add name and i can add a name in here okay like this now i have a name uh attribute or we can say i have a name attribute in here now i want to send this name to my hello.js so this is my functional component now in here what i can do is to for example if i want to use props the first thing is that i need to add props as a argument in our functional component in here so you can give it any name but it is recommended to use props in here and in this section we need to now we need if we want to access to the this name uh from our uh parent to the child now what we want to do is to use curly brackets like this and after that we can say props and now in here if you see we have props dot name and we can use props dot name okay so we need to just wrap this with the h1 tag in here and let me just add that each one and you can use diff there is no problem so now if i refresh this and you can see that now i'm receiving my name in here now also you can add multiple uh attributes in here or multiple values for example let me just add last name so this is the last name and now in here i can just say for example my name is props dot name and my last name is and in here we can add uh props dot last name so we have props dot name and we have props dot last name now the values are coming from the our app.js or we can see considered parent component now if i see you can see that my name is this is my name and this is my last name okay now this was uh using functional components now if you want to use class components if you seen here we have a class component in this section and let me just add for example in here i can add email and i can say we can add an email in here now so now now if you want to access to this email from your child class that is myclass.js you cannot add props as we have added in our hello.js so you can see in here we have added props as uh argument and in here we cannot add and the props is within the class components and you can access to the props using uh this dot props so in here i can remove this and i can say so this so i can say this dot props dot uh email okay and in here i can just say that my sorry okay my email is this dot props dot email so make sure that uh you add this in here and now you can see that we're receiving my email is this is my email now there's one uh problem with the props that you cannot change props and props are not changeable for example in here if you want to change the props uh if i say uh props are dot email so this dot props dot email so this dot props dot email and if i say uh another email and if i run this you will see that i'm receiving error and you can see that cannot assign to read only property now it means that we cannot change the value of props uh you can use props in class components and also functional components so when you you're using and function components you need to add props as of argument in your child component and if you're using in the class components now the props are within the class and you can just use disk dot props to access the props of a class component in this part we're going to talk about event handling in react.js so right now you can see so this was from the previous part that we have learned that how you can use props with function functional components and also class components and this is the result so now let me first just remove uh so if you see this is our app.js and we have our this data let me just remove this first data i want to add just one data in here i want to pass and in my functional component i can remove this so now i have just my name and also my email now first let's just uh do event handling in our uh functional component so this is my hello.js and what i want to do is to in here i want to create a button so i'm going to just say button and i can say click me so now you can see that i have an error in here and if i uh see my page you can see that it's telling that adjacent j6 elements must be wrapped in an enclosing tag so we need to wrap our this two elements and uh for example in it we want to use devtek so let me just add let me just copy this and i can just say div and now i can add this div in here so now i don't have any error and if i see you can see that i have a click me in this section okay so now and here we need to add an on click so on click and after that you need to specify your function name in here for example in here i'm going to just create a function click me and i can just alert that for example button is clicked okay so now we can add over this function in here so make sure that you don't add this parenthesis because if you add that that will be function call so by this resume we can use like this so beat button on click and this is click me and also uh you can see that it uh we are using camel case in here and you need to use like this in react.js so you cannot use it like this on click and we need to use like uh so camel case now okay so now if i see if i click on this you can see that i'm receiving button is clicked so button is clicked now let's just do this with the class component for example so this is my class in here so now in here i'm going to create the same button so i'm going to just say button and button and i can say uh so this is click let me just say it click and i need to just wrap this in a div tag so div and now i can add this in here so now if you see now this is for the class component now i can create a function in here and i want to just call it clicked or i don't need this okay so we can say clicked and now in here i can just add an alert so class component clicked and now i need to add the clicked in here so i can use on click and i can add the clicked in this section so now uh click this note defined and you can see that we are receiving error click is not defined because we are inside a class component so now when we want to access to this click we need to use this keyword so we can say this dot clicked so now you can see now if i click on this you can see class component clicked and if i click on this so functional component clicked so click and also click [Music] all right guys now let's talk that how you can use our function as a props and react js so for example right now if you see that we have our on click and this is this dot clicked and this is our function now i want to uh bring my this function in my app.js so let me just cut this and i want to bring this in the app.json in here so and i can save function okay now after that what i want to do is so you can see that in my class we have an email a props now or an email attribute and also now i need to add my disk click in here so i can just say my click i can just name it and after that it should be clicked now i can send this clicked as a props to my my class.js so and here this time instead of this dot clicked what i want to do is to say this dot props dot my click so now if i click on this so you're not receiving anything in here so now let me just check this all right guys i think i haven't saved this so let me just save this okay now it's saved and now if i click on this so you can see class component clicked now let me just change this to uh let me just say inside uh app.js so you can see it's a two-way communication between our uh parent component and also child component so now if i click you can see inside app.js okay guys now in this part you want to learn that how you can install bootstrap for your react.js application so you can use bootstrap for uh styling your react js application so now the first thing is that we need to install bootstrap so and and our react.js application so let me just change uh so let me just change directory to my app and after that we can just say npm install bootstrap and after that hit enter so now we are waiting for the installation of the bootstrap now it's installing okay guys now the latest version of bootstrap has been added and you can see that it's 4.5.3 now after this you can add your bootstrap wherever you want you can add for example in now let me just add that in the index.js because i want to use for my all components so in here i can just say import bootstrap dest css and butcher bootstrap dot c dot main dot css okay now let's just uh for example let me just change the button that we have uh if you see in here uh i have uh two buttons so you can see that it's a little bit changed because we have added bootstrap now the text has changed now let me just open hello.js so we have our so if i add so for example the class name container so it's a class that's related to the bootstrap and make sure that you're using class name so you cannot use class in react.js so for example if you're using a class you need to add class name so class name container now you can see now it's a little bit changed and okay now we can just do this and i think we need to just do the diff class container in here so because it is our root component so now you can see that it has changed now let me just change the button in here so in the hello.js we have a button and let me add a class name so i'm going to use uh let me just make it like this okay beating between primary or for example you can use success and so now you can see it's changed and we can ah for example we can do this and here so btn and we can add a class name so btn b10 this time i'm going to use primary and you can see that it's changed so also let me just change for example my the header section so for example in here i can add uh or in this section i can add just for my email so h1 class name and i can say it as bg primary bg primary and i want text white and text center so we can see that it's changed but h4 class name bg primary and so text white text center now it's correct and now you can see that it's changed like this so like this you can add bootstrap styles in your react js application in this part we're going to talk about the states and also difference between the between the props and the states now as you know that props and states are used for holding the data you can pass props to the component it means that you can send data from one component to another component and we have saw the examples of the props but states are added within the component and the second difference is this that props are immutable it means that you cannot change the props volume and because states are within the component so the component has control to change that and also if you want to use states and functional component then you can use react hooks we will talk about the hooks in the later part of the video so now let's just create uh an example uh for this now uh as i've already said that you can use states in the class components and if you want to use states in the functional components then for that you need to use react hooks so now what i want to do is to create a new component class component in here and i'm going to just call it name.js so we can just say import react and also component from react and we can create class name and it extends class name extends and we can add the component so component now and here we can just add render and in the render we can return something so for example i want to just return an h1 tag and i can add my name in here like this okay also you need to export this so we can just export default and we want to export name component now i can add this in the name.js so i want to just refactor my code and let me just remove these two components because i don't need and i have a diff class name container now so first we need to just import this uh so we can just say import name from so components and it is a name okay now we need to just add this in here so it is name and now you will see that we have our name in here okay so right now the name is hardcoded and we have added the name in the name.js so let me just close these files okay now for adding the states the first thing is that you need to create constructor you can add states in the class constructor and after that you can just use super keyword and in here you can add your state so we can just say this dot state so it's state object and for example we can just add name and let me just add my name in here okay so now we can access to this state in here and we can just use this dot state dot name so now if i see you can see that the result is the same and if i change this to for example let me just add a name in here okay now you can see that now we have our name in here now we want to create a button when we click the button we want to change this name to another text so for this i want to create a button in here like this and let me just say change text because we have two elements in here we need to wrap this in a div tag so we can just say diff and close the diff add these two in here okay now you can see that we have a button in here let's add a bootstrap class in here and we can just say class name and it is btn btn we can say success okay now you can see that we have this button here right now the but the button is not functional and we want to add a handler for this now so there are two ways that you so first let me just show you the first three and now in here i can just add on click and in here i can just say so right now i haven't created my function so i need to create and let me just call it clicked me and what i want to do is to change this this state so i can use set state so this set state is a reserved keyword so we can use set state and in here we can change name to for example changed text like this okay now we can just use this dot uh so now if you're using regular uh function like this for that you need to just use it like this so you can just say this dot clicked me you need to add like this so now if i uh click on change text you can see that the text is changed and if i click on this you can see that it's changed now if you're using an arrow function now let me just show you so for example i want to use this like this let me just remove this in here and let me just say this dot clicked me now for that you need to change this click me to an arrow function so we can just say uh like this okay now if i check this so you can see that the text has changed now let me just add uh and here we can add a class a bootstrap class so we can just say class name and it should be bg primary so you can see that it's changed to the primary and we can change the text to white for example so now the text is white also i want to just make it center now we can use text center so you can see that text is in the center and if i click on this so you can see that it's changed change text also we can add ternary uh conditional statements using ternary operators so now let me just show you in here let me i want to comment this and what i want to do is to and here i can say name and this dot state dot name so if my name is uh so if this is the name let me just add it in here i want to make it to for example another name to john do and else case i want to just make it uh this name so now right now it's my name and if i change this so you can see john doe and you can see that i can toggle between two names like this okay guys now in this part we want to learn that how we can use map method for iterating over the data so before starting our topic what we need to do is to install an extension that's called es7 so uh it's used for so for example if you search in here es7 and so we're using this es7 react read x and graphql so you can just install this and using this extension you can create your functional components and also class components easily okay now uh so now i'm going to just create a new component and let me just call it example.js and in here what i want to do is so now if you want to create functional component you can just use uh our ce uh so it's for class components so you can use rc for class component rce so you can see that this is our class and for the functional component you can use rfce so you can see we have functional component and also if you want to create constructor you can just use our const you can see this is our constructor so in here i'm going to just use a functional component and so you can see that we have react in here and after that function example and we are returning something in here now what i want to do is to create a an array and i want to just send that array using the props so in here uh now let me just in here create an h3 tag and let me just say example and i need to just add this in my uh app.js so first i need to just import this so we can just say import example from components and we can use example so now in here let me just add my egg example so now i have example in here now what i want to do is to create an array so let me just call it names and let me just add some programming language names like python java javascript so c-sharp okay now after adding this now in our example.js we need to just use props props and so first i'm going to create a function here let me just call it function my element and here i can add names so now we can use uh names dot map so the first thing is that you need to add an alias for this for example i'm going to just use name and after that in here we can render our this name so let me just use backticks so like this and i can say name and what we need to do is to return this because we will use this in our this example components now in here i can just instead of this example i can just call my this my element my element method and in here i can just say props dot names so this is the names that i'm receiving from here so names so now let me just uh refresh i have so i think probably there was this that we need to wrap this in a diff tag so let me just add so theref and i can just div okay now okay now you can see that we have python java javascript and c sure now if you inspect uh we will have an error in here so you can see in the console that's telling that each child in a list should have a unique key prop now react is expecting a key prop so now when we are going to use map we need to add a key prop also so you can just add it in here we can just say div key and for this i'm going to just use the name so if you have id you can just use id in here and you will see that i will not have this editor again so now you can see that i don't have this error now also you can do uh this with the functional com with the class components so now let me just create a new file i'm going to just call it example2.js and now i can create uh using the rce so now we have our class component let me just remove this and we are expert exporting default so now what i want to do is to just in the app.js uh we can create uh so first i need to import this we can just say import example 2 and we can just say from so it's example 2 [Music] and now we can just add our uh let me just copy this and paste it in here so this is example two and this time let me just add some more uh for example uh react and react native and we can add for example django so now we can just copy some codes from here so first we are going to just copy this this function and we can add it in our class component and we are going to just remove this function and also uh we need to just copy this from here let me just copy this h3 and in my example too let me remove this diff tag and add it in here now if i run this you'll see that i'm receiving error because you can see that my element is not defined and we need to just use this keyword and now if i run this i you will see that now i have process not defined as i have already said that now props are within the class component so you can just use this for accessing the props so we can just say this dot props dot name and now you will see that i have you can see that now i have my data in here all right guys in this part we are going to learn that how you can add forms in your react.js application so now let's get started uh i'm going to create a new uh javascript file or we can say a new component and i'm going to just call it form.js and in here i want to use uh class component so i can just say rce and this is my class so this these are my react imports and this is my class that extends from the component and then here i'm exporting the form component and let me just write a component in here and now i need to add this in my app.js so i can just say import form from components so it's form and this is my form so now you can see that we have our component in here uh now i want to create my form so in the form.js and here i can just use so input type and it as text and i can just add a placeholder so enter your username so now you can see i have a form in here and i can write in here let's just add some bootstrap styles so i can just add a class name and this should be form control so form control so it's a bootstrap class and you can see now we have a nice form in here and uh you can add this in in a class container so class name and this is container okay now uh we need to create another form also and this should be a password so password form and the placeholders please enter your password and now you can see we have two form in here also we can add a button uh and this in our form so we can just add a button so button and this should be button and this is for example click me and we can add a class bootstrap class so a class name and we can just say ptn btn primary and now we can see we have a click me button in here right now if you see uh it's just a basic html form and uh now we want to uh uh we want to uh get the control of this uh uh form using the react.js and we want to add a control from the react.js so right now if you see we can just add something in here and we can write in here now what i want to do is to in here i need to create a constructor and we want to use a state so let me just say our const and in here i can add a username so this is an empty string and also password this is also an empty string after this i can add a value in here so i can just say value and i can say this dot state dot username and for the password also i can add a volume so this dot state dot password so now uh now if i check uh i cannot write anything in my form because now my form is controlled by the react.js so now for uh this we need to just add an on change for our forms so in here i can just add on change so on change and we want to just use this dot username handler or we can say let me just use it username handler and we want to do the same for the password with the password handler let me just add on change so this should be password handler now we need to create these two methods so this is an arrow function and in here we need to just use this dot set state and we can say user name and also you need to pass pass event in here because we want to capture the data using the even.target.value so we can just say event.target.volume and we can just do the same for the password handler and this should be password so now uh if i write in here uh now you can see that i can write in here and also i can add my password in this section so like this you can work with the b6r forms in react.js first we're going to talk about the lifecycle methods of a react component now when you create a component especially class components now it goes through different life cycle methods now these are the methods that are available in the class components and we cannot use that in a functional component but but with the when you're using functional components you can use react hooks to access to these functionalities now we will talk about the react hooks in the later part of the video now so for example uh and here if i uh now let me just uh so this is my forum.js now let me just do it in here okay now in here if i uh say so you can see that we have a component that had different uh component life cycles we have with that cache that mount that update will mount and will receive props now you can see that these are the methods that you can use it now for example the uh component that catch is used for logging air information when you're working with the error boundaries and we have a component that mount now this is invoked immediately after a component is mounted or we can say that after the first render lifecycle now if you need to load data from a remote and pine or from an api now this is the good place that you can do it in the component that mount also you have component that update and it's invoked immediately after updating occurs and this method is not called for the initial renders uh also we have uh for example component well an amount now this is invoked immediately before a component is unmounted and destroyed and it's mostly used for clean app of the web application that you can use now let's just uh use one of them so you can just use it according to your for example to your required that you want now let me just use component that mount in here so now so here you can see that i have uh enter username and password so now let me just make this for the username so we can say that this dot set state and in here we can add a username and you can add your username for example username or whatever you can just use it like this and now you can see that we have our username in here now as i've already said that it component that mount is the best place that you can for sure uh data from the api now let's just use it uh practically for example in here uh so i'm going to just use fetch uh so it's for fetching of the data and now in here i'm using adjacent placeholder so dot dot com and it said demi api data and i can add it in here and it return a promise so i can just say response and we can just convert this to the json so response dot json and also we can say dot then data let me just console.log the data okay so now uh if i check my this react app and if i inspect element in the console so you can see that i have array of data and you can see that these are the data that's fetched and it's the android articles now so now let's render this in our this uh page so for this i'm going to just create a new uh and here i can just create an array so an empty array and after that instead of console.log we can just use this dot set state and we can say posts data we can assign our data our data value to the post posts array now after that now we want to render this so let me just do it in here and and in here i can just say i'm using maps or posts dot map and you can for example i'm going to just make give it post and now in here what i want to do is to create an h2 tag and i need to just add a key for this so for the key i want to just use post dot id and also let me just close the h2 tag and in here i can render just the title so i want to render post.title so if you if you seen here we have id title body and we're going to just uh printing the title posts as not defined okay we need to uh distracture this post posts in here so we can just say const posts the start state so now you can see that we have our these titles in here and let me just refresh this [Music] and these are our data our fetched data from an api in this part we're going to talk about react fragments now if you see react documentation in the fragment section it's telling that a common pattern and react is for a component to return multiple elements now for example if you have multiple elements in a component you need to wrap those elements now it's telling that fragments lets you let you group a list of children without adding extra notes to the dom now let me show you the practical example what i want to do is to create a new component in here and i'm going to just call it my fragment dot js so this should be a functional component and i'm going to just use rfce and this is my fragment and and here i can just add for example a fragment example fragment example uh now i need to add this in my app.js so let me just comment uh these components and in here i can add first i need to import so import my fragment from and this should be my fragment now i can add my fragment in here so my fragment and so now i have fragment example in here now let me just remove this diff and in here i want to add an h1 tag and or we can say an h3 tag so h3 and i can just say fragment egg example and after that i'm going to create a ptx so p and i can just say this is fragment example so now you can see that i'm receiving error in here and it's telling that j6 expressions must have one parent element and if i see i have the same error in here and it's selling at js and jsx elements must be wrapped so because in here we have multiple elements and we need to wrap this in a wrapper for example we are going to use a diff class so i'm going to just use div and div and i can add these in here okay now if i check you can see that there is no problem and we are receiving the result now if i inspect this uh so now in the body if you see we have a div id route and after that we have so this is our class container and after that we have another div so this is the div that we have created now you can use react fragment to remove this div and what we want to do is to instead of div we can just use react dot fragment now it will create an empty wrapper for us so now if we see this and now if i go to the div id root i have diff class container and you can see that after that i don't have any div i have directly h3 and also p tag in here so like this you can use react fragment and it is an mpd wrapper for wrapping of your for wrapping of the child elements in a component in this part we are going to learn that how you can create routers in your react application so for this we need to use a library that's called react router tom so the first thing is that you need to install this library you can just use npm i react router dom or you can use npm install react router so i've already installed this and now after installation what you need to do is so now let me just add this in the index.js so open index.js and and here the first thing is that i need to import so i can just say import so we can import route and also browser router so browser router from react router dom now after this i'm going to create a function in here so i'm going to i'm going to just call it function router and i can just return and in here i can return a browser router i need to close this browser router okay now up i can use my pattern here so so for first let me just add pad for app.js so this is my root component and i can just use path and i can use exact and this should be index for example and also the component that i want to use or component and this should be app sorry it's not bad it is route and now what we want to do is to add this router instead of app so let me just come down and here i can add this so now if you see uh we have the same result and because in our app.js if you see we have just this my fragment component now these components are i have commented these components now what i want to do is to use this form so first i need to just uh import this so i can just copy this and in the index.js i can add it in here now i can create another route so let me just copy this and bring it in here so this time i want to just go to the login and the component is a forum so now now if i go to the login so you can see that we have our form in here and if i go to the so now i should i should see just one of them in here also i need to add pattern here so pad and also pad and now it should work as we expect okay so now you can see that this is our index or fragment now if i go to the login so you can see that this is our login page and if i go to the index this is our index page in here so like this you can work with the react router dom all right guys now in this video we're going to talk about context api using context api in react.js so if you see react.js documentation context provides a way to pass data through the components tree without having to uh pass props down manually at every level so now first let me just create an example and you will know that what i mean so in here i have two new components component a and also component b now i want to create a functional component in here and also uh i want to create uh another functional component and my component b uh so for example i have some data in myapp.js now i want to send this data to component b now let me just nest this uh three components these two components so in app.js i want to add component a so component a make sure that you have imported so you can see that it's imported automatically and after that in the component a i have component b so you can see that the components are listed so component b so in the component b let me just write component b so you can see component b now for example in app.js i have some data and i want to send this data from the app.js to the component b now if you're using props you need to first pass the data to the component a and after that you need to pass the data to the component b you can see that even component a uh does not need to this data but we need to pass that because we want to use that in the component b now using context dpi you'd uh if for example if you use i will directly feed the data from app.js to the component b js now let me show you the example so for creating uh context uh you need three steps so the first one is that you need to create your context and react so we can just say const and i'm going to just call it my context and we can say react dot create context so after that also i need to export this because i will use this now after creating the context and the second step we need to create provider because using the provider we can feed data to share the data with the child component now what i want to do is to just wrap this component a with the provider so we can just say my context dot provider and i can just wrap this on my context provider and after that i need to feed a value for this so let me just say this is a value from context okay now i want to send this value to the component b [Music] now the third step is creating the consumer because using the consumer we can consume the data so we are going to open our component b because we want to uh send this data to the component b and in here i need to just import the context so import my context from [Music] app and you can see that in app.js we have exported our mic and text and in here we can import this so now we can create our consumer and we want to consume our data so we can just say mycontext.consumer and we can just close this my context consumer and in here we can just say data so we can just name it data and we can return let me just end h2 tag i want to just show the data so now if you see we have the data in here so this is a volume from context and this was the value that we have sent from here now let me just just describe once again so for creating uh context you need three steps so first one is that you need to create your context after that you need to create your provider and feed the value for the provider and at the end if you want to consume the data you need to use consumer and we can just use mycontext.consumer and we can consume the data in this video we're going to start our react hoax uh tutorials and the first hooks that we want to learn that's three uh use statehooks now first of all what are hooks if you see react.js documentation it's telling that hooks are a new addition in react 16.8 they let you use state and other react features without writing a class now if you remember that we have created class components and we have used the states and class components and we have already said that you cannot use state by default in a function component but you can use react hoax for using states and there is a use state hoax that you can use it now there is an example for this uh that they have in their official documentation and you can see that they have implemented the react hooks for the function components and also they have a version of class components that you can use the same example now let me just show you the example so first we want to work on the class components and after that we will convert our class components to the function components and we use react hooks use state hooks so so this is my simple react.js application and i'm going to just create a new new folder and i'm going to just call it components first i'm going to just create a class and i'm going to just call it a javascript file and i'm going to just call it counter.js now i can just use uh i'm going to use a class component not functional component so rc so this is my class component and i can just say for example uh hello and now let me just add this in my app.js so first i need to import this and we can say import a counter from components and this is counter and now we can just use counter in here so counter and now if you see we have hello in here okay now let's open our counter dot js and in here first i'm going to just create uh constructors or const and i want to just create a count and initial values to zero now after this in here uh so first i'm going to just create a button so button and i can say class name btn btn success and i'm using the bootstrap bootstrap styles and i can just add button button in here and let me just for example call it click me or whatever you can just call it so now after doing this now we need to add on click and in or this button now if you see we have a button and there's nothing and what i want to do is to also add an h2 tag in here so and i can just say this dot state dot count and you will see that the initial value is zero and i cannot change this so now in here i can just first create a method or function so uh let me just say columns and i can just say for example click me as an arrow function so click me and in here i can just use this dot set state and what i want to do is to change the uh value of my account by one so i can just say count so this dot state dot count plus one and now i need to just add my this click me button in here so let me just say on a click and this is this dot click me okay now if i click on this you can see that i can change this now we have used uh and here we have used class components and we have used a state now we can use the same functionality using a functional component and also use state hooks now let me show you and here i'm going to just create a new uh javascript file and i'm going to just call it for example whatever you want you can just call it uh just call it counter hook dot js and we can use a functional component so we have now the first thing is that you need to use the hooks that you want for example there are different hooks that you can use and here because we are using a state so for the state you can use use statehook so we can just add use first we need to import user statement here now after adding the user statehook what we need to do is to create our user statehook so it's just basically a simple you can say that this is a simple function or method so now we can say use a state and after that you need to add the initial volume in here for example zero now it returns so the first one is the initial value it returns that is for example let me just say count and after that uh the method that you can update the value so we can just say set count now this is optional you can just for example you can make it numbers or set numbers for example whatever you want you can just make it like that and there's no problem so now after doing this in here what i want to do is to first uh print my discount so let me just say count and now we need to just add this in here so let me just first i need to import i can say import for example counter hook from [Music] counter hook and we can just add our counter hook in here so counter hook so now if you see that we have a 0 in here and let me just add this in h 3 or we can say h2 check now after this i need to create a button and i can just add add a class name so for example btn btn primary and this should be so for example i click and now in here i can add on click so i can just say on click and in the on click we can use arrow function and we can use this set count and in the set count now we can just say count plus one and you can see that how easily we have added we have created uh we have imported our use statehook and after that we need to create our user state now it returns uh a initial value or current value and also a method for the uh setting the volume and in here we can just print our value and also in the unclick we can use an arrow function and we can use set count in here and we increment the count value so now if i check you can see now right now we have zero and if i click on this so you can see one two three and we have the same functionality as we have in the class component and in here we have used a functional component with user statehook you can add multiple hooks in here so for example let me just add another one and here i can just use for example const text and set text and i'm going to use use state and we can just give the initial text to this as a text and now in here what i want to do is to first print my this text so i can just h2h2 and this is my current text and i can use a button in here for changing the text so button and we can add a class name so it should be btn btn for example success and we can just say change text now we can add on click for this so button and on click we are going to use an arrow function with the set text set text and now we can add the text that we want for example i can say the text is changed okay now now you can see we have this is the initial text that we have already added in here so this is a text now if i click on the change text button it should be like this so the text has changed now i'm going to just click on this so you can see that the text is changed okay guys now we have learned that how you can use uh for example uh user state and how you can use number and also text with user state now also you can use objects or for example arrays if you want so let me just use object for example and here i'm going to just say columns info so i can say const info and set info and this should be an object of name an empty name and also uh an npt email like this okay so now after this we are going to just create uh an input field in here so let me just okay now we can say input type input type text and we can add a class name of forum control and we have we can also add a value of uh so info dot name so now if you see we have a form in here right now we cannot write in this section and uh let me just add a br tag be our tag in here like this okay now i want to just copy this and i can add this in here and this time i'm going to use info dot email okay now we need to add an unchanged listener in here so before on change uh i can just print the so i can say name is info dot name and we can do the same for the let me just copy this email as info dot email okay name and also email uh now we can just uh and here we need to just add an unchanged so let me just come down and i can say on change and i can use event and i can just say set info name e dot target so name should be e dot target dot volume let me just do the same for the second one so i can just grab this and add this for the email and and yes we can just okay now and we need to just change this to email so now we have i can add my name and you can see we have our name in here but if i add for example an email address you can see that the email is removed and the name is removed it is because that user state does not merge the value so now for this we need to just use separate operators uh now in the in here uh in this section we can just use uh for example we want to just copy all of the all of the attributes or all of the fields from the this object i want to copy and after that i am going to overwrite the value so i can just say dot info like this and i can do the same for the email so now this time if i add my name so you can see i have my name and if i add the email address and this is my email address okay guys now let's use arrays in our user state so we have used numbers text and also object now let's use arrays so let me just create an array in here so let me just create my user state so i'm going to just say articles and set articles and we want to use use state and in here i'm going to use array so let me just say article 1 article 2. an article three now i can just come down let me just add a pr tag in here so i want to treat over my this articles array that i have and and here what i want to say articles dot map and we can use article and in here we can just return our article so in our h2 tag we can just add article so now if you see uh we have our article so in here you can see article 1 article 2 and article 3 so now it's working let's just add a button and also a method for adding a new article so in here i'm going to just create a new method so i want to call it const add article and it is an arrow function and in here i'm going to just use set articles so let me uh just add for example new article like this okay now after this let me create a button so i want to just create in here so button class name btn between primary so primary and the text is at and on click so we need to add an on click listener and this is uh this is the function that we have already created so add article and let me just bring this in here like this okay so now you can see that i have i have add article in here so if i click on the add article you can see that my new article is added but the my default articles that i have in here they are disappeared in here so as i've already said that when you're using uh objects or arrays you need to merge your data you need to merge that so by default your set articles cannot merge now and here what we want to do is to first we want to copy all the articles we want to copy all the articles and after that we are going to merge the new article at the end of our this article that we have copied so now this time if i so you can see we have article one now if i say our ad article we have another article and these are the previous articles add article and also add article all right guys now in this part we're going to talk about use effect hooks now if you see react.js documentation it's telling that the effect hook lets you perform side effects and function components now if you remember a class components for example if you want to fetch the data from an api uh for example we can use component that mount now you can just use the same functionalities using the use effect so if you come down uh now here it's telling if you're familiar with react class life cycle methods you can think of use effect hook as a component that mount component that update and also component will and mount combined so you can do the same three functionalities using just use effect and also they have an example in here so we will use this example so first let me just create a simple example [Music] okay now as we have already imported use state you can use use effect we need to just import use effect so now after this okay now after this in here we can just use uh use effect and now it will return a function and in here you can add your code so let me just add a console.log and in here let me just say use effect use effect is called okay now so now if you see let me just inspect the element and if i go to the console so you can see that use effect is called and in every render they use effect at the use effect is called in here now we have one warning in here it's because in our previous video we haven't used uh and here we need to just use a key so let me just add key and let me just add use article and so you can see that in every render the use effect is called now for example if i change the state let me just click this click me button you can see that you can see that in here we have i use effect is called and if i change text use effect is called and if i add something in here you can see that it's rendering and in every uh render okay now we can restrict this and we can add a condition so if you see in here and for example if i refresh the page it's calling the use effect and if i for example add some text it's calling use effect and you can see that it's not good and we can just uh change or call our use effect based on some condition for example and here you can add an array or another uh parameter in this section so now what i want to do is so if you leave it for example uh mpg and mpt array now if i check this so now let me just remove this and let me just refresh my page so now you can see it's called in the rendering of the page now if i change the state you can see that it's not calling the use effect if i click on this if i click on change text or if i for example add text in here now you can see that it is just calling this effect just once it's mimicking the component that mount and as we have in our class components now for example i want to uh for example if i click if or if i change my this state discount state uh uh or for example if uh i want to or i want to adjust the scanned state so i want to just uh based on this i want to call this use effect now in here right now i have just an mpt array and in this section i want to add count and now so you can see and the rendering it will at first called the use effect and after that if i do for example change text nothing happens if i add for example text there is no problem and if i click on the click me or yeah this click is i think yeah you can see because this is our class component that we have already learned uh let me just comment out this in my app.js so i just counter and i can just comment this okay now you can see uh let me refresh it again we have our use effect in here and if i click on change text you can see nothing happens and if i add there is no problem and if i click on this you can see that it's calling the use effect now you can add multiple uh items in here for example also i want to just do it in a text i want to call this use effect when i change the state state of the text and now let me just refresh this so we have our use effect on the click we have use effect and on the change text we have also used effect okay now let's create another example this time we're using uh the example from the react.js documentation and we want to change the title of our react app in here and after we want to call the use effect so for this uh what i want to do is to i have my count in here set count and i don't want and i want to use this so let me just uh comment this use effect and in here i'm going to just create use effect so in here what i want to do is to change my change the title of my web page and here i can say document so in this section so document dot title and i'm going to use backtext and i want to just say you have clicked and we can add our account in here times now i'm going to create a button in here so in this section so button i can add a class name to btn between primary and i want to just say for example change title so if i see in here i have changed article and i have changed title now in the change title so in the change title i want to just add on click and in here i want to call set count and i can just say set count and count plus one so now let me just inspect the element okay now if i click on change title you can see that the title is changed to four and two five and let me just refresh it again so right now you can see it is uh zero times also let me just add a console.log in here so just bring this in here okay now you can see that use effect is called in the first render and after that if i click on change title so you can see that the title is changed and you can see that the use effect is called and you can see the third time and in the fourth time okay guys now let's switch some data uh using use effect so for this first of all we need to install uh library that's called axios so you can use it fetch you can use text use whatever you want so we can just say npm install axios okay guys now the axis is installed if you see and if you see package.json and so so you can see that we have ax using here now after this i'm going to just create a new component and i'm going to just call it uh switch data.js [Music] and this should be a functional component so we have function fetch data now in here the first thing is that we are going to use jsonplaceholder and you can see uh you can just go to the json placeholder and we are going to just click on the posts and we want to just use this uh uh post uh end point now in here the first thing is that we need to import user state and also we need to just use use effect so let me just create a statement here so const i use const for example articles and set articles use a state and it should be an mpt array and after that we are going to just use use effect and we can just use ax use so we need to also import axios import axe use from max use [Music] axe use dot get and we can just add this in here after that it will return a promise so we can just say dot then and response and we can just console.log response dot data and if there was an error we can just say dot catch error and we can uh console.log the error so now if i check my so i need to just add this component in my app.js so first let me just comment this component counter hook and now i can just add my fetch data make sure that you have imported so fetch data and now i can just inspect the element so you can see that in the console i have 100 uh and this is the 100 article or posts that we have fetched from this endpoint api so now let's just set this in our uh in our page so instead of now in here i have just console.log what i want to do is in here i can just say set articles and i can use articles dot data and after this sorry not articles.data risp response.data now i can just use a map function to iterate over the data i can just say articles dot map so we can just use it like this so articles dot map and we are going to just use article and in here we can say for example i want to just use an h3 tag so i can just give it a key so this should be article dot id and also i want to use article.title cannot read property map of undefined so let me just add a parentheses in here and okay now so now you can see that we have our data in here but the problems in here that it's going to a loop and it's fetching the data it's because that we need to specify a dependency dependency in our use effect uh because we want to just fetch once and now uh in here we can just add an empty array so now you if i refresh this you can see that we have just fetched once and this is our data in here also you can fetch one data so for example if you want to uh right now you can see that it's 100 data now if you come down for example we have post one so this time based on id we want to get the posts so now what i want to do is uh and here we need to first create a new user state so const id and set id user state and we are going to just give it one by default and after this we need to bring a change to this uh this time i'm using backticks because i want to add slash and dollar id id and after this we need to just bring change to this so i want to just use article and it should be set article set article and we are not going to use this let me just comment this or let me just remove this from here this time i need to just create an input and put type text and the value is our id and also i need to add an onchange so this is set id and i can just say e dot target dot volume and in here i can just print for example article.title so now okay now you can see that we have our uh first article in uh first title of the article in here and if i change this to two or three you can see that it's not changing and that's because uh if you see in our uh and here we have used uh an empty array so now uh right now our state is related to the id so we can just add id in here and based upon the id we want to just use this use effect okay for right now it's 1 and if i change this to 5 you can see that it's changing to the data is changing in here like this okay guys now in this video we're going to talk about another hooks that's called use context now if you ever remember my previous videos uh we have talked about context dpi now uh if you see uh for the context api that we have learned before this so context provides a way to pass data through the component tree without having to post props down manually at every level now we have created an example on the context api but use context has the same concept as a context api so using can use context also you can send or share data uh from your parent component to the child components without having to pass props down manually at every level of level of the component now let's recap that uh uh listen and we won't first let me just use this example and after that we're going to use use context example now i'm going to create a new component and i'm going to just call it for example component a.js and i want to create one more component that is component b dot js so let me just use a functional component rfc and for this also i want to create a functional component now and here what i want to do is to let me just write component a and the same should be this is my component b now in the component a i'm going to add component b so make sure to uh import that so component b so you can see that it's imported in here and in the component in the app.js i'm going to add my component a so component a now for example i have some data in myapp.js and i want to send the data to the component b and you can see that in here uh we have uh now component as the child component of the app.js and component b is we have a added component b and the component a now if you're using props and you want to send the data to to the component b uh you need to first pass the data to the component a and after that to the component b now first let's just do this using the context uh as we have already done it and after that we're going to use the use context talks now you will see that using the use context it will be so much easier that you can share the data now what i want to do is to in here first i need to create my so let me just say const my context and i can say react dot create context and from here i need to export this because i will consume my data so other we have already said that when you're going to work with the context api you need to pass three steps so the first one is that you need to create a react context and after that you need to just add provider and feed the value to the provider now okay now let me just remove these uh components because i don't need this up so you can see that i have just component a in here now and here what i want to do is to wrap my this component uh using the uh this mic using the provider so we can just say my context dot provider and now we can wrap our this component uh using the provider now after wrapping this to the provider we need to uh feed a value to this provider so we can just say value and let me just say this is context value or whatever you can just add it in here now after doing this now we have done our step one and step two now in the step three we need to consume this data now this is the important point and for the use context this will be the same creating of the context and also provide providing the data and in the consuming of the data it will have a different approach now first let's just use our context api approach now you can see that as we have already exported my context and in the component b what i want to do is to import this uh so we can just hit import and my context so my context and we can just import this from app [Music] so now after doing this uh let me just i think i have an error react is not defined uh in app.js so we need to just uh import react in here so import react from react okay uh now what i want to do is to just uh go to the component b and here and i have imported my context so this is the context i have exported from the app.js and in here i need to wrap my uh and here i need to just create my consumer and consume the data so let me just remove this component b and in the div tag what i want to do is to say my context.consumer and in here we can access to the data so we can just give it a name for example data and we can just return first let me okay and now we can just return for example h2 h2 now we can add our data in here and we can just print the data so now if you see you can see that we are receiving this is context value and this is the data that we have sent from the app.js to the component b now so this was using context dpi now this is not our topic and i have just recapped that video now i want to just use the use context talk now as i've already said that the two steps are the same so we need to first create our context using the react and we need to export that after that we need to wrap our component using the context provider so and we need to just specify a value for that and after doing this now in the component b so and here i can just what i want to do is to remove this and let me just remove this context consumer and in here we need to just import use context so use context so this is also hook and in here we can just say counts data and we can use use context and we need to add our mic and text in here now in the consuming section it's one of the easiest approach to use use context talks and in here we can just say data so now we can see that this is context value now if i add for example an h1 tag in here so you will see the difference and also let me change the data so this this data is with context hook use context stroke is sent so now you can see that this is our data in here okay guys now we have talked about user state use effect and also use context now let's talk about the use reducer hooks now if you see react.js documentation uh and the user reducer it's telling that it's an alternative to use state now it accepts a reducer of type state and also action and it returns new state and also for the user reducer returns the current state with the dispatch method now if you're familiar with the redax now you it will be easy for you also use reducer is usually prefer preferable to use state when you have complex state logic that involves multiple sub values or when the next state depends on the previous one now let's just create our example so this is my app.js and what i want to do is to first as we have already uh so let me just remove this it was from the previous video and i'm going to create a new uh file and i'm going to just call it for example uh use reducer.js and if you see they have a good example of counter example so you can see we are we have a state dispatch so it is the new state and it's the dispatch method and we have reducer function and also the initial state so you can see that they have uh increment uh and also decrement of value example now let's just create that example in here okay now first i need to create a functional component rfc and as we have already imported other hooks we can just use use reducer in here and now as i've already said uh we can just use use reducer now it takes two arguments now the first one is the reducer function and we can just add reducer in here and the second one is the initial state so we can just say initial state now we need to create these two so the reducer function and also the initial state so let me just create it at the top so we can just say counts initial state and it is an object so count zero so the initial value is zero also uh we need to create our use reducer so use a reducer our reducer function so rate user and now it takes two of arguments so the first one is the state and the second one is action now if you see react.js documentation and if we seen here so accepts a reducer of type state and also action and it returns a new state so in here it uh takes state and also action and it returns a new state based on our action action type what action type that we want to use so now in here we can just use switch switch statement and we can just use action dot type so if the action.type we want to just uh do our actions based on the type so in the case if it is increment so if it is increment what we want to do is to increment the value of this count that we have in here so we can just say count state dot count plus one and in the case of decrement so what we want to do is to return count state dot count minus one so you can see that we have our reducer function it takes two arguments like state and also action and it returns a new state based on the action that we have so after this now in the in the use reducer if you see react.js documentation it's telling that it returns the current state and with the dispatch method so what we want to do is to just say const so it is the new state and also with this patch method like this okay so now we can just first let me just say h2 h2 and we can use count so state dot count now if you see in here so let me just oh we need to add this in the app.js so i have forgot to add it so you can just say use reducer make sure that you have imported in here so it's imported automatically and now you can see that we have count zero it's because uh because in the in here we have our count uh to zero so now we can create our buttons so the first one is button class name and it is btn beaten primary we can just say button it is increment and let's create our second button so button class name so this should be btn btn primary and we can just use tick remind and now if you see we have two buttons right now there's no functionality for this now we need to dispatch dispatch our actions in here so we want to just use on click and it is an arrow function and we can dispatch so no dispatch even so dispatch and it's an object and the type is increment and we can just do the same for the on click and this patch so the type is decrement the type of action is decrement and here the type of action is increment and in here the type of action is decrement and based on the action we want to dispatch our method so now if you see in here if i click on the increment you can see it's incrementing and if i click on that decrement it's decrementing okay guys now i want to show you that how you can fetch data using use effect and also use reducer so as i've already said that uh use state and also use reducer are used for state management and we have already used use state for fetching data using use effect and now we can use use reducer so now so first what i want to do is to create my first i need to impor first i need to create a new file and i'm going to just call it fetch data dot js a file already exists let me just say data fetching so data fetching dot js and now i'm going to just create a functional component in here and what i need to do is to add this component in here so let me just add data fetching and make sure that you have imported data fetching so the first thing is that we need to import use reducer and also use effect after this we need to create our use reducer in here so we can just say const it will return the new state with the dispatch [Music] and we can use use reducer and in here you need to first give uh it takes uh two arguments so we can just add our reducer function like this and also the initial [Music] state so we have reducer function and also the initial state now let's define this so for the initial state it is an object and we want to create a loading so by default that is true and also we have for example article and it is an empty object and we have error so it's an mpd string so after this now we need to create our uh reducer function so const reducer now it takes two arguments so now uh the first one is the uh now the action and also the state state and also action so now we can uh return the use state based on an action so we can just use switch and we can say action dot type so there will be two action so the first one is success if we load the data and the second one is the error so we can just say in the case success what we want to do is so we want to return okay now we want to return the loading to false and the article should be action dot payload so pay load and also the error should be an empty string now in the case of error so in this case we want to just return an object so loading is false and uh article is empty object and the error is we can just add an error so error in data fetching all right now we're going to use use effect and for fetching the data so we can just say use effect and we need to give an arrow function and also in here a different empty dependency array and and here we can use axios so let me just import that so import axios from axe use and we can just say axe use dot get and in here you need to add the url so we are going to use this so if you're using the posts you need to just use uh iterate through the map and if you're using one uh item so for example one article or one post you can just use it like this so let me just copy this and bring this in here and after that it returns a promise so we can just say dot din and response now the response we want to dispatch our uh so the first one the type is so the type is uh we can if we see in here so the type is success so we can just say success and the payload is response dot data so now if there was an error so dot catch so we can just dispatch so it's an object the type is uh error so this is the error the error action that you want to dispatch from here so now let's just uh render this in our div container so and here i'm going to just say if for example the data is loading uh what i want to do is to just say loading and in the else case i can just render my for example i want to just get the body so i can just say uh state dot article dot body also we need to just give a statement here and also we need to do for our error so state dot error we can just say state dot error in this case we just return null so let's check that there is no problem expected default as a default case so if i check you can see now it's loading and this is our data so loading and this is the data so now if i okay now if i add a wrong url for example let me just remove this s from the post now so you can see that error in data fetching and we are receiving error and the data fetching so if i add it again and you can see that i'm receiving the data in here okay guys now let's start our integration between our django backend and also react.js front-end so we have already created our backend and you can see that we have our models in here we have our serializer dot pi in here so we have user serializer and also article serializer and we have our routers in here two routers articles api articles and api users and we have two view sets we have article view set and also user view set now it's time to create an integration between our react.js front end and also django backend so now if you see so this is my django and i have a new project and and this is my react.js project and i've created a new project and you can see that this is my localhostport3000 and so the first thing is because let me just install bootstrap because i want to use bootstrap for my design for the designing of the application so you can just use npm install boot strap boot to strap and we are going to wait and it will be installed okay guys now bootstrap installation has been completed we will not use that right now but we will work on that so now uh so this is my app project and react.js and let me just first bring some changes to this so right now you can see that we have our uh the default page for the react.js so what i want to do is to open my app.js and in here so first i want to remove the logo [Music] so let me just remove the logo and i can just say h3 h3 and we can say django block django react.js js blog app or we can see oh yeah blog app so now you can see that we have jenga react.js blog app and now what i want to do is to also remove this first i need to just open app.css and in here so this is the dot app and we have app.logo we are going to just remove these two files because we are not using and what i want to do is to just bring this header from here in this section and also uh i can just use color for my the text color and also i can just add uh so first let me just let's remove this because i don't want to use app header so what i want to do is to remove this app header from here and let me just say dragon react.js course and we can just change to course so now we have in here now we need to just so this is our text line center background color and i can just add also a padding so 20 pixel so dev class name app okay now i want to just take all the space of the page so for this so for this in here i can also just add a mean uh height so this should be hundred okay now you can see that we have our all page in here okay now after this what we want to do is to [Music] and uh so now let me just remove the center because i don't want the text should be in the center so now you can see django react.js course okay now let's fetch our data so i'm going to import so first i need to just say import i use a state so we are going to use uh react hooks so we can just say use a state from react and and here i can just create a const articles and also set articles use state so right now i'm going to just make it an mpt array so after this in here uh i can just map through this articles so we can just say articles dot map and we can just use article so article and in here we can uh print our article or we can render our article so we can just say return and in the h2 tag let me just say article so right now if i run this you will see that nothing happens because right now our we it's empty our array is empty so if i had article one and also article two so you can see that we have our two articles in here now because we have data in our back in dpi and uh if you see my django main panel so this is django main panel so let me just run my server and now so i can just go to the so articles so i have just one article in here so i want to fetch this article and for this we already we have created our use statehawks and we are going to just uh we have articles and the method is set article for setting up the articles so now let me just remove these two articles from here uh because i have added manually now we are going to use another uh hook that's called uh use effect so because we want to fetch the data now for the fetching of the data or for the side effects you can just use use effect hooks so we can just use add use effect in here and after that in this section we can just say use effect so it returns a function and a row function and also we need to add an mpt array as a dependency so we're going to use fetch you can use x use uh as we have already done some data featuring using uh axios in our react hooks tutorial but in here we want to use fetch so we can use fetch and in here you need to add the url or end point that you want to fetch so if you see in here and this section so you can see that we want to fetch the data from uh localhost let me just copy this and paste it in here and after that we want to use epi it's because if you open our [Music] routes so api urls so in here you can see that we have api and after that we have articles so we have added epi and now we can add articles and now we need to add uh and here objects okay so first we need to add the method so we can just add method and the method is get because we want to get the data up after that we need to pass the headers so we can just add the headers and here and the first one is content content type and this is application json slash json and also we can add authorization because we are going to use token uh authentication or token authorization so in here we can just say token and we want to add a token from here for right now if you see in the tokens we have two tokens for the my user and also this so let me just add the token for the super user and i can just copy this and add this in here and after that now it returns a promise so we can just say dot then and we can just get the response and after that we need to convert the response to the json and also we need to just add another dot then and in here we can just set the response to the articles that we have to this articles so we can just say set articles and we can just add response in here and if there was an error so and i want to just catch that error and i can say error and i want to just say console.log day error so this is my uh first i have created use state for getting the state of my data so i'm using uh use state and up after that i'm using use effect for fetching the data so i i have used fetch and after that i have added the url that i want to fetch the data from that so that's uh the api articles and after that i can pass some data in here like metadata and headers these are the headers now the fetch returns a response and after that i can just return the promise so we can just get the response and after that we convert the response to the json and after that we set the response to our set articles and in here we are going to just catch catch the error if there was an error so now after this and after this you can see that in here we are mapping through the articles and now if i uh check this and if i so right now you can see that nothing happens because i have errors in here if i go to here you can see in the console that it's telling access to fetch from origin has been blocked by course policy no access control allow origin header is present on the requested resource now what's course it's cross origin resource sharing it's an http header based mechanism that allows a server to dedicate indicate any other origins like domain schema or port then its own from which a browser should permit loading of resources now it's a security feature for the browsers now we need to add the course so there's a library that's called django course headers so django course headers now the first thing is that you need to install this so you can etch the latest version and you can just say pep install django course headers now after installation if you come down uh so first you need to add this in the installed app so i can just copy this and open my pie charm id in the settings dot pi i can add this in here so now this was the first step and the second step uh what we want to do is to add the middleware the coarse metal layer now it's telling that make sure that you add this coarse middle layer before the common middleware so we can just copy this and we can just come in the middleware so we need to add this b for the common middleware in here now the last step is that we need to whitelist or we need to add the configuration for the uh specific domain so let me just copy this so we want to use the first one and they're different one but it's the recommended one and i can just add it in here so i'm going to remove this and this and this time i want to use localhost and if you see i want to use this 3000 so we can just add 3000 in here so now if i refresh the data so now right now we don't have that error the core zero and this error is because in here we have an object and we are returning an object so for this we can just say article.title so if you see in our model uh let me just show you in our models.pi we have title and also we have descriptions so it's just a simple model so for right now we're going to just fetch the title so you can see that we have our title in here and if i refresh this so so this error is from the key prop and i will fix this so right now you can see that we have our model view set added so this is the first title that we have in our uh database so if i see articles you can see now let me just add another another article so let me just say this is new article and this is new this encryption and let me just save it and now i can refresh this so you can see that this is the new article uh title that we have added okay now let's fix this issue this warning and also we are going to just render the description also now open this uh this time so we are going to and here we need to return multiple items so let me just uh wrap this with the parenthesis like this and after that i need to just create a div tag so diff and i want to close the div so i have my article.title and i can just create a p paragraph tag and i want to just also add article article dot so if we if you see our models we have dot description so article dot description and also we need to add a key and the key is article dot id because we have also an auto created id for our model so now you can see that this is our so if i refresh this you'll see that i don't have this warning again now you can see the warning is gone and this is our title this is the description this is the title and this is the description and let me just make this h1 tag so it should be bigger so this is my title for the page so you can see now let me just add a new data in here so django and react react.js tutorial this is django and react jscores for beginners and we can just copy this save it and if you refresh our detail so you can see that we have another django andrea.js tutorial so just simply uh we have created our state use state and after that we have fetched the data using the use effect so this is our endpoint url and we can add some data like method and also headers and we can get a backup promise so this is response we need to respond convert our response to the json and after that we set the response to the articles and this is for the error handling and in here we could just use map for iterating over the articles and after that we can just use our key that's id and we are rendering our article.title and article.description that we have in our article model okay guys now i have my backend and i have uh my frontend i have fetched the data from the backend to the react.js front-end right now everything is working and there is no problem but you can see that we have our app.js file and we have done our fetching approach in the app.js now it will be good to create a new component and uh list or all all articles in that component and after that we can send uh the data from our app.js to our new component using the props now this is not just the way to we can use props there are uh of other ways like for example right now we have just a simple application and we can use props but maybe you have a more complex application more complex logic and there will be nested components so on that time you can use context dpi or if you're using hooks you can use use context stocks because our application is not complex we can just handle this approach using the props so if you have watched my react js tutorial in this course you will know that what i mean so using props we can send the data from our app or app.js or we can say that our patent component to the child components now let me just create a new file so in here and src i want to create a new folder and i'm going to just call it components and in the components what i want to do to create an au file i'm going to just call it article list.js so here we need to create a functional component and what i want to do is to move my this part of the code now fetching of the article so from here i want to move it and like this so i want to bring this code in here so let me just add it in this section and after this what i want to do is to add props in here and in here i need to import my article list so i can just say import article list from components from this components folder that i have created and it is article list and in here what i want to do is uh i'm going to add my article listing here like this and after that if i refresh the page you can see that i am receiving error that article articles is not defined in the article list.js because we don't have the articles in our article list.js this we have the articles in here so now what i want to do is to send this articles from my app.js to the article list.js so as i've already said that for sending or sharing the data we can use props so in here what i want to do is so i have added props in here and in here i can just say props dot articles so now if i refresh this you can see that i am receiving error and this error is because so first let me just uh add uh so also we need to send this article so i have my article list so in here i can just say articles articles so first let me just show you now if i refresh my page now you can see that it's working and i have my articles in here so now in here what i have done i've created a new uh component that's articleless.js and i have moved my listing of the articles from the app.js to the uh article list.js and after that i have i have used props to share or send the data from my main uh component that's app.js to the article list using the props so in here you can see i have i have sent this articles and here so articles articles using the props and my article article list dot js now here is an a problem if i remove this and so now you can see that i am receiving uh cannot read property map of undefined it's because because in here if you see we have a an mpt state in here and we are sending an empty articles uh through the our app.js to the article list and uh right now the there's no articles in the props so what i want to do is to first check this so i can just say uh if props dot articles so in here i am going to say that if i have my articles and the props i want to execute this code i want to map or iterate through the articles and i have print them now if i don't have articles in the props i don't want to execute this code so now if i so right now you can see that i don't have the articles and the props so you can see it's empty and you can see that uh the application is working but we don't have the data because we don't have uh the props or the articles so now i can just say articles and articles [Music] and now if i refresh this so you can see that we have our articles in here now let's just add some styles in here so i want to add some space between the articles and this my title and what i want to do is to and here i can just add a add to br tags so let me just add two beer tags and uh you can see that i have space in here also i'm going to add a line horizontal line between every articles so in the article list.js and here in the diff tag i can add a horizontal line so now you can see that we have a line between the articles like this all right guys now in this part we're going to learn that how you can create uh a full crot uh application so right now you can see that we have fetched our data and these are the data that we have switched for our from our django backend now as we have uh created our backend uh uh we have created the full crowd operation that we can create article read article update article or delete article so right now we have uh fetched data now let's uh edit the data and we want to work on our editing so for right now uh this is our article list and what i want to do is to and my article list.js i want to create two buttons so you can add it icons for example for editing or deleting i want to add just two buttons and these are uh bootstrap buttons so in here uh i'm going to create so first let me just describe one thing we have already installed a bootstrap so you can just use npm install bootstrap and it will be installed after that you need to add the bootstrap so i'm going to just include that in my index.js so in here i want to just say import bootstrap and dest css and it is bootstrap dot main dot css okay after this now in here the first thing is that i need to create a diff class so i'm going to just call it row and let me just close this diff class after this we need to create another diff class name and i'm going to just say call md1 and we can just close this diff and in here we need to create our button so i'm going to just say button class name and it should be bt and btn primary and the it should be update so the text should be updated so now let's just check this that we have our button here so you can see that we have uh update button in here let me just add another div class so because i want one button for the updating and also one button for the deleting so now let me just copy this diff class from here and let me just paste it in this section and so let me just use colon here and i want to it should be bt and bt and danger and this should be delete so we have our update button and we have our delete button so you can see we have update and we have delete now one thing uh so you can see let me just add a color as he says style for this horizontal line that i have because it's not looking good and in here i can just add the chart class name and we can just say h our class and now we can just set some style for this in the app.css so in here hr class and we can add background uh color and i'm going to just add red color so now you can see that we have in here okay now we have our two buttons we have update button and we have delete button right now there is no functionality for these buttons so we want to add some functionality for our these two buttons and so in here uh in this section i want to add an on click so i can just say on click and from here i can just use an arrow function and i can just say edit btn and i want to pass article in here so right now i haven't created this edit btn let me just create this at the top so and here uh let me just create const edit beaten and we are going to pass article like this now from this component from the article list.js we need to uh notify our app.js or our patent that which article has been clicked so we can do that using uh this method so you can just say props dot edit button and we can just pass our article in here so this button is just for notifying of the parent that which for example which article has been clicked now in app.js what i want to do is to uh first i need to create a new uh file so i'm going to just call it form.js and this should be a functional component and in here i'm going to just say for example forum now in the app.js we are going to just uh create our button so create our method our this method so it did button and let me just because we are sending this uh method uh as a prop so in here we can just say const let me just create in here in this section so const and we can just pass article so article and what i need to do is to create a new state in here for editing so this is for listening of the articles and setting the articles so we can just create another one this should be a dit article so edit article and also set edit article and this should be null by default and now in this method we can just say set edit article and we can pass article in here so after doing this now we have the track of the article in our this edit article now we can send this data to our form.js now we can just use this and first we need to import this in here so we can just say import form from components so components and it is for and now we want to send our send the track of our articles our edited articles to our dot js so now we can include this in here so we can just say four so first let me add this form in here and if you if i refresh my page so you can see that i have form in this section and also as you have as we have in here so we have sent we need to send this edit button uh so as we have used in here edit beat in and we need to send as a props so by this reason and the article list what we want to do is to say edit btn and we can add this edit btn in here like this and now in here we need to just add the edited article so we can edit article and and here i can just say article and this should be edit article so now let me just describe it once more so in here we have in our article list we have created two buttons so first one is for updating and the second one is for deleting and update what i want to do is to trigger an edit btn on my when we click on the update button and this function is nothing but it's just for notifying our parent or app.js that we want to notify that which article has been clicked and after that this is the this is the method that we are receiving from the from our app.js as a props so now you can see that in here we have created this edit button and in here what we want to do is to use the set edit article state and that we have used in here and after that we have sent this uh edit btn as a props to the article list so you can see it did between btn and in here we have received this prop started it between and we have passed the article in here and also uh after that we have saved the data in our edit dot edit uh article so we are tracking the uh we are tracking the uh edited article and this in here in this state and after that we want to send this in our new component that is form.js because in the phone.js we are going to create a form uh that is used for editing the articles now in the form.js you can see that now i have article article and in here i can just use props and now if i say so first let me check the props dot article so if we have article in the props we can just say props dot article dot title okay so now if i click on the update and if you come down so let me just come down so you can see that we have model view set so this is the title that we have if i click on this so you can see we have another one and if i click on this you can see that we have another one okay guys now instead of rendering my title after clicking on the update button what i want i want to just create a form in here and after that when i click on that date i want to render the form so for this i am in the ah form dot js now this time instead of title so first i'm going to check that if i have uh article in the props and after that if i have i want to just render my uh render my form and in the else case i want to just return now like this okay now in here i can create my form so i'm going to just use a diff class so def class name and this should be a class from the bootstrap and let me close this diff uh so first i want to create a label so label and i need to give html4 and this should be title and also class name i want to add a class so this is forum control and also so this should be title so label and this is my title and i need to create a input type so input type text and the class name should be form control form control and also i can give it an id so title we can give a placeholder so like this you can just say please please enter the title like this so now uh let me just i have error in here so def class uh i need to add this in here so if we have article we are rendering our uh form and in dell's case we are going to just say nil so now we can just check this okay so now if i click on the update and now you can see that i have a title so the title is and i have also now let me just fix the title uh html label html for title and class name is it's forum label not forum control so now you can see that we have our title and we have the input text for the title so we want to add another one for the text area and it should be for the description so first let me just add the label for from here let me just copy this and paste it in here so this should be description and the description and after that i can create my text area so text video so let me just close the text video and in here i can add a class name for this so the class name is forum control and also we can add an id for this so the id is description we can add rows so i want five rows for this so five and now this is our description section so now you can see i have title i have description now also i want to add a button in here so i can just say button and the class name is btnb success and the text is update so now you can see i have update button in here so we can just say update article for example like this and also let me just add br stack in here because i want to space some space now you can see we have our update article button with the title field and also description so now let me just refresh this now you can see i don't have the form if i click on the update you can see that i have the forum in here okay now we have a problem in here uh it's because we have already said that process props are immutable uh we can not change the value of the props uh so in here if you see that we are receiving uh the article as a props and and from the app.js from here you can see that we are receiving article as a props now what we want to do is to create our own state for the data for the articles and we want to uh update it in the form.js component so for this i'm going to just import use state and first i want to create a title and also set title and use state and in here i can just say props dot article dot title and we want to just say const description and also set this encryption so use state props dot description props dot article dot description so now we have our two data uh in the title and also description now we can change that so right now if you see that uh this is just a bootstrap or html4 now we need to uh we need to add a control uh to this so for this we need to add a value so now for the input type and let me just do it in here so i want to add a value for this and the value should be title so now if i write something in here so you can see that now i am receiving the value the value of the uh article in here the title so now if i refresh this so now we are receiving an error that cannot read property title of null now it's because uh if you remember from app.js we are sending article to our form.js and by default the value of the article is null now we need to check this first so in here we can just say that if we have edit article so we want to just display this and in the else case we are going to just return null so now if i refer just now you can see that i'm not receiving any error and now if i click on this django react.js tutorial so let me just click on update i have the form and you can see that this is the title uh in our input field right now i cannot write anything in here because now we need to add on change so in the form.js i can add on change so when i want to change the form i want to use set title and i can just say e dot target dot volume so i want to capture the value of the input using the e.target.volume now now i can write in here so you can see that i can remove the data and i can write in here so now let's do this for our this description so let me just copy this from here and i want to just come in the description and i can paste it in here so this should be description and this should be set description so let me just remove this set description so now you can see that we have our description in here and also we have our title in here now if i refresh this and if i click for example on this so you can see we have our four with the title and also description populated so now let's work on our update button so when we want to click on our this update button we want to update the data so in here we need to just add an on click so i'm going to just say on click and in the on click you can just add the method that you want to use so for example i want to just use name it update article now i need to create this at the top so columns update article so you can add your update code in here but we have different features in here for example like updating deleting and also adding uh new articles so for this we are going to create a new javascript file for our these kind of functionalities so let me just open uh and here in the source folder i'm going to just create a new file and i'm going to just call it apiservice.js and in here we are going to just create a class so we can say export default and class i'm going to just call it epi service and in here we can just use our update method so we can just say update article and we want to pass article id also we need to pass body okay now we can just say return and we want to return the fetch method and in here you need to i'm going to use backticks so let me just copy the url from myapp.js and bring it in here and we are going to use so because we want to update according to our id so also we need to add article id in here and after this let me just close this some files so after this we need to add the method so we can just say method get and also we need to add the headers so now in here we can just say so method get and also we need to add the headers so this is content type and also we have authorization and it's based on the token now uh we need to change this because we want to update so this should be pot not get okay so we have we are turning our fetch and we want to update our data according to the id and the method the support and this is the headers and also this is the token and also in here we need to add a body we are going to convert our body and we can just say json stringify and we can add body in here so body and also we need to convert our data to json so we can just say dot 10 response and we can say response dot json so now uh this file is created and we have update article in here uh now what i want to do is in my form dot js i want to use from this method so in the accounts update article in here first i need to import this so we can just say import api service from api service and in here we can just say api service dot and we are going to use our this update article so update article so first the first one is the id so we can get the id from props so props dot article dot id and after that we need to pass the body and this is the title and also description so we need to pass an object so the first one is title and also we have description and after that it returns a response so we can just say dot then promise and we can say response and let me just console.log [Music] this response so response so now let me check my react juice application so i'm going to just click on the update so in here for example let me just also open the console in here okay so now in here i want to update this and let me just remove this or so i can add a new in here so this is new title and it is app data okay so after this now if i click on update article so you can see that i am receiving a response and you can see that this has changed this is new title and it is updated so now if i refresh my page you will see that i have the new updated title i don't have this django react.js tutorial so if i refresh so you can see that i have this is new title and it is updated now let me update another data so let me just click on this and if i inspect and if i go to the console so in here so i want to update this this so django and react js course for beginners and if i click on update articles so you can see that we have updated version in here and if i refresh this i will see that this is changed so let me just refresh this and you can see that django react.js scores for beginners so right now you can see that we are refreshing but we will fix this uh that it should be automatically updated in our ui okay guys now let's update our ui so right now we can update our data and there's no problem and it's updating but we want to automatically when we update the data we want to update also the ui for example if i update this i want it should be automatically uh it should be my ui also be updated so right now if you see in our forum dot js uh let me just show you so and here so in here we are for right now we are just uh logging uh the response now we need to send this this response to our app.js so from here we can just say props dot updated information and we can send the response so now so response props dot updated information i think okay so now after this now up i need to create this method so updated information so let me first create this in here in myapp.js and let me just say const updated information and it takes article article and now we can add our this method and our forum.js so in here we need to send this form so now we have form article and also we can just add this in here updated information okay now in here in this method first we need to check uh our ids so and according to ids we want to update information in our app.js so i'm going to just say const new article and in here i can i need to iterate over my articles list so we can use articles and these are the place that my articles are stored so i can just say articles dot map and after that i'm going to just say my article okay now in here i want to check that if my article dot id if the article id is the same as article dot id so in this case what i want to do is i want to just return the article and in the else case i want to return my article and after that you can see that now i have my new articles a new article in here now i can use this set articles to update my ui to update the new articles in the ui list so now in here i can just say set articles and i can add new articles in here new article [Music] okay now let's check our uh ui so for example i want to update this and let me just say uh new data that is updated updated and now if i click on the update button so let me just say update article you can see that it's updated automatically now let me just uh remove this description and let me just say this is my description and it is newly updated description for the for example article and if i click on update article you can see that this is updated automatically and you can see that our ui is also updated okay guys now we have done our updated process but right now we have a little bit uh problem in this app now for example i'm going to click on this update so you can see that i have my updated update form in here it's populated with the data but if i click uh in my another article to update so you can see that it's not uh showing me the uh so the new data so this is because uh if we see our form.js and here we have initiated our article title and also article description so now in the first time there is no problem it's working but in the second time because it's already initiated it's not working so if i click on this you can see that we have and if i click again it's not working so for this we are going to use up another hooks that's called the use effect talk so i have as i've already said that you can use abuse effect hook for the side effects and and here we can just add use effect and instead of doing uh for example initiating this in our and here we want to do that in the use effect hooks so in here i can just say use effect and it is an arrow function and what i want to do is to remove this from here and i need to just make it an mpt string and in the user effect in here i can just say set title set title and i want to just say prop start article.title and set description so props dot article dot description and also in here we need to specify the array dependency and we want to tell uh that based on which based on which condition we want to perform the use effect so in here i want to just say based on the props dot article so now let me just refresh my page now if i click on the django react.js so you can see that it's working for the first time and if i click on my this new update new data you can see that it's now we have a new data in here so if i click on this again we have this data in here all right guys now we want to insert a new article so now for inserting the article there are three process now the first process is that we need to populate the form for inserting the data the second process is that we uh just update our data insert our data and in the third process we need to just uh update our ui with the new added articles now what i want to do is in here you can see that if i click on the update you can see that i have this form so i want to use the same form for the inserting of the data so let me just open my app.js and in here uh i want to so i want to add a button in here uh so so this button is for inserting the data or inserting the article uh so so this is the class name and this is my app and in here i want to create another div class so i can just say diff class name and it should be row and let me just close this div and bring this div in here okay after that i need to wrap my uh my items in a column so i can just say call and let me just close this call okay so now in the row i want to create another so another column so def class name i can just say call and in here i can create my button so i can just say button class name is btnbt in primary so btn btn primary button and this should be uh insert article so insert article so now you can see that i have an insert article button in here now right now there is no functionality for this button so i want when i click on insert article i want to populate the form in here so let me just refresh this and if i click on this i want to populate the form in this section so for this we need to just add an on click for this so i can just say on click and in the on click i want to just say article form so this is my method now i need to create this method so and here i can just say const article form okay now as i have already said that we are using the same form as we have used for the updating or editing the data so for this if you uh see in here we have set det article so we are going to use our this method and let me just copy this and bring this in here now this time uh we want to uh populate an mpt form so for example in here if you see if we click on the update so this is a populated form with the data in here i want it should be empty because i want to insert my article so for this i want to just make the title to empty string and also description uh this encryption to the empty string so like this okay so now now if i click on the insert article so you can see that i have a new form with the mpt of empty title and also empty description now if i click on the update you can see that these functionalities we have these functionalities in here and if i click on insert new article we have the title and description npd title and empty description but right now we can see that the button is update article now we need to change this button okay now i'm going to open my form.js now in here up so i want to uh if you see in here we have the let me just come down and this is the button for updating and in here uh so we can say that if we have id it means that we want to update the data if you don't have the id it means that we don't want to update the data so in here we can just check so so we can say that if we have props dot article dot id so we want to show the update button so in the else case what i want to do is to show the answers article button so let me just copy it again and this time what i want to do is to it should be insert article insert article and instead of this i want in thirst article so let me just create this insert article method so in here so we have update article we can just use command standard article so right now it's an empty uh but so empty function now let me just refresh this and this time if i click on insert article you can see that we have button of insert article and for the update i have updated here okay now i want to add my inserting mechanism in my api service.js so i'm going to just open api service and then here we have update and now i need to create a new method in here so i'm going to just say static insert article and i want to pass the body [Music] and we want to return of our fetch and let me just copy this from here and bring it in this section and also we need to add our method and also headers so let me just copy this from here and add it in this section now this time our method is post because we are posting the data and we have our authorization uh also we can just bring the body in here and we want to just uh stringify it the body and also we are receiving a response or a promise and i need to add this in here so i think oh we need to just remove this parentheses from here and we want to bring that in this section and in here we can add our dot then or response so now we have our insert article we are returning our fetch and we are using method post and this is the headers and this is the body and also we're receiving a promise now we have our response in here now after this what i want to do is to open uh my uh forum.js and in here i can do my inserting mechanism so i can just say api service dot insert article and it's an object we have body in here we need to add the body so the body is title and also description and now we can just get the response so we can just say response and if right now let me just say console.log the response so now let's just check our app and i'm going to just click on the insert article so right now you can see i have one two three articles and now let me just open my console so in here i want to just add my new for example my new article or we can just say article about python this is an article about python and now if i click on the insert article so you can see that i have my article about python and i returned the data in here now if i refresh my page you can see that i have the new article in here so article about python and if i check my django administration panel in the articles if i go so you can see article about python i have the article in my backend okay now we have our inserted article but now uh we need to just send our this uh newly added article to our uh app.js or we need to or we can say that we need to send our response uh to the ui and we need to update our ui with the new added article so now instead of console.log response i want to just send this so i can just say i can remove this and i can just say props dot as we have done in here for the updated information we can just say for example insert it and for mason and we can pass the response in here now we need to create our this inserted information in our app.js so let me just open my app.js and in here i can just say const and we want to push back this to the forum.jso so we have form article like that article update information and we can just have inserted information so now in the inserted information uh so we can just say columns new articles and after that what we want to do is to first copy our all articles so as i've already if you have watched the my react hooks tutorial in this course so when you're using array or object so first you need to just copy your all data and after that you can append your newly data so for example in here i want to first copy my all previous articles so i'm going to use separate operator so i can just say [Music] dot dot articles and after also i need to pass article in here so this is the newly new article so i want to first copy my all articles and after that i want to append the new article to this to the article list and after that i can just push the new article to the articles so i can just say set articles and i can just add new articles so now let's check our application so you want to insert article so now if i come down you can see my form and i can say django is for django is for for example back-end development you can use django it is awesome framework and i can just click on insert article so i think we have a problem in here so we are receiving the object again in here so let me refresh this so django is backend and now i think i have unsafe data in here so i need to just save this and now i can just insert new article so this is django django second article this is django description now if i click on insert so you can see that we are receiving this django second article and this is our description here so let me add another data in here so click on insert new my new test data title added so my new description added and insert so you can see it is inserted and if i check my django backend you can see that we have the detail in here all right guys now this will be the last part for the crowd operations and we want to work on our delete so we have learned about update and we have learned about an insert article so let me just add a new article in here so we will delete this article this will be deleting deleting uh this will be deleting article article description and we can just insert articles so the article is added in here now when i want to click on the delete i should delete the article so if you see my article list.js so we have our delete button here you can see and in here what i want to do is to create an on click and the on click will be uh so you can just name it whatever you want so i'm going to just say delete btn okay so after this we need to create this method and through this method as we have sent the delete the edited information to the app.js we need to do the same process we need to send the deleted article uh information to the app.js so you can just say deleted button and in here we can just add article and we can just say uh deleted button and we can pass article in here so sorry and also we need to use props because we want to do this process process of deleting in our app.js so now i want to create this uh delete btn in my app.js so in here i can just say const delete btn and we can pass article and now we are going to just add this in our article list like this okay so now in here so here first we need to find the clicked article and clicked article information so we can just say const new articles and after that we can say articles dot filter we want to filter that using the filter function and we can just give it my article and in here we can check so if my article dot id is equal to article dot id what we want to do is to return the false and in the else case we can just return true so now let me just uh describe once more so in here in the article list we have our delete button and from here we are going to just track the uh tracked information of the deleted article and we want to just send that to the app.js using the props and in the app.js we can create our delete btn and in here we are checking uh so first we want to filter our all articles and after that we are going to check uh to find the deleted uh article and now right now the code is not completed because uh so we need to create our deleting approach and our api service so for deleting so now for this uh in our api service and here we need to create a new method in here so i'm going to just call it so static and we can just say delete article and we need to pass article id because according to the id we want to delete that article so we want to return the fetch so uh let me just copy uh so let me just copy all of these codes from here and bring this in this section so what we want to do is in here so first uh so this is our article id and we are going to use delete so instead of put and after this we are not let me remove this from here and even we are not receiving any response in here [Music] okay now we need to open our article list and in here uh now what we want to do is to first import our api service so we can just say import api service from api service and now we can do our deleting processing here so we can just say api service dot delete article and in here we need to pass the article id so article dot id dot then and in the response we want to just do this action okay now let's just test our application so let me just save this and now i can go in here so now i have we will delete this data and now if you see my django admin panel i have this data in here so this will be delete deleted okay now i'm going to click on the delete so nothing is working let me just check where is the problem so i have a two error 404 not found so if i check here so api articles undefined and we're receiving and defines and oh i think errors in here so i need to just uh so let me just make it correct and delete btn article api service that delete article.id.10 and in here we are not we need to use like this okay so props dot delete between article and let me just add a dot cache in here so and here i want to just say console.log error okay now let's refresh the page and now i want to delete this one again we have error delete for for not found and it's undefined okay guys now i have find my mistake that where is the mystic it is and on my button so if you seen here as you can see that in here we are passing article to the method of delete btn and in here we have forgot to add our article in here so let me just add article and now i should not see any uh error in here and also this should be arrow function so delete button yeah now we should not receive any error so let me just refresh the page and now if i click on the delete again delete not found but if i refresh the date uh uh now the data is deleted so you can see that i don't have the data in here let me just click on delete again and if i refresh this this is django now you can see that the data is deleted and it's working let me just add a new article in here and let me just say this is article for deleting this is the description insert article and if i delete this the data is deleted but it's not refreshing on my so you can see that the data is deleted but it's not refreshing in here uh let me just check that why it's not refreshing the page okay guys now it's because in here we are now in this section we are checking the ids now after that we need to just set our articles to this new article so we want to uh refresh our list and we want to just add the new list in here so we can just say set articles and in here we can add new articles so now if i refresh this and in here if i click on the delete so now you can see it's deleted delete it's also deleted now it's working correctly and now let's just add new article this should be deleted this is the description and third article we can delete article and let's for example update our article let me just remove this and if i click on update now you can see that all our crowd operation is working with our react js front end and also django back in now you can see that in the back and then we we have our port and we have git and also we have delete operations we have deleted we have updated the data and after that we have get all the data from the apis you can see that it's we are receiving these actions in the console okay guys now in this part we're going to work in our login and registration system so right now if you see uh everyone can insert article or delete or update articles now by default i want to show a login page and after entering the user credentials i want to show this page so now for this i need to do some routing and so for that i am going to use another library that's called react router dom so now the first thing is i'm going to create a new file a new component and i'm going to just call it login.js and this is a functional component rfce so this is my login page and in here i can just say please login so each one and i can say please login like this so now after this we need to install uh the react router dom library so for that you can just use npm install react router dom and now i'm waiting for the installation okay guys now the package has been installed react router dom and now uh so now what i want to do is to uh open my index.js and i want to create my routing in here so now if you see package.json i have the react router dom in here so now let's just go to the index.js and in here i need to create a component and i can just say so first i need to import so i'm going to just say import route and also browser router from react router dom and now i can create function and i can just say so this should be route not router so route and i'm going to just create router and in here i can just return so i can return browser router and let me just close the browser router and in here i want to use my path in here and i can just say route uh exact path and so if this is uh so for the for example for the index i want to use my login component so i need to just import i've already created so now here i can just say import login from components and this should be logging and i can just leave it for example login okay so now after this we need to add the router function in here instead of app so i'm going to just use router now if you see okay guys now we have error in here it's route not router so i have made a mistake because you can see that we need to use route from the react router dom and so now you can see that i have login in here now so by default if i go to the localhostport3000 i have my login page now i want to create another route for the main articles so that's located in the app so i can just say articles and this should be article and not article this should be app my app component okay so now let's just now if i go to the articles so you can see that i'm seeing my articles and if i go to the login so i'm seeing the login page now let's create our login form so i'm going to just open my login.js and in here i can just say diff class name and i can add my app in here to change the color of my react.js and after that now we can create our uh login form so i'm going to just say this class name and this should be mbp3 close this div and after this we need to create label so label html4 and this is username and after that we can add a class name for this so class name for label let me close the label in here and i can add username so now let's create our input our text field so input type it should be text and i can give a class name so it's a bootstrap class so i'm going to use form control so forum control and also you can give id so it should be username and also we can give a placeholder so we can say please enter username and now if i uh refresh my page or if i see my page you can see that i have username now let's just add uh first i want to add be your tag in here and also i want to add the 2br tag after the login h1 tag so now we have some spaces between these now so this was for the user's name let me just copy uh this and i want to just add one more for the password so let me change this to password and it should be password and the input type is password the class name is form control the id is password and the placeholders please enter password and now you can see we have username and also password let's just add a button and it should be a login button so button class name btn beating primary and we can just say login so now we have a login button in here okay right now if you see it's a simple form from the html so we want to uh add some controls from the react.js so for this what i want to do is to create uh some states so i need to import use statehook so use state and i can just say const username and set a username use a state uh use state and it should be mpt string and i want to just do the same for the password so password and also set password also it should be an empty string now after that i can add the value for this input uh fields so let me just come down in here so first i want to add for the username so i can just add username so now if i see in here i cannot write in here now we need to just add on change for the username so we can say on change and event or e and we can just say set uh username a.target.volume we want to capture the value from the username field so now you can see that i can write in my username let's do the same process for the password so i can just simply copy this and i'm going to paste it in here so let me just come down and i need to change this to password and this should be password set password so set password so now i can write in here and also i can write in my password now let's add an on click for the login button so button on click and i can just say login btn now i need to create this method at the top so i can just say const and it should be an error arrow function so now we need to just open our api service because we want to create our login functionality because we want to send the username and password to our backend api so for this what i want to do is to just copy the i think uh let me just copy the update article from here or let me just copy the census article copy this and after that i want to just paste this in here so now this should be login user so let me change this to login user and i want to send but the body so this time we are going to we don't want to use api articles if you see our backend api so in our api project ul is dot pi so we have a separate url for the authentication so we can just add this in here so let me just add it art the method is post and we don't need this hard coded [Music] authorization and [Music] so body json and also response now let's go to the uh back to the login.js so let me just close some files from here so in here first we need to import our api service so we can say import api service from api service api service dot login user and in here we need to pass the title and also a title sorry not title the username username and also password so because we want to send the username and password and after that we can just say then response and for right now let me just console.log response and also i can catch the error so i can say uh console.log the error so console.log the error now let's test our application so now uh i have my login let me just open my console and in here i can add my uh correct username and password and if i click on the login so you can see that i'm receiving back the token for the that user so now if you see your django main panel for in the token section you can see that this token uh c2 and if you see in here we have c2 so it this token is related to the at this user name and now if you uh go to the network and if you check the art uh you can see that in here you can see that the pass this is the password and this is the username in here that we have okay you can see that after entering my correct username and password it's returning token for me now it means that uh if you see in our uh login dot js it means that the token is stored in the response and you can see that in here if i say a response dot token and now uh if i uh log in so so you can see let me just first refresh this and now if i add my username and password and if i log in you can see that i am receiving back the token in here now if i add for example invalid username and password i will receive a bad request so let me just add something in here and something in here if i log in so you can see that i'm receiving path request and i like this okay so now uh and here i want to use cookies also and also work with the dynamic tokens now i want when the user added their real credentials username and passwords uh i want to save the token as a cookie and after uh for example he closed the browsers or he opened he opens the browser again uh i want that it should be my article page not the login page so i can do this using the cookies i want to save the token as a cookie and the browser of the client so now for this we need to use a library that's called react cookie so first i need to install that you can just use npm install react react cookie so react cookie all right guys now it's installed after this what i want to do is to open my index.hsn and i want to provide the cookie for my all routes now the token for my all routes so now for this what i want to do is uh i can do this at index.js and in here the first thing is that i need to import a cookie's uh provider from and we can say react cookie and in here we can wrap our this uh browser router with the cookie providers so cookie cookies provider and i can wrap this in here like this and after this i can go to the login.js and in here i can use this so first i need to import so in here first i need to import my use cookie so i can just say import i use cookie i use cookies from react cookie and after that in here i can say const so you can just name it whatever so we can just set token and we can use cookies and what we want to do is to name our cookie so you need to pass the name as a string in here so for example i'm going to just say my token and after this now in here instead of console.log we want to just use this set token in here so let me just use set token like this and also uh you need to give a name so we need to also pass the name for this so that is my token so that we have already given in here so now uh if i uh and here if i add so let me just open this and if i go to the uh applications so right now you can see that i don't have any cookie in and if i add the username and password in here now if i click on the login so i am not seeing oh now you can see that we have our uh so this is our token and this is uh uh this is the token that i have saved this as a cookie now this is the cookie section so if i refresh my page you will see that i have this cookie in here this token in here now let me just for example let me remove this let me add another user so that it is registered in my uh django admin panel so if i go to the localhost for the 8000 and if i go to that main so let me just add the username and also password in here and if i log in so in the users so i have some users let me just use this user in here and i can say my user and let me just say my user and if i log in so you can see that i have a token for this user in here okay now i want when the user enters their correct username and password i want to just redirect them to the articles page so now let me just remove this now in my login dot js what i want to do is to import a user story so i can just say import user study from react router dom and after that in here so i can just create so let history and i can just use a study in here and now in here i need to create use effect hook so i need to just import that in here so i can just say use effect and i can use that in here so i can just say use effect and it returns an arrow function and in here i'm going to just say that if we have the token so my token so if i have the token i want to just study say studio.push to the articles now in here i want to say that if i have the token that's my token i want to push the users to the articles and i want to do this based on the token so i need to add token in here so now uh now if i uh add uh for example a username and password in here so for example like this and if i log in click on the login so you can see that i'm redirected to the articles page and you can see that we have the token saved in here now we can insert article so let me just do this and my new article my new description and i can insert the article i can update the article so let me just update this i can say update it and app a datejust and if i click on this so you can see it's updated and i can delete the article so you can see that the article is deleted in here so you can see that i have the token in here now if i go to the login page for example i want to go to the login page you can see that i'm redirecting to the articles because i have the token in here now if i delete this cookie and from here the token and now if i go to the for example uh login page now you can see that i am in the login page now we want to bring some change uh so if you see in our api service dot js the token that we have in here these are uh effects tokens and we have copied these tokens from our uh from here from the tokens that we have manually created so now we need to just convert this to the dynamic token so for this what we need to do is to just copy uh this uh now we have our token and we need to copy that so it's in the login.js so first i need to just copy this from here and paste it in my api service so in the api service so now so i uh now i want to uh so in here if you see we have article id and body and in here we need to also pass another uh parameter that's token like this okay and after that we can change this to the this token so let me just remove the fixed token from here and i can just change this to backticks [Music] so i can add the token in here now we need to do the same for all so we have update article and after that we have insert article we need to just add token in here and we need to just remove this and change this with the token and this is insert article we have delete article and we can just add this in here and for the login user we didn't we don't need to add the token okay now after uh so right now we have converted these to the token uh to the dynamic token after this now we need to first open our form.js and we can see that we need to also update these so in this section so for this first i what i want to do is to from login.js import use cookie so i can just import this in here and after that i can just use this cons token set token in here and myforum.js and after that i can also pass the token in here so uh i have update article and the update article i need to just also add the token with the name that we have so my token we need to do the same for the update article and also insert article like this so this is for for the form.js if we go to the article list i think also we need to do this in here so we need to just add this in here let me just copy this and bring this in here let me just add it in this section and even we don't need this token in here or okay now also we need to just import this react cookie and now we can just remove this also so in here we can just add in the delete we can also add token and we can say my token so now this is done and also i think we need to do the same and not index.js but uh and app.js so let me just remove this index.js yeah now you can see and here we have fetched our data so we can just bring this in the app.js also so app.js and we have our and now instead of fix token we can just uh copy this from here and add this in this section like this so now let me just check this again so i have this token myapp.js and okay after that in the login.js i have this and here we have setted the token and after that in the article list we have changed this so with the token because in the epi service we have changed it we have added a new parameter of the token and also we have in the forum.js this is for update and this is for inserting article and in the api okay now in here we have update article insert article and delete article so now let's just check our app so let me just refresh this and in here i can just add for example i username and password and if i log in so you can see that but i'm receiving an error in here okay guys now it's because because we need to add this cookie name in here so it's my token and now i can just okay now you can see that we are in the article page now let me just remove this and now i can just go to the login so correct the username and password in here so you can see that we have in here and now let's just test this we can update so let me just insert an article science earth article and my article added my article description added so first let me just show you the uh articles in my django administration panel okay so you can see that i have these data in here and this is the last data so now if i insert article so you can see the article is inserted so my article added and now if i check this so you can see that this is the new article now i want to update this so let me just click on the update and let me just say my article updated my description app dated and i can update this so you can see that this is updated and we will see that the same happens in here so update it uh we can remove this data so we can just delete this data the data is deleted from here and if i check here i don't have that data in here so i can for example if you've seen here even though i have more users in here but for two users i have token so for this user and also for this user let's just do for this user and let me just remove these from here now i can go to the login page and in here i can add my user and i can add my password and if i log in so you can see that i have my token in here and i can do the same uh option uh operation with this so first let me just update this so that is uh predated and i can just say uh or let me just update this one and i can just click on the update so you can see that this is updated in this part we want to create our registration uh system and also log out system so right now we can log in and we have learned that how we can create your login now we want to create our registration so as we have developed our back end in and django-rest framework there was uh options for registering users now let's do that uh implement that in the react.js front-end so for this i'm going to open my four uh my login.js so in the login.js up i want to create a state in here and let me just okay now in here i can just say const so we can say is login as login and also set login use state and we want to use true by default okay so now uh at the bottom so in here where we have our login uh i'm going to create another diff class so and here i can just say uh def class name and it should be mbp3 and i can close the diff so in here uh so uh let me just add a beer attack first in here now in here i want to check if is login so if is login is true what i want to do is to just create an h5 tag in here so h5 and i can just say if you don't have account so if you don't have account and i can just say please and in here i can create my button so button uh so let me just close this button here and first i need to just give a class name for this so the class name is btnb for example primary and also after that we can just add an on click so on click and so this should be an arrow function and in here i can just use set login so set login and make this too false like this and in here i can say register so this should be register and so this is the button name and in here we can just say here okay so let me just bring this in here now in the else case what i want to do is to uh to save for example if you have an account we want to just say to log in here now we can just say uh let me just create an h5 tag so h5 and in here i can say if you have account we want to say please and now we need to just add the same button and we want to just change so let's just copy this from here and i can just add it in this section and i need to just bring some change to this so uh for this i can just use login and for this i want to just make it to true and we can say here so now let me just uh refresh my page okay yeah now you can see that if you don't so right now you can see it's login if you don't have account please uh you can see we have login and register now we need to bring some change to this title and also this button so when we want to click click on the register we should see a register in here and please register and when we click on the login we should see login with the login text so first let's just fix the title so in here in this section we have and we can say that if as login is true what you want to do is to say please log in and in the else case we can just say please register and now we can just check this so right now you can see please login in here and we have register button in here so if i click on this so you can see we're receiving a register login register so we are toggling between these now also we need to just change the so when we click on this register we should see a register button so we can just come down where we have our button so and here we have our button and we can just do that and so let me just do it in here so if is login so if it is it's true we want to just say this in here and in the else case what you want to do and just copy this again and this time you want to just say register btn the class name is beating between primary and we can just change this to register and let me just create this register btn so here i can just say const so now right now you can see the register so we have register and register if i click on the login you can see we have login and if i click on the register we have register now let's just do our registration process code in here so first i need to open my api service and in here i'm going to copy login user let me just bring change to this register user and this time it should be epi and users now it's because because in our django rest framework if you see we have a users in here and we have a user view set so in the view set we have a class user view set so now the method is post and we can just say register user method post content type and we are not going to bring any change for this now we can just go back uh to the so login.js in here now in here we can just do our uh registration code so we have created our registration and our api service so now we can just say api service dot register user and we want to post the username and also the password and now dot then and if i say console.log response and also i can just add dot cash error and i can just say console dot lock the error so now so right now we are on register and let me just inspect and go to console so in here let me just add for example new user 2 and i can just add a password in here and now if i click on the register i am receiving errors and if i see my okay i need to save this because i forgot to save this i think the error is from there so now let me just refresh this and if i check in here so let me just say the users and so this is my users you can see that these are the users that i have in here uh now i can just say name user one for example and i can add a password so i need to just click on register to register this so now you can see that i have a new user so username and this is the ids 8 and now if i check my so now you can see that i have new user registered in here and if i click on the tokens you can see that i have a token for this new user now i can uh log in with this uh navy user and password so if i click on the login let me just log in now i'm in here if i check my application so you can see that this is the token 799 and it's the same as this 799 okay now i want when the user register i want to just directly log bring them to the articles page or we can say that we need to just call our login button so now now i'm in here so we need to just uh so in the login.js if you see we have login button so we can just say login login btn so now this time i want to create a user so new user 2 and we can just give the password and if i click so register if i click on the register so now you can see that i am automatically logged in in here and the user is created so this is the token and if we check this place i think uh you can see that we have the new user 2 in here all right guys now let's create our logout button so now uh i want to add another button in here that should be for the log out so now i want to open my app.js so and we have this is for the insert article and i'm going to just copy this and paste it in here so what i want to do is just say log out log out btn and i can just say log out and what i want to uh what i need to do is to create this out function so cons logout btn so now if i see i should see okay now you can see that i have a log out button in here now the log out is so simple uh so we need to just remove the cookie so if we see in here we need to remove the token that is stored in the cookie so if i see the application so we need to just remove this now if you've seen that we have used react cookie so in here we there is set cookie and also you can use remove cookie so what i want to do is to just add remove cookie or whatever you can just call it you can just name it so at the top if you see uh we have just a token in here and we can add for example we cannot set token and also we can just say remove token or cookie whatever you can just use it and now we can just call this in here and our log out button and in here we need to just pass the name of the token that you have so if you see uh in here and uh if i come down so for the remove cookie you need to add the name of the cookie in here also after log out we want to just redirect the users to the login page so for this we want to use we need to use use effect so now let me just copy the code from the login.js so we can just copy this and let me just bring this in the app.js so we can just add it in here so we can just say if not token my token we want to just push that to the login page and now also we need to import this so i can just go to the login.js so we want to just import user story and i can just add it in here and also we need to create let's study and add it in the app.js so now let's just check that it's working or not okay so right now you can see that we have our token here if i click on the log out you can see that we are in here but the token is not let me just refresh this okay the token is removed if i add for example and if i click on the login so now we have with the token in here and if i log out so [Music] now the token is we are logged out from here so it's showing in here but there is no problem if i refresh this you can see that i don't have the token and that's removed now let me just for example navy user 2 so this was the new user that i have registered and if i log in so you can see that we have the token and if i log out and if i refresh you can see that i don't have the token in here uh also you can use window.location in here so for example in here we can just redirect so there are different ways that you can just redirect the page so dot location so i have used this from the react router dom but you can use it like this and so now if i for example if i log in and if i click on the log out so you can see that we are log out you can see that right this time the token is also removed from there so you can just use it like this or you can do it like this and there's no problem so we can just log in and we can just log out and if i refresh you can see that i don't have the token and it is log out in here all functionalities are working we can register a new user so let me just add for example i can just say new user 4 and i can register so the new user 4 is registered now this user can do for example can insert article so article by user 4 description by user 4. and i can insert articles so it's added and i can just update this so user for app dated user for updated and i can just update the article so now you can see that when i am updating so you can see that in here we are receiving put and we are updating and for example you you can delete this so let me just delete this and let's delete it and we have delete operation in here in our backend dpi uh also you can log out so we are logged out

Channel: Parwiz Forogh

Views: 80,880

Rating: 4.9611821 out of 5

Keywords: Django & ReactJS Full Stack [ Python Backend React Frontend ], Django, ReactJS, Python Backend, Full Stack, React Frontend, Django Backend, django and react, django and react tutorial, django and reactjs, learn django and react full stack, full stack web development, learn full stack with django and react, how to connect django with react, django rest, Django & ReactJS Full Stack Course [ Python Backend React Frontend ]

Id: VBqJ0-imSMU

Length: 452min 0sec (27120 seconds)

Published: Sat Jan 02 2021