ReactJS Tutorial For Python Backend Devs [ + Django-React Connection with Axios ]

hello and welcome to this quick react tutorial for backend developers now by no means this is a crash course or anything this is just a tutorial intended to shed the lights on react as a great front end library or framework to work with your backend server in order to create full-fledged web application the reason i'm making this video is that i'm planning to create full stack projects using python frameworks of course as a back-end server and react as the front-end so at least i wanted to leave a quick reference for what is react its internal structure and how different files inside the react app work together okay now with that out of the way let's start so what is react react is a javascript library for building user interfaces this is the official website of react react js.org so you have here the docs tutorial blog community you can search by um by a keyword it has different languages if your mother language or mother tongue is not english okay so english spanish arabic french right polish okay so this is the website of react it's very accessible and you can get started directly and it will guide you to create your um just simple application and see how react works it has a section for react for beginners and also it has advanced guides installation how to create a new react app and so on so react is used to create full stack applications together with a server and later on in this tutorial i will show you how to connect django to react so react creates the visual part of the application and the logic is managed by a server side framework like django you can use also fast api or flask and not necessarily python you can use nest js or express for node.js for example and you have something like the mern stack which is mongodb express react and node.js so if you want to be a full stack developer you can learn the mern stack there is also the mean stack where react is replaced by angular framework by the way react is a library not a framework but the majority say react is a framework so you're free to refer to react as a library or framework that doesn't matter really the main reason actually that a lot called react framework that they compared with big frameworks such as angular which has its own architecture it has its routing system and so on and vue.js as well okay so these are the three main frameworks in the market right now when it comes to front-end development but personally i like to work with django and fast api as a back-end server and react for the front-end because react is really cool it has a lot to offer the ecosystem of react is very big the react community is really helpful and if you have any problems while you're developing your application you'll find a lot of developers will be happy to help and assist with react also you can create single page applications or spa so react is not only used in full stack development but it's also used to create single page applications or spa it's just one page that it's a web application basically it could be a task manager a to-do list a bmi index a loan calculator could be anything the last thing that i would like to say about react before we get started and create our react app is that react is the most demanded front-end technology on the market right now so studying react would definitely do you good especially if you're looking for a front-end developer job or a full-stack developer and i think even being a back-end developer it's very good to understand at least the mechanism through which react or angular or any front-end framework really works from inside and not only from inside but how they are connected to the back-end server okay and this is what we are going to do today later in this video so things that you will need to download um first we need node.js um installed on your computer so if you're working on windows or mac os or linux once you installed node.js you can check it out in your terminal or command prompt so node v and if you get version 13.7 this means that node is properly installed on your computer okay so this is very important because we will need npm or node package manager and we cannot have npm without node all right um also very important to download is react developer tools okay it's a great idea to download the react dev tools in chrome browser and i hope that you are using chrome browser because this is by far the best web browser out there and when you will install the react developer tools you will have the ability to check out the components the state in your react application and so on so let's go ahead and create our first react application now i'm going to use create react app and this is a command line program the prerequisites to work with react is obviously javascript because you cannot work with react without knowing javascript and not only the fundamentals i should say okay you should know the es6 classes higher order functions array functions such as sort filter reduce map we use these functions very often also the error functions things like callbacks promises a sync awaits syntax all of that is very important to have before you jump directly and start creating your react app and as i said the core fundamentals of javascript are very important but you'll need also to know the other stuff alright so let's go ahead and create our first react application there are three ways to create the react app the first is through npx second is through npm and the third is through yarn npx stands for node package execute npm stands for node package manager and yarn i used to work with npm quite a lot so you would do npm inet react app and the name of your application and it starts creating packages and dependencies and everything but now i use npx quite often and if you worked with npm before and installed it globally when you will start creating your app using mpx you will have an error you will have an error telling you that npx does not support any more installing npm globally on your system so before you would do it like mpm install g react app and the name of your application so mpx doesn't support that anymore so in order to create your react application in a very easy way npx create react app and the name of your application and let's call our application front end and the main difference between npx and npm actually is that npx is going to download the most recent create react app release it will run it and then it will remove it from your system and this is great because you will never have an outdated version on your system from create react app and every time you run it you're getting the latest and greatest code available and also you can start building your app directly without having to deal with babel configuration for example and babel is just a transpiler that converts jsx to javascript and it's going to take some time to create the react app from 12 to 14 minutes so i'm gonna pause the video here and get back when it's all done all right so we are almost there all right perfect i said that will take from 12 to 14 minutes well i work on windows and on mac and i can say that when i create a react app on mac it takes less time than it actually takes when i'm working on windows so i don't know depends on the system i guess okay so we have our react application created and in order to start the development server we can run the command npm start so this directly starts development server and it will open the browser and it will be run on localhost and will listen on port 3000 okay so this is npm start now if you want to deploy your application so you will need to run npm run build this takes care of the static assets for production and so on okay also you have npm tests this starts the test runner and npm run eject well this basically shows any hidden dependencies or packages if you want to change the configuration in any of them but really what you should worry about is npm start and npm run build those two commands all right so let's go ahead and type npm start in order to start our development server so i made an error because i need to be inside the directory i need to access front end first and then type the command npm start so cd front end all right so you can see here i'm inside front and now i can type npm start okay it should open now the browser i shouldn't do it manually all right so this is the default page for um react okay this is the default page for your react application so i just um cut the front-end folder i'll just put it here on the desktop because it was created in users so we'll start over so let's go ahead to desktop and to end and let's open that with visual studio code and i really recommend working with visual studio code because it has a lot of tools that can help you in your development and react so you can go ahead and search for these tools so you can type react you will find react es7 redux graphql react native snippets all right in the future when you will be more advanced in react this has a lot of shortcuts that can help you that can make your life easier actually so let's open the terminal and close this one okay and we will run directly npm start it takes some time in windows i really don't know why all right so finally the page finished loading let me show you what we have in package.json so you can see here we have the name of the application is front end it has version private true then we have some dependencies these three first dependencies are for testing react obviously react for the react tools and the react dom which is a virtual dom actually it's not the real dumb in the browser and we have react scripts and the web vitals so the scripts here we have as we said um npm start to start your server npm run build for to create your static assets for deployment for production test for testing and eject just to show the hidden um any dependencies that you want to change their configurations all right so this is package.json we have git ignore so you have already a commit hidden files inside here inside your folder i mean so what it did it made get init get add then get commit so get ignore these are the things that you don't want to include when you make your commit to to your github repository so for example node modules we don't want to include that so it's included here pmp and bunch of other stuff now the potato i mean for the react app is the source folder and kind of the public folder also just i want to show you the index.html but mainly the source folder all right so let's close get ignore and let me explain to you very quickly what's going on here so we have index.js this is actually the main entry point for our react application okay so as you can see we are importing react from react uh reactdom from reactdom um index.cs also um a css file import app from app which i will come to in a second then report web vitals from report web vitals which is this javascript file here okay then next we have react dom with render method and this is one of the most important methods of reactdom so what is it rendering exactly it is rendering the main application so this app which we have imported above here is this app file this app file is actually an app component and you will need to think in react you need to think about everything as a component a button can be a component a header can be a component a footer can be a component a navigation bar can be a component okay an input field anything could be a component in your react application and this is the beauty of react you can really create these small individual components and then collect them together like pieces of lego to form your application not only this but you can use individual components code to reuse them in different projects so if you have for example a sticky nav bar in the top you have created it through a component you can take this exact same code without changing anything in it and just plug it in a different project and it will work just fine okay so this is the beauty of react really back to our story so this function app it returns a component so this is the main parent react component or the root component app right here okay we only have one react app component in your project and it returns what might look like html to you but it's not html it's jsx javascript xml and jsx allows you to write html and also to insert javascript logic inside here so you see this logo right here inside the curly braces this is the spinning react image which is here logo dot svg so in html you can give a diva class for example here we're not allowed to give just class we are allowed to give a class name so dave with a class name of app header with a class name of app header an image with a source and logo this is inserted here this is the logo.svg that's why we have imported it above all right or the class name again right alternative logo edit then source app um wrapped inside code tags and save to reload which is written here then we have a link tag so if i will delete all that and i will save we will have a clean white page right and let's also delete this and we have an error because this functional component or stateless component should return something so let's go ahead and return hello from react all right and we have hello from react so if i want to display two messages for example or let's say any other element let's say button okay let's say click to enter and we'll say we'll get an error and the reason for that is return should return just one element so we should have one parent element and inside that parent element we can include anything else so to fix this problem we can um type div we can take that and wrap it around and save and immediately we have hollow from react and our button so this is very important to know and understand that you cannot um you can adjust without div and return different elements you will get an error so let me add a comment here for you guys so this is called a stateless component or functional component and by the way to create a component in react we can do it through two approaches the first approach which is the stateless or the functional component and the second approach using class-based components or es6 class-based components that's why at the beginning i told you that you should be familiar with es6 classes so what happens after that well this app is being exported so export default app and import it in the index.js which is our main entry point to our react application so again it's being exported here in app.js and imported in index.js then it's included inside the render method and then inject it inside this id this root id and where's actually this idea root well it's in the public folder in index.html below if you will scroll down you will find just one div with one id root so index.js is looking for this div with that truth id and then binding the whole application to the div so what's happening again is inside index.js or let's start from app.js this is the parent component let me write here component or root component this is the root component this is the main component okay inside it we can return different individual components usually we create a folder called components and inside that folder we can create a button component an app a navigation bar component and so on and we can return them inside our app parent component and then what happens we export that app file and we import it inside index.js and then we embed it inside reactdom.trender so we render whatever is being returned here all right from different components and then we inject it inside that root id and it's getting painted inside that div here all right and being displayed in the page so this is the whole story this is how all these files are connected together app index and index.html so what i want to do now is i want to create a component that will return the user's name so let's delete this and let's also delete that we'll have on the white page and let's inside our source folder let's create another folder we'll call it components and inside that we'll create a javascript file and as a general convention to create any individual component we have the first letter of the file name written in capital so we'll say hello dot js now we can declare our components so as i told you there are two syntaxes for this the first is using a stateless component or functional component and the second is using a class-based component okay and this is es6 style but let's start with the functional component first then i will show you the class-based component and both are very easy but before we do that we need to import react from react so we are importing the react class from the react module all right and this is the functional syntax to create a component so let's create a simple function we'll call it hello okay and it doesn't take any inputs or any parameters then we want to return and we will return and we'll hard code our name so h1 you can type your name hello back um nothing appeared yet because we will need to export default hello first this is the first thing we need to do and we need to import it here so import hello from and as components is in the main directory source so uh inside single quotes dot slash components slash and the name of the file which is hello we'll save that but this is not enough we'll need to return it inside our main app component so simply hello like that and we'll close the tag and we will save and directly you will see hello back we can do this differently we can make it more dynamic by using what we call props and props simply is just an attribute so this hello function or hello component can have a props so it can have a name and let's type luke cage for example so the idea here is to see hello luke cage instead of hello back and let's get back to hello and let's here insert props as a parameter okay and instead of back in curly braces like that we will type props dot name and we will save and immediately you will find that react has reacted to the changes that you did and you can change that here as well you can just make look and it has hot reloading you don't have to refresh the page or anything it just immediately changes okay so uh yeah this is the first thing uh let's actually let's make it look caged as it was so this is the first syntax or the first approach using functional component or stateless component let me comment these lines out let's have our class or our second syntax so es6 class based component okay then we will type class which is not class actually it's all prototypes it's just class for me it's just syntactical sugar classes are nothing more than a convenient way to write prototypes but it's just my opinion um hello the the same name as we gave to the function and here we need to extends react dot component okay and components should be in c and we should import it above inside curly braces component like that okay this is for the life cycle and state and everything else so we will render so render method and here we will return inside h1 tags hello and this is not only going to be props.name but this dot props dot name okay and this in javascript uh is the equivalent of self in python it points to this specific object that we want to change so this dot props dot name and we will save and we'll get the same result okay so we'll save again all right we have the same output so congratulations now you know how to render components in your react application using two two different approaches let me show you a very quick example before we go ahead and start working with django and react just to show you that we can have more than one component inside the main root app component so i will create a counter that counts numbers up and down so we'll call it counter dot js so as i told you there are two main ways to create a component or an individual component the first using functional or stateless component and the second using classes or class-based component but actually we can use hooks in functional component so hooks are new to react before react 16.8 all developers were required to write classes to take advantages of some certain react features and you can still use classes but hooks provide better ways to build a component and in my opinion the best approach is to use react hooks because react is in this transitional phase at the moment where they're trying to phase out classes and phase into hooks so all new goods should be written using hooks and i have a blog post by the way on react hooks if you are interested and you want to read it i will leave the link in the description so let's start by importing react as always so we will import react from react module and it will complain now because it's declared but not used but that's fine and here we want to import one very important hooks method called use state use state and i forgot to add a comma here okay i'm not going to write a class-based component but i'm going to write a functional component so i'm going to create a function and i will call it counter and here i want to declare a variable and this might look odd to you at first so const and inside i have a count variable and i have set count variable as well so these two values are inside one const variable and i will assign it to the use date method let's put 0 here let's put 100 here and by the way this is a general convention to have your first value as your variable which is count and the second would be a setter for that variable so we have count then we have set count if you have number then we have set number and so on and what we want to return actually after that if you remember i told you we need to just wrap everything inside one main parent element as you like can be paragraph could be anything so let's have a div okay and inside that let's have for example h2 and here we will have our main count which starts from 100 okay so count like that and let's actually export default counter and we'll go to app.js and let's import it import counter from components and the file is counter alright and let's comment this line out and let's go to our react app and here let's pass our counter we'll save that and we get 100 which is our main count and you will hit f12 okay and you will go to components and this is why i told you that you need to install your chrome devtools for react so in components you will find that we have here our counter which we have set it here uh and if you will click on that you'll find that hooks has a state of 100 okay and if we will change it we'll make it for example 300 we'll save that you'll find click again we'll find that it has been changed all right so let's get back to our code so this is the initial the initial count point zero i want to start it from 100 and let's give it a breaking line and let's have a button okay so this button will will have two buttons actually one will increase the number and the other one will decrease it so inside button i want to have on click attribute so on click and this will be equal to an arrow function which doesn't take any arguments and it will return a callback function set count and this callback function will take the count and add to it let's say 100 and inside the button let's click plus so we'll save that we'll have click plus all right so if we'll click here you'll increase it by 100 let's actually close this all right and also we will need a second button so um instead of plus we will make it minus okay and here we'll type minus okay we'll save that and let's have a breaking line okay let's have another one okay all right so we have 100 click plus and click minus so if we'll click plus this will increase if we'll click minus this will decrease okay and let's have in index.css let's change the background background color to black and let's have color set to aqua and also let's have fun family let's set it to let's set it to sensor all right and as i told you you have different components that could be inside this diff so if i will return look look hello luke cage you'll find that you will have hello luke cage then after our counter all right so next i will show you how to connect the backend server which will be written in django framework to our front end which will be written in react and we will connect both the back end and the front end using a very important tool called axios okay so coming up next so some of the reasons to choose react was django that both react and django are the most popular libraries and frameworks in their respective domains react's spa or single page application optimization plus django's powerful features make it even better so as we'll see now that both django and react parts will be handled separately and this results in cleaner and clear interface between front and back and logic and functions also it's easy to deploy either the front end part or the back end part without redeploying the other so you can deploy the front end without needing to deploy the back end or the opposite okay and now we need to work on two parts so the back end where we're going to create our api using django rest and the front end where we will interact directly with the api using react.js so we're going to create a simple project to write employee's name and his department in the backend that's all it is and then we're going to connect react as our main front end to django server to fetch data and display it on our react application so let me create a folder i will call it react dash django and let's open it with git bash tool and in this project i will work in virtual environment so i will use ppnv and if you don't have it you can pip install in v like that hit enter and it will be installed immediately then once that done we will need a couple of packages so we will need django rest framework package and also we'll need django course headers so let's go ahead and do that not using pip but pip env install django rest frame work and django rest framework is just a toolkit to build our api and also later we will install django course headers um just to handle the server headers required for course course if i remember correctly stands for cross origin resource sharing but i'm not sure and this is to add the course headers which allows your api to be accessed on any other domain so this is the first package that we're installing djangous framework once this done we will go ahead and install the course headers okay perfect so let's go ahead and pip env install django django dash course headers and this won't install it globally on your system but only in your project in your virtual environment all right perfect so let's clear the terminal alright so let's go ahead and create a django project so django admin start project and we'll call it project just for simplicity all right let's go ahead and enter project um project and inside we should have um another project folder and manage.buy so python manage.pi start app and we will call it app simply all right perfect so um let's go ahead and open that with visual studio code so let's go ahead and start working on the modules.pi so here we're going to have our database for our project we'll have two fields only employee name and department so let's create a class so i will call it react and models dot model and the first field is employee this will be equal to models dots char field with maximum length of 30 and the second field is department you can increase it if you want but 200 is very reasonable for a department's name now let's create a file called serializer and we will create it inside our main app so uh just serializer dot py and serializers in general are basically used to convert complex data to native python data types which can then be easily rendered into json which we're going to use and react on the client side so inside serializer i want to import from rest underscore framework import serializers then from models in the current directory i want to import everything because there live our database and i want to create a class called react serializer and create a meta class model is equal to react and our fields equal to inside a list employee and department so this is serializer let's save that file let's close it now let's go to views.pi and here inside views.pi we will create our methods so let's go ahead and import first our packages so from rest framework dot views i want to import the api view from current directory models import that um this all right and from rest framework dot response i want to import response um serializer i want also to import everything and i have a typo here frame work okay and let's create our main class so class i will call it react view and our main parameter is the api the api class main class that we have imported from restframeworks.views okay and here i want to create two methods only the get and post method so get self as first parameter and request of course and let's declare variable call it output and output will be equal to a list and inside that list i have a dictionary then first key is employee and is set to a value of output dot employee okay and also i need a second key which will be the department our second field and this will be set to output dot department and here i want to use a for loop so for each output so for output in react dot objects dot all okay i want to return response passing the output inside as our main argument all right so this is just simply to display the output um the employee and the department after invoking the get method the second method is the post so post also will take self and request and let's declare a variable called serializer which will be equal to and here the data will be equal to request dot data and i want to have a condition so we'll say if serializer dot is valid setting a parameter of phrase exception raise exception and we'll set it to true so if serializer is valid then we will save it so serializer.save and we will return response with the data so serializer dot data so in this post method what we did is we have saved the data by passing the data to react serializer method all right now it's time to define the endpoint of the api which is the url where our client will head to consume data from the server using react and it's generally the place where the resources like the database slave so let's go ahead to urls inside our main project here and let's make some configuration steps so here i need include also from django.com.urls i want to import url also from app dot views i need to import everything all right and i need a path or a main route so path i'm just an empty empty string and i want react view as underscore view method and with the name of just anything you can do anything so by writing this line we have actually set the local host with the port 8000 which is the default port for django to be the end point for our reactview class so this is what we did here now there are some few changes in settings.pi so let's go to settings.pi and the first thing we need to do is we need uh to add in installed apps our main application also i want to add rest framework and course headers so course headers i also want to go to the middleware list here and i want to add course headers dot middleware dot course middleware and also let's create a dictionary so let's put here below so we'll call it rest underscore framework and say default in capital letters default permission classes and this will be set to a list and inside here in small letters say rest underscore framework dot permissions dot allow any and this would be very important because we're going to work with um with react so we'll need this in order to not block the react framework from interacting with django okay also i want to assign a variable we'll call it course underscore origin allow all we'll set it to true okay perfect just a small point about the course headers package that we have installed and imported that this package is used to tell the browser that our web application is running at one origin okay and we will need to access our backend resources from a different origin in this case in our case here in this tutorial from react this will be very useful if you will have more interactivity on your react application so you will enter the name of the employee and the department and you will hit submit we won't do this now but i wanted to write it so you can upgrade this application and add more functionalities to it so this is for more interactivity on the browser itself to allow users to enter their names and department names so just be careful in the serializer.pi it's serializers with an s not serializer okay i forgot an s all right so let's go ahead and open our integrated terminal python manage dot pi so we're going to make migrations now okay and let's go ahead and migrate so migrate okay cool and let's create super user so create super user back at mail.xyz and password anything one two three four five six that's okay all right so super user created successfully congratulations all right so let's go ahead and run the server python manage the pi run server okay local host port 8000 all right perfect so we have our django rest framework and this is because we have imported this jengarest framework package we have our two fields employee and department let's go ahead and type mark as employee department accounting department and post and you'll have here in json format employee mark department accounting okay let's have a second employee let's say for example linda and she works in human resources okay and if we'll make get so we'll have our two employees added to our backend server managed by django all right so i will leave this server opened now let's go ahead and create our front-end side and to do that we will need to need actually get out of this folder projects so we have project only okay i wanted to call this backend because we will have back-end and front-end um that's okay so project is the back-end you know that and now let's go ahead and create react app we'll call it front end right and it's going to take a while so i will pause the video here and i will be back when it's done alright so we have our react application created let's go ahead and enter front end folder and now we need to install a tool called axios axios is the main tool for connecting the back end with the front end and all the requests will be sent to the back end to the server with the help of axios without it there will be no connection between react and django so npm install axios all right and let's go ahead and exit front end and open the main folder react django with visual studio code so we have our front end and back end all right so let's actually uh close the browser and let's from from inside the folder what i want to do is i want to open the back end with bash and the front end i will open it inside visual studio code so python manage stop by run server turn the django server okay here there is no possibility to click on the link so we'll need to do it manually so let's go to the localhost 127 on port 8000 and we still have the same so we will keep our backend server running in the background meanwhile let's go ahead and work on our front-end development so you saw a while ago that we'll need to work mainly with app index and any other component that we might create so first of all let's go ahead and run our development server let's go to front end and npm start okay so it's open uh in the same browser google chrome so we have here our local host on 8000 the back end and we have our front end working or listening on port 3000 okay perfect and let's go ahead and work on our app.js so let me just clear this out and have another div and here we'll say h1 and inside here we'll say for example bb tech company so this is one thing i think it's because of the app css um it's better to be in the middle of the of the page like that right it's okay we'll leave it like that we'll make use of app.css that's okay now we'll need to grab the data from the backend server from our django framework these fields employee department with different names mark linda different departments we need to grab all of that and render it here in our main application so we have a method called componentdid mount and this method is called when the component is rendered and i will show you what i mean in a second so let's go ahead and start working let's close that actually you know what i will use class instead of function so let's delete all of that and let's delete those two lines also we don't need them and let's import axios from axios then i want to create a class so this is a class-based component we will call it app and it extends react.component so we'll create state object and here we'll have details for an empty list and here i will use the component did mount method so component did mount okay so let's declare a variable called data all right and i would use axios dot get and here we want to get our back-end server so on http colon slash slash localhost port 8000 dot then so here i'm using a promise and here we'll take a response as an argument and we want to return data we will assign it to res.data and this dot set state s capital set state and here the details will be set to whatever data we will get all right let's have a semicolon here and here below dot catch if any errors so in case of error we'll have an empty object or you can return a message okay but i will leave it empty then below here we want to render so what we want to render well everything basically so we will return and let's have a header header i don't know why did that header okay so say data generated from django and here let's give it one horizontal line so what we want to do is we want to map each id for each output and we will use an array method called map that's why i told you that you'll need to be aware of the es6 classes array methods so this dot state dot details which is here above which is set to data dot map method and this will take two parameters the first is output and the second is the id and and this will return the output that we should see on the screen so inside here we will have div i will close that div okay and let's have the name of employee in h2 tag and on the department in h3 tag okay so here simply output dot employee and output dot department and let's actually make some changes so let's have a key here with the id okay and let's have another div around all right like this all right and it's still red why it's complaining because react is not defined alright so let's import react from react okay and save and there it is fantastic so data generated from django we have the names here mark accounting so let me maximize this so as you can see both servers are working simultaneously this one is for the back end this one is for the front end so let's open the terminal just to show you uh node okay so both are working in the same time so let's maximize this to see things clearer we have our employee's name department name department and so on we don't have the ability of course to add user or ad employee with his department or her department but as i told you you can add this if you want you can make your research and find out how we can do that how we can add just an input field with submit button now two input fields actually end user can interact with our application but the purpose here is i wanted to show you how we can link both using axios so let's go ahead and enter any other name let's say for example olga department production and we will post okay perfect get request so we have three employees let's go to our front end and let's save or refresh and boom we have olga in production all right guys so that's it for this video i hope it was useful to you and we have seen many things we have seen how we can work with react alone how we can connect django with react and how we can work with multiple servers how we can connect the back end to the front end yeah and definitely react is very big and we have just scratched the surface in this video let me tell you and i will try to create some projects in the future where we can use react as our front end and django or fast api as our backend and then we can connect them together alright so once again thank you very much for watching and if you have any questions please let me know in the comment section below and i will see you in the next videos take it easy

Channel: Bek Brace

Views: 36,042

Keywords:

Id: n2T9rmFmo48

Length: 59min 35sec (3575 seconds)

Published: Sun Feb 07 2021