Reactjs - Making a youtube video fetching app

hey there everyone and welcome back to react.js training now for all those people who are already into the course this is a fun section we are going to design a single app YouTube app in just one video I know the video is going to be a little bit long but we will do it in just one video now for all those people who are watching this in YouTube there is a separate course going on with a full-fledged ten apps along with the react basic so go ahead check that out link is in the description but coming back on to the point before I move on there are a couple of points in here number one point I tried to make this app alive on the YouTube but streaming was really bad so I'm uploading a video for that and this is just a fun app okay point number two this is going to be a no editing nugget shot because I'm just going to be walking you with the experience of how the programmer phase errors problems try to debug them in all of these things okay now a lot of people are going to complain that why why were you not prepared in advance and all these things let me tell you a fact that when we write the code it's okay to have problem that's not end of the world problems will be there what makes you a programmer is how you are able to handle that and solve that problem okay so let's go in here this is our very first boilerplate code which we have generated so many times in case you are not aware of it it's just a the installation part in here install a node module and NPM install - G create react app by the way in case you are new in here make sure that you install it with the administrative permissions on Windows and sudo permissions on a Mac okay and this command will be installed and generate a project hello world just like that I have created YouTube it just gives you a boilerplate code which looks like this then you can run on the terminal NPM start after going into the folder and there we go we are ready okay basics done now let's go in here now let's delete this guy and we will be creating a new folder in here new file basically that will be called as YouTube dot J s again it's in a convention to use the uppercase letter there okay and let's just quickly have import of the act and we need component as well and that all will be coming up from Viet good so far okay and in case you might have already installed a snippet that I've given in the course then things should be breezed by you so you can simply say our comm there it's not like that our comm and there you go you have got a class boilerplate code there and the next thing that we'll be doing is meaning our class which will be calling it as YouTube it's the convention not compulsory to just name the class exactly there but it's good that you follow up this convention and I'll be saying I am from YouTube it'll be the fun way okay and now our job is to import this file into AB dot yes okay so how do we do that it's pretty simple you just call it as import and what you want to import is YouTube and that will be coming up from YouTube ok and don't forget to use a dot slash there semicolon would be nice as well there we go and now in order to get this component what we have to do is call the component ok you must be proving that by now so there we go YouTube make sure it's a self closing tag now by the way what you are seeing in here is GFX it might look like an HTML basically it's HTML but you know technically it's gsx ok and we should be seeing the stuff on a react and I made a typo there I made a typo and it's not form it's from ok and by the way I forgot to export the class as well this things happens no big deal and that's going to be oops default come on right up to default YouTube and things should be good and it says I am from YouTube ok so quickly we have created a component and we have called it in here I would call it a good progress so far let's now move it ahead and talk about more things ok now next thing that I want you to do is go on to YouTube and the search for a very tough name which is really hard to spell but this is it okay and go ahead use any of the video like for example this is the lie search and I tried there but again let's just go and use something like hmm what should we like to use this cat video is nice and lovely we are going to use this okay and I'm going to pause this before I speak loudly in there and what we want in here from here is share and embed and we want this iframe there okay so that basically what we are trying to do in this app is we want to make an automated generated app that fetches the API of the YouTube and brings up everything from the YouTube on our page we will be displaying the top 10 latest upload on our page we don't need to do anything manually it is automatically going to fetch whatever the latest is being uploaded on our web page okay and I'll give you few assignments as well so let's go in here and in my YouTube in this division I wanted this iframe to be there save that and this should be seeing a little promo there good not bad I would say but there are a couple of problems and you might haven't noticed that that's okay it's completely okay to ignore them at first now right-click and go on to the inspect and look into the console you can see 2 warnings are there now what are these warnings here let me just show you it's always good to read the warnings make sure you read it properly it says did you mean frameborder did you mean allow full screen so what it's saying is that the tags that are using frameborder and allow screen since it's not hTML is JSX it has got a little bit different syntax to be in border is capital and allow full and screen so f and s are used in caps save that and let's clear the console hit the reload and things are good now a pretty common mistake and pretty common error to just just escape there I'll just break the line with frameborder and allow screen so that it's it's on just one line it's not one big line going till hand they're good we are happy so far by the way I'm not as much happy hit the CSS in here I know we shouldn't be focusing on CSS in here but hey I cannot be here with this CSS in here so I would be throwing up some CSS not much don't worry and let's use some colors so we will be using flat UI color calm one of my favorite website and let's just use this blue okay we won't be wasting much time in here so background color would be this guy save that how does that look better much much much better I would call that and the let's give this division a couple of things and change that I would like to give this division a class name this YouTube guy this division and make sure you also understand that it's not just the class there in the CSS class is reserved keyword so we need to go to the class name and there we go class name I'll call this as YouTube division YouTube class okay let's go into app dot CSS and define a few rules for YouTube class okay what we should have now first of all we should have some border I think border will be nice let's have two pixel green i know green is not a good word i should be using some hexadecimal but bear with me okay now let's go ahead and green and that would be dashed okay pretty simple border and can you reload that and it's barely visible if i make it red will it be visible and the screen testing it's hard to see these these models let me make it three pixel and I think this should be visible not the best color on the world but since I'm in here I can choose up some color okay I think midnight blue would be good let's just make sure we have some good colors there better better much better don't you think so let's add a few things as well more and let's add a margin of I think it's already centered but we don't need margin zero and auto we don't need it we can work that I would like to add a margin top there and 20 pixels would be good I think look look there we go and yep we are ready to rock and roll with this guy so our CSS part is good now what I want you to do is add a button now obviously I know you might want to just generate all these YouTube videos as soon as the component loads up we will talk about the lifecycle method maybe some other day in case you're in case you're in the course I will give you as an assignment because you have already studied the component lifecycle okay it's nothing much just moving all the files into component did mount or component will know whatever you like okay so let's just do one more thing in here now in the YouTube we want a button there so where should be this button be going okay that's that's the question that's a good question actually and I think we can just move this button just there so let's just have a button close this button and we even say something like a yet YouTube videos get YouTube videos save that how does it look really really bad no big deal and what I would like to do in here is keep this button at the top so I would be adding a new division there just for the styling purposes no big deal and division there and that and move this button at the top there and there we go now it looks good let's just do a few properties on the button as well I know we shouldn't be focusing much number CSS this is not a CSS class but again with some of the things it's okay okay so let's just call the transom button and what we should do on the button first of all there should be some margin and let's just not left margin come on margin from all the sides should be 10 pixels how that stuff works pretty not so good recently okay we should have some internal padding so that the bottom looks bigger and padding would be 10 6 220 pixel I think they should be good let's increase the font size as well 220 pixel just randomly thinking not thinking much there okay and background color should be let's just choose let's just use some good colors okay and I think this carrot will look good and there we go save that how does that look decent decently okay we won't be focusing let's let's just not do much in here so now things are good now what we want to do now comes the fetching part I know this is a long video but bear with me so now what we want to do is mess around with the API is in here okay so this is the API that we are working in here let me zoom there a little bit it's developer google.com slash YouTube / v3 slash Doc's slash search I know that's a big one but that's what we have going back in here you would also need a API key as well which you can get by signing up there I will be giving you my key there don't just misuse that that just for the testing purposes and get your own keys okay and this is kind of an object you will be receiving in here by the way there are a lot of other options in here we are going into the search and overview this is the object we are looking for okay you can work on to a lot of things and if I go in here this is the entire URL that you get in here and we'll be breaking down this URL in here so they just copy this and by the way I'll be I'll be posting down this project on to the github as well so that it becomes good for you now let's just go back in here and try to break down at this URL okay so let's just paste that and paste that I know that's that's a big massive URL okay so notice closely there is an API key there which goes from here to here so this is our API key notice we do have a channel ID as well I have already placed my channel ID you can get any channel ID in here and then it says and part snippet and I D order so all these are variables that you can set up right now we don't need to and it says max result equals 10 so we will be breaking it down into a constants and variables so that if we want to change out anything we can just quickly do that or maybe want to add more components who are responsible for loading legislate 5 videos 10 videos you can just give it a counter there okay so first of all let's break down with API so this is my API so API would be let's just cut it down so this make sure you don't just cut it there it's complete API and I think it's still a ok and yep let's just cut that out and paste it in here ok and next thing that we'll be doing is channel ID so const channel ID and I think channel ID this this is good again we will be making a string out of that channel ID goes from here till the end ok let's just cut that out and there we go channel ID now the last part that we need is how many results you need ok so we're going to have cost result and that should be 10 and we are looking for this guy max result in here ok 10 now let's just try to make our own URL there and we will be making this URL so you'll love this thing so this is going to be our final URL and how we are going to make this is with the backticks ok and these are template string also known as template string but these are much I think it's better way of doing the things so let's just select this from the key equals cut that out and paste it in here now in order when you want to add some variables or constant all you have to do is use a dollar sign and then a pair of parentheses and inside that you can write API so basically it's like copy and pasting this thing in here ok after that we have got an channel ID equals let's just cut that and paste that again and again we need to insert it available as a dollar and this guy looks good now let's just copy channel ID copy that and paste that you're available okay that is good and finally the last part this is again everything is a string till equal cut that and what we will be doing is paste that again now again we need to insert a variable so dollar sign and there we go and we are looking this time for result so copy that and let's just paste it down there I know this is a little bit off the process not the easiest one but yes this is a good process now what you can do you can bring down a channel ID from the user and can set it into a variable later on you can just get instead of ten result the 120 mm get that so this is a good idea to have that now also what I'll be doing I'll be giving you this link again we have just deleted that and paste that and comment that when I'm doing it because maybe you want to do repeat this want to repeat this process again okay so that is why I'm giving it this is good now let's just see if our things are working good there okay so we'll be doing is let's just console.log this so I'll go in here and inside the rendering I want to log this final URL and save that go back in here react app let's just see if this URL that we have made is correct or not and in the console looks okay if I click on that it opens up and gives me the things again so it's always good to check out things constantly so that later on you don't have to spend time in debugging I'll come in that out I don't like much of the console logs there but it's okay so now that our URL is good now what we want to do next step would be now your URL is completely breaker and broken down into the things now what you want to do is fetch the things from the internet and again this is a jason in case you didn't get how the things are looking let me just copy everything from here and there are a lot of editors one of my favorite one is just json editor online in which i can paste these all things and can click on this button and it gives me so you can see in this jason in here is we got an object inside the object we have got lot of other options so in the page info not in the page info in the items we are getting ten arrays there and inside the array we are getting ID inside the heidi we are getting a video ID and this is the unique ID that we are looking for when you watch a video this is the unique ID that we are looking for and then we'll be creating an URL from it and we'll be replacing it with this iframe i know a lot of things we have to do but let's not get ahead of ourselves one thing at a time okay so what would be next step I think the next step would be to create a constructor that would be good approach there because then the things will be coming up from the web api we don't have any methods such to just verify how let me just put it in this way first let me just try to do a constructor so what I'm saying in here is this dot state in the react the one good way of handling the promises or you don't know when the things are going to come up from the web it may take up ten seconds or maybe five second or fraction of second so one good way of doing is this is update the state whenever the data is being coming up and later on do everything from the state okay so in the state what we'll be doing is legit called if as a result YT because it's coming from YouTube and that is going to be an array okay if we will need more variable that's what we have but what I want to do in here is when the data comes from a JSON request I want to store all of that array inside in here or in fact maybe maybe I'll compose an entire link and we'll store that into this Eddie we may need couple of more variables but I'm not pretty sure let's not get ahead of ourself okay so the problem one problem is solved where we are going to keep our data now how we are going to get the data that is interesting we could have loaded up things we could have called a function from component will mount but I'll give you that as an assignment right now I want to run a click method on the button okay so it's going to say on click and when on click is being done I'm going to say this dot clicked if I can type that properly and next thing that we always like to do in this case we can just keep it by calling dot bind in here but I think one good way of doing this is inside the constructor so according to the recent guidelines it's being this is the step that you always have to do you have to bind it with this okay that is good now it's going to throw up an error let me just show you what the error is and the react app this is better the error is shouting because we don't have any method in here that says click so let's create one clicked and there we go and we're going to just log in simply like clicked save that and let's just see in the console log if we can grab that console it's having a problem okay final URL sign but never used we'll use it don't worry buddy and it says clicked okay we are we are making a progress there I know this is being 21 minutes but we are making a progress good progress there okay now let's just try to write things now let me show you how you can fetch the data from API now there are a couple of ways there is one Axios and X cos come on guy exhales in react there we go NPM so this is actually a good way of handling the ATIS you can just simply install the Axios and then simply can import it just like we have imported the YouTube excuse get and then you can handle the promise dot then and dot catch then says good things comes in here Top Cat says bad thing goes in here but there is another way and that is actually H react GS Docs and it's actually inside the networking I think it's inside the react native they have mentioned it a giant in the react native in the networking box yep in the network there we go you might be thinking that this is a react native code but it works really great in in this guys so this is the function that you have to work on that you get a fetch there then you simply say dot response there dot jason then he said dot then respond station and there you go that's it so why don't we do one thing we just copy everything from fetch to this guy and let's just modify it according to over need okay make sense and let's just go in here and paste that everything okay now inside the fetch we don't want to fetch anything movies from the Jason so I'll get rid of this guy we need you and we are going to use final URL okay that's good now final the URL response is going to be responsible Jason this line needs to be there this is kind of a promise you are handling and now let's just remove this line we don't need to return anything as of now I just log what we are getting in response Jason I think this is a good point to test out the things yep because we are making a call there okay and this looks ok let's just see if we can make some progress and open up our inspect and come to log and as I click on this guy there we go pretty good just in one flow and I know this is bad something surprising I don't expect my code to run at the first time ok there we go we get an entire object there and I think if I can zoom it out a little bit and then in the items we get these kinds of arrays and all of these things now next goal is inside the items we want to get into the ID we want to get video ID so this is the next stuff okay let's just do one step at a time so we have console.log there and this is good so far okay now instead of console logging these things what I would like to do in is comment this guy and I would be storing the result into result whitey state there and again whenever you need to store anything into the state variable you don't just do a style YT equals you do this dot set state very important okay so we are going to create a constant there and I'll name it as a result YT kind of a convention you can name it anything and we're going to call response jason dot item okay items by the way in case you forgot that it's items let me just show you here there is the adjacent there we go it's actually items okay make sure you get that one mistake and can lead you with a headache so for two or three us and in the items since it's an array I would like to use the map not a empty and map is responsible for looping through the things okay so we're going to do an object there and this object is not just like that what we want to do is let's just see if we can go into each so this is this map is going to rotate through the entire array and now this object I can go into each individual array it will handle things for me and I can go for dot ID what is next part I forgot that inside the items we have to go in each array and go into ID and we have to get this video ID okay dot video I guess I was capital yep I was in the caps ID okay looks good so far and we want to store this state into this entire thing into our constructor this dog state okay so we are going to save this dot set state okay looks good and we are going to say result YT now by the way this is a shorthand in the es6 you could have also done this like this but i'll just go with a shorter this is shorter this is cleaner okay now this is good and also I would like to show what's there in the result YT so I'll simply call a log beer and I will be calling this dot state dot result YT okay let's see where we are going it's okay to test out the things quite often and let us inspect that and go into log hit this guy okay so we can see that this time and we are logging we are getting an array there this array is having all the IDS there okay and there we go and in fact we did one mistake that we are logging it in here we should be logging it somewhere else so that we can see actually what's coming up and let's just cut that from him here and let's just call this in here rendering save that and as we login notice it's an empty right now as I click on this now it gets filled up so this is good now it's filling up okay that critic so you can see automatically it calls up two times one as soon as the component loads up and one when the state is being changed it's a good thing for us okay making good progress there but I want to do it one more step ahead because obviously I can see this ID where this ID is actually going in the meantime this ID will go in here in our this guy so this is what we have to replace and it would be much better if I just create the entire link in here and store that into the array I think that would be a smarter move but again you can later on replace that with a variable just with the ID but I would like to go with this way okay so on you have to do okay how we are going to move that is copied this from embedded copy that and we are obviously storing the things into this array with the single fat arrow function and I'd like to put a double quotes there paste that in here add a plus okay so all I'm doing is not just during the last ID I'm moving I'm making entire link with just formatting there and then storing that let's just save that and quickly show you that previously it was this guy and now as I get youtube notice I'm having a big array there with the links being made up okay very quickly we have made up a link and I think it's good progress okay so now things are in our final this dot state and we need to somehow call these things okay so again map function is going to be useful for us because it's an array and we are going to do of the things like that and I think rest of the code looks good so far and now let's just see where we want to do the things I think we should be doing the things in this guy okay in order to do these things you have to use curly braces okay now after the curly braces we are going to say this dot state to access the state and we are going to use result YT so now we are accessing the era's result YT good let's just use a map not E&P come on and again this rotates through the entire array and you can use two things in here the one is going to be the links let me use this guy because these let me just show you you can use one variable as well but bear with me just for a second and there we go now what I am trying to do in here is that already you can get everything from the link just like we have got everything from the object but there is one more variable that you need to pass on there there is the eye and this eye holds the unique index value of that array and kind of a react just complains when you don't provide this as a value okay let me just don't get ahead of ourselves we will talk about that later on okay and now let's just log if we can log the links okay link and there we go and will it be working and will it be working no because we are not calling it in here okay that is good that is okay and what I want to do is now this is good this is fine I want to create a variable there and what we can do is let's just call this s war frame okay call it anything and inside this okay what I want to do okay now it would be good if I just move this because otherwise everything will merge out in just one division so let me move this off my code outside this division now it's better and now this frame will have an iframe so I'll cut this out oops command Z I need all of it and in fact I can just remove these line breaks that I've made their frame border is good I wanted all of this in one line and there we go looks good now I can just cut that out and can assign it to my variable now only thing that I'll be doing in here oops and let me just let me just cut that out as well I know there is a little bit formatting going on but be here with me so all I want to do is now I do have an access of this link so I'll be replacing this SRC guy with my available link okay so how I can do that is really simple I have to delete this and I have to use curly braces and I have to call it link okay looks good so far and now what I want to do is I want to get this YouTube Division as well so I'll cut this out so in every loop I am producing a new division now okay I hope you get that pretty easy cut that it's all about formatting there so what I'm doing whenever the loop just generates there I'm I'm generating a new division there I could have generated just a frame frame frame there but it would be inside a giant division and they would be messy and clumsy NIT when I create an entire division since the division is a block level element and it's going to be simply doing a block block block there okay so I'm throwing out a frame there now the only thing that I have to do and a lot of people just mess around with there let me just do this error first of all because I know a lot of you might be spending a lot of time in here with this error and you might be thinking hey frame is now ready all you have to do is use this guy and simply say this dot frame so we are just printing out our variable and since our variable is holding everything it should be working now let me show you a quick magic there and by the way the thing I was talking about it complains in here as you reload a lot of complaints are there that frame is assigned but values never used and expected to return a value and function all this let me just show you what it means and first of all it's inside where should I put it inside the frame actually this is the guy key I was talking about just kind of a formatting that you have to do this I needs to go in here otherwise it just shouts okay and you can see as you click on the get YouTube nothing happens in here although your things are loading up your links are displayed with nothing is this is because this map function needs to return something okay now here we are not returning anything because we don't need to we just want to set the state and that's it we have done otherwise most of the time when you want to throw it as some values you need to use return so use return and just throw it back save that ok let's just see get YouTube videos and there we go other videos are popping up ok we do have some problems and eachother fan arrays in a traitor should have a unique key c'mon I have give you a unique key what we want and in Div YouTube okay you want that into the diff I think so let's just cut that out and paste it inside the division you want a division you get it in division and let's clear that if it is happy looks happy looks happy and there we go let's just have a final look I know this is being all over a 30 minute video but hey we are making a progress and we have we have created a pretty damn cool app and there we go now if I reload and this guy doesn't do anything when I click on that it runs my function there and call up the latest 10 videos in here now let me show you why we have done an extra step in the URL let's just say you you said hey I don't need 10 10 is too big I just need five you can just call it a 5 there you just click there and you get only 5 videos ok so that's an advantage maybe later on you want that I want to create another component from which I can get the value that how many videos user need there and I want to assign a value there and obviously now the control is in the users hand and he can actually decide whether he wants to go you want some another channel ID there go ahead put their channel ID I would recommend my channel ID by the way but again if you need any other channel ID you can just go in there you want let us say 20 hi no problem at all it's going to fetch you too many videos within no time and there we go there we go a lot of videos nice awesome videos that teaches you a lot very active on your YouTube guys ok and I think this is it for this and obviously we can move it ahead but let me give you a few assignments as well whether are you you are on the YouTube or maybe inside the course wherever you are I would love to give you assignment and please let me show me what you have got in the assignment okay now your job is really simple so far we have been running this entire code with a click of a button now I want you to modify this entire project in somehow and manner that we don't need to click any values as soon as the component loads up on the screen these all values should be fetched up ok hint you will need a component life cycle method ok and just remove this button we want everything to be automatic that's assignment number one now assignment number two is really simple as well now as soon as you do this once the component load is the second assignment is make a input tag in here which should have numeric values user can just click click click and can increase the values and based on what the current value is these values should be load up now again you need to change the states and everything based on what the value is you will be doing something on value change in these things I know you can do this if you have been into the course and you have completed that and reach to this project I am pretty sure everybody will be able to that within a brief this shouldn't be a tough job for you so this is our cool app in the react.js that we have built up of course I'll be pushing up this code on to the github you'll find a link in the description if are you on the YouTube if you are in the code get access to the official ripple on the github you can just download it and that's it for this video thank you for staying for 40 minutes in case you think that this video is awesome and it can be helpful for somebody don't forget to share about it subscribe to the channel as well and keep enjoying the cursive

Channel: Hitesh Choudhary

Views: 32,214

Rating: 4.7655678 out of 5

Keywords: Programming, computers, code, hacking, information, Security, iOS, iPhone, udemy, online-courses, coupons, free-coupons, udemy-coupons, udemy-courses, android, iphone, reactjs, web-development, react course, react tutorials, react course udemy, react course coupon

Id: c6t3bW7kx6E

Length: 39min 6sec (2346 seconds)

Published: Mon Mar 27 2017