Build and Deploy a YouTube Clone Application Using React

Key Takeaways

[Music] hello everyone and welcome to another video this video is quite special today we are going to build a whole react application from scratch this video is for anyone wanting to learn and advance in react by creating a real project from scratch building this project will solidify your knowledge of all the main concepts of react this project will include working with components project structure lifecycle methods state management passing props from parent to child components API requests and much more this video is suitable for everyone who is just starting with react and for those that already know quite a bit but want to improve their knowledge so as you can see right here we are going to build a YouTube clone application all of the data will be live fetched from real YouTube API so these are real videos and you can play them right here let's take a look at the finished product we are going to build a YouTube clone application that is going to fetch real data from YouTube API so as you can see right here we have one big video and we have five videos on the side you can play this video in iframe right here and then you can choose from any of the other videos right here by clicking on it it will display all right here and then you can play it above is the search bar so you can search for any term you want Lamas are cool so let's check for llamas and as you can see right here we got here just the videos you can open it right here and then you can play it or you can just open it in YouTube by clicking right here so simple as that you can search for terms you can display them right here here we have five little cards and when you click on them you get the video so that's it this video is special because in this little project you can learn quite a lot of important concepts in react as I mentioned we'll be working with project structure also passing props from child components or parent components to child so as you can see here we are passed all the data from this little item right here to the main iframe right here we are also going to learn about methods so right here we have one handle change method and we need to put all of this info in the state and later send it somewhere on the API to catch all the data from these videos so as I said quite a lot of important concepts let's not stall anymore and let's get straight to the coding we are going to start with a clean directory right here so we can start from the bare beginning Visual Studio code has built in terminal right here you can visit it by going view and then terminal right here but you can also use any other terminal like command prompt on Windows and terminal on Mac so let's first create react app so we are going to use a boilerplate react application you need to have create react app so create react app installed globally on your device so you can use it as a method you need to have create react app installed globally on the device so let's do NPM I and then - g4 global and create react app this will install create react app globally on your device so then you can call it and create as many react projects as you want to use create react app if you don't already have it you need to install it globally on your device so you can run npm i - g for global create create react app this will install create react up globally on our device so you can create as many react projects as you'd like important thing that if you're on a mac you'll need to add sudo on beginning and then you'll need to type your password I am NOT going to do that since I already have it installed you can do that and then we can start by typing create react app and then just dot slash sits since we are already in the directory we want our project to be if you are not in the directory you can do it like this so YouTube API this will create a new directory for you but we are already on the you babyís directory so we are not going to do that now as you can see right here create react create react tab is going to start creating our initial boilerplate project structure right here for us we are going to wait for that and then we'll be right here okay now that everything is completely okay now that everything is successfully set up we need to install our necessary dependencies and the dependencies we are going to use for this video are Axios so we are going to run NPM I there's there save Axios and we are also going to use material UI so we can type material a - UI + /r and while that installs we can head on to the browser and check what material UI has to offer so material UI getting started guide let's see so what is material ey react components for faster and easier web development build your own design system or start with material design basically material UI has freed up rebuilt pre-styled components that you can use so we don't have to spend a lot of time thinking about designing things we can just go them and we can use predefined material UI components such as button for example or a navbar or something like that so we immediately get good looking code everything is styled with material design in mind so it follows the patterns of material design we can check some of the components right here so we can go under component it has a container system so everything can be nice and contained also a grid system so when we have those cards we can use the grid system and it also has some things like buttons as you can see here no need to style them we can just call this button right here that we are going to import from a material UI there are no prerequisites to this I am going to show you how to do everything how to import it how to use it and going to get to know material UI better so you can use it in your own applications so let's get back to our code and this has installed correctly we can now run NPM start to see if our project will run correctly in the browser while that loads we can just clean this project structure so we are going to remove SRC directory fully and we are going to create a new one there is no need for all that boilerplate code right here inside of here we can also remove our favicon and our manifest since we are not going to need it inside of our SRC directory we can simply create an index that is and inside of that index that is we are going to have import react from react also we are going to have import to react Dom from react Dom this is just one file that basically sets up your applications so it renders that application in a certain route of your HTML document so we are going to import app which doesn't exist yet from that slash app we are going to place it right there and then with this command react on that render we are going to use this app right here and the second property to our render function is document that query selector and we are going to target our route right here so let's explain what that means but first let's just create our app component so app the J's so we don't get an error here in here we are just going to create a simple react application so we are going to do the same thing once again by typing import react from react and just below we are going to type class app extends react that component and we need to have a render function and then we need to have a return statement inside of it just like this in here we can return our code so for now we are just going to create return one simple heading which will say you tube clone app and now we need to expert it by typing export default app okay so let's review what we just did right here in here we created a class of app and this app has render and return function as all react classes have components in react can be defined in two different ways one is class-based component and the other one is functional component this component has access to the state and most of the smart so-called components need to be class-based so they have a return statement and they also have lifecycle methods and they manage the state but in react we also have so called dummy components and these are basically function based components so we can create this app we're just going to comment it right here just like this Const app is equal to an error function and then it returns something like h1 YouTube clone app just like this we need to have a return statement and this will basically output the same code this is okay for now but when we add additional logic this will not be enough so sometimes we need to translate this function based components to class based ones so let's remove this for now and uncomment this and now this component is being imported into our index pages we are getting it right here and react Dom is going to render our app component inside of our root root is basically a div with an ID we can check it right here so if we go into index.html we can see that we have in the body just one single div with ID root so it's completely empty all of our application is going to be inside of this just because we imported our app that is right here now we can get back to our browser and see how it looks we refresh and we get YouTube blown up so we do not ever need to change this index.html and react we will just forget it closed this public folder and that's it we're just going to use this SRC every other component that we create is going to be inside components folder and we're just going to import it into the app and app is simply going to display to the index and we are going to get it right away so now we got this basic project structure done and let's move to creating real components that are actually going to do something and just under the SRC folder we are going to create a new folder that will be called API inside of here we will have only one file called YouTube jeaious and inside of here we will be using Axios so we need to import Axios from Axios we previously installed it and we can check whether it is installed by going to package the JSON and seeing it under the dependencies right here now we can use this Axios to make a request to the YouTube API but we are not going to make a request here we're just going to export our function that is going to make a request so export default Axios that create and you may never seen this we are not actually using access that get but we're just using axes that create that is going to help us make easier get requests later we use that because in here we can specify the base URL and we can also specify our params so params are something that you have after the base URL but let's check the YouTube API in the Chrome browser so inside of here it is YouTube v3 slash getting started I will leave the link in the description and in here you have the overview for the API so before you start you need a Google account to access your API console and you need an API key you need to create a project in Google developers console and opt credentials and then after you create the project you need to go to API console and enable this API that's basically it so create Google account create project console that's developers.google.com and inside of here this is your YouTube app dashboard so inside of here you are going to do enable api's and services and you're going to choose YouTube and YouTube data API version 3 inside of here you need to enable it and get the API key for this specific API you can do that by going into credentials right here afterwards you're going to go back to your application and we're just going to use this basic URL the base URL is HTTP and then www.google.com/mapmaker x' so it looks something like this for example we need a bit key so it would be a P key equal to some numbers and then you also have for example a search query equal to I don't know llamas as we saw before and stuff like that but this makes our URL unreadable and Axios provides us with a way to do it right here so if you type part snippet right here it is the same as typing right here part equals snippet so just basically a cleaner syntax this part snippet you can find it in the API documentation basically it means that it is going to return our videos and also we can specify another parameter which will be max results and that will specify to five so we don't fetch a hundred videos we're just going to fetch five and inside of here you'll need to paste your a Aiki so for now I'm not going to paste it you can just paste it here I'm going to do that later when I close this file so we are not going to use it anymore but basically that is it for this file inside of here when you paste your key that is going to be it your axials request is created and you can successfully call it to get a five videos for your search that's it so right now I'm going to paste my key inside of here and I'll see you in the next file now we can create the basics of our application inside of our app that is so everything that we write will be inside of here and then all the specific components we will write it inside of here so let's do it first let's import all the components that we are going to use from material UI core so import and then curly braces grid from and then add material UI and then /or that's it the grid is the only component that we are going to use in this component now inside of here we also can import our YouTube so import YouTube from and then that slash API slash YouTube now we have a reference to our axials instance we can call later notice that here we have curly braces and here we don't that simply means that this is not a default X export and that this one is so inside of API be setted expert default that means that there is simply one export and it is that YouTube this material ui core has a lot of stuff so we need to specify exactly one we want to fetch and in this case we are fetching grid so now let's create our initial structure of our app that is inside of here we are going to have a grid and that grid is going to be a type of container so we are going to container and we are going to add spacing of 16 now first thing I'd like to mention is that you do not need to know everything about material UI so if you go back and we go into our material UI and we check for components and we check for grid inside of here you can see all the stuff that I'm going to type but there are no need to go into that if you're not interested in learning material UI right now you can just copy what I type and that is simply and purely for the styling but if you want to learn material UI which is really cool way to display data in a nice way in react I can create a whole separate video on ethereal UI so if you're interested just let me know another thing I'd like to mention is that in this video we will do styling with inline CSS now this isn't usually a good practice because when you have a lot of styling it really makes your files unreadable and it is a better way to do them directly in separate CSS files but for this video since we have little to no styling just a few lines we are going to do it in line to save time okay with that said let's move on further with creating our app that is inside of here we are just going to add justify which is going to be equal to center simply means that our grid will be centered inside that grid we are just going to have another grid this time it is going to be a type of item and XS is going to be equal to 11 basically there are 12 spaces in material UI in grid as you can see right here if we specify 12 it just it is going to take full width 6 is going to take half and 3 is going to take 1/4 of the full width so let's make it 12 to use full width and now we are going to do another grid this may look weird but it is completely doable which is also going to be a type of container so container and we'll have a spacing of 16 in that grid we are going to have a search bar so we are going to type grid because we need another grid item and that is going to be type of item with XS being equal to 12 and inside of here we are not going to type anything right now but inside of here we have our search bar so we are going to type search bar when you create a component for the search bar it is going to go in here now we are going to have another grid just below this one and it is going to be also a type of item and its size is going to be 8 with that said we need another grid to fill this for left out spaces and it is going to be in here now in here we will have our video detail which is also going to be a separate component and inside of here we are going to have our video list which will be all the other four or five remaining videos to choose from if you're wondering how to do comments in react you use it with this syntax or just simply use command /to comment or uncommon something out that's basically it our whole structure is done now this component is going to manage our state is going to display our videos is going to import all the other components so now let's create a placeholder for importing those components we are going to import not defaulting imports so we are going to import and that curly braces search bar those component don't exist yet but we are going to create them just now video list and video detail from that / components we are going to create them in here that's it this is another huge trick people usually import stuff like this so I'll show you the long way and why why is it not a correct way to do it so people usually do it like this components search and then they do it components with the oldest and also components we had video video detail so in here we have three lines they're completely viable but I will now show you a simple quick way to make it one line as we saw before so let's create those dummy components we're going to go into components and create a new file we are going to have a search bar is also video list address and also video detail that is okay now inside of here we need to import them and we are doing just that so if we create in component we are going to do search first so if we create a simple react component we need to have our search as a class based component because it is going to be managing search term State so we're going to do everything that we are used to import react from react and then we are going to use our class we are going to name its search bar and then extends react that component capital C and then we are going to have our render and return for now we are only going to return our h1 saying this is a search bar component okay and now we are going to do export default search bar okay this is an example of a class-based component we need to have it as a class-based component because in here we will be managing state so we are going to have something like state equals two we will have a search term which which is going to be empty string at the beginning and then we are going to use state modifiers to modify our state they on a search component that we are going to have right in here but now on the contrary we have something like video detail and video detail is simply going to be a dummy functional component so we're going to do the same thing at the beginning so import react from react but inside of here we are going to have Const video detail is equal to and it is a simple arrow function and inside of here we can type return and return h1 this is a video detail component ok we need to spell it correctly and we'll do export default video detail so I've created this boilerplate for these two components just to show you how we can import them correctly so now if we get back to our app that is and we comment this out because we imported only these two now you can see we are importing search bar from that slash components so that's inside of here slash search bar and we are here getting our full component right here and that works completely well so if we uncomment this out and video detail and search bar and actually do them as a component so we're going to have a search bar and we are going to have our video detail since we aren't going to have anything inside of them for now we can simply import them as a self closing tags so we are going to remove this and we are going to add a closing tag to them and the same things goes for this component so we are going to remove this and add this ok now what do we expect to see we expect to see this is our search bar and this is there this is our video detail component but before let's run NPM start and we will just now see that in the browser ok there there is one thing that I left purposely here and you can see right here we have clearly braces and if you remember correctly inside of here we have an expert default expert default does not need curly braces so we're just going to remove them right here and I hope you notice that and now we can visit our browser at localhost 3000 and now you can see that both of our components are being imported right here that is great but now I'd like to show you the quicker way so imagine if we had like 10 or 20 components right here it would take 10 to 20 lines of just writing import statements but what we can do is create an indexed Egeus inside of our components folder export and then curly braces default as search bar this is just the name we want it to have and then from that slash search bar so we are doing everything in one single file we can copy this line and in here we can type video detail ok right now we can get back to our app that is and we can simply import all of this from just one single location so it will be in that slash components when you have index files you do not have to specify them like this index files are special because if you just want to have something from the components folder and you put it inside of the index file you do not need to specify it like this you can just write components so now we are going to turn this from a default expert to a non-default expert and in here we are going to get both video detail and search bar okay I was just messing with one little mistake here I misspelled search right here or right here now that everything is correct we are simply getting all the components right back so if we get back and refresh you can see that we get both components this is really an awesome tip and a huge practice that is being used in react because react is really modular and this helps you do that you can simply add or remove an their component like this and simply import them all in one line okay so now that that is done we have created all project structure and we have two components so let's start working on those components we will start with search and inside of here we are going to first import everything that we are going to use from our material UI core and that is going to be our paper which is basically erase div and a text field so from and then add material UI 4 ok now we are going to have a paper so as I said you don't need to worry about what things are and inside of here we are going to have form inside the form we are going to have one text field that text field is going to be of full width and it is going to have a label equal to search dot dot dot and now on the paper let's add elevation of 6 and let's add a style of padding equal to 25 pixels so this is just a set up so it looks nice now we can check how that looks in the browser as you can see we have a nice long search bar right at the top now we can get back and we need to add our event handlers so let's do just that on submit on the forum is going to call this that handles submit so we are going to have a special method for handling our form submit and in here on the text field we can also write it as a self closing tag because we are not going to have anything inside of it inside of here we can also add some methods we can add an own change method this is a really important method in react it handles input changes and changes the state based on these changes so we are going to call this that handle change when when the unchanged eventlistener is called on this text field so let's do just that there is an easy way in react usually you have to bind all of your functions so we're going to go to react binding and inside of here I'll show you a way how do we need to bind our functions so in react when you add a method on our class so handle click for example and declare it as a normal function all the functions have a scope and have their own base statement like this and this isn't going to be referring to our class which it should and because of that we need to bind this to our class now there is a simple workaround around this and it makes you not add any unnecessary code we can simply do it like this handle change and we can declare it as an arrow function error functions are special because they do not have their own disk so simply this will refer to the class and not to D this in this function ok if that's not too confusing let's go ahead so inside of here we are going to set state so set state is a really important method in react it simply sets the state this exact object right here and makes react components know what's the current state of some property in the state object so you declare it like this you call it like a function and provide an object in here we specify what we want to change so we want to change our search term and we are going to do it like this handle change method accepts one value and it is the event so we are going to have event here and then the value of our input is going to be hidden inside of our event that target that value first we are going to comment this out and simply console dot log our event that target that menu so you can see exactly what we are getting back on our unchanged Fox function so we are going to go back to the browser and back to our application and we are going to open our console by going to inspect right here and opening our console we are going to remove this errors right here and let's see so when we type something we expect to get back our search term so let's type YouTube video as you can see here as we type one letter we get the full search term back so now when we know that our search term is stored right here we can remove this and simply set our search term equal to event that target that value that's it this function will update our search term in the state since we have only one return statement right here we can also type it like this in one line it will do the same thing okay and now we can write our handle submit function we are also going to like write it like an error function and inside of here we are going to fetch our search term from the state so this is another huge thing in react it's called the structuring it was brought in in es6 to the java script and it majorly changed the way that we write Java Script so this line right here if you have never heard of the structuring basically takes in the search term from this that state let's say we have a lot of values so we have value one value to value three and a lot of values every time that we want to do something with those values if we didn't have this destructuring we would need to do something like this that state that search term or this that state that value this that state that value one as you can see with only three values this gets quite repetitive but if we declare it like this and we simply destructor the states to use the search term we can simply call it like this we can remove all of this stuff right here and we can only call it like this much much much cleaner and much less cold a repetition we don't actually have values 1 & 2 so we are going to delete that and we have only our search term I hope I proved you how the structuring in react is really important and now the question is what are we going to do with this search term we are going to let it move from our search bar component to our app that is component because we need to have it right here so inside of our app that is we are going to create a new property on our search bar called on Form submit and inside of here we are going to have another function called handle submit this is going to be a handle submit for our app - yes so this may look a bit weird for now but just hang on so basically with these dead props in this component will be able to access our own form submit and we will immediately transfer our state our search term to our app the GS component with this property so let's get back to our search bar and below this that state we can call these dad props and the structure our property so we called it own form submit and we are going to get exactly that so we're going to get own form submit and now with the search term we are going to write on form submit and we are going to provide our search term so there is only one more line that we are going to need basically all the forms in HTML or react or or any other web development framework by default refresh the page so if you type something here like YouTube and press Enter it is going to refresh basically in react we never want to have a full page refresh we just want to have something happening on our components so we never want to have to refresh a react applications so we can do that easily by typing this that by typing event also we need to fetch that even here like we did right here event that prevent default this will prevent the default behavior of a browser refresh and if we get back and refresh if you type YouTube and press enter okay that didn't go quite as planned but we are going to finish this whole form submission right here maybe that has to do something with this refresh and then we'll try to fix it this is the main part of building applications in react you go through them and you fix mistakes as you go so let's go to our own form submit and let's see how we can fetch this data inside of our app dodge a yes so right now inside of our search bar true this props will be providing data to our own form submit so if you get back to our app - yes in here we have our own form submit and we are going to write this function right here when we write this it may be a bit more clear what we are exactly calling right here so this function doesn't exist yet we are just going to create it and then it is going to come through these props so sorry if I went a bit faster right there so inside of here just above the render function we are going to have a handle submit and it is also going to be an error function and as we can right now see clearer this handle submit or own form submit in our search bar has a parameter and the parameter is indeed a search term so we are going to have that parameter right here so we can use it also since we are going to fetch some data from the YouTube API this function needs to be asynchronous if you've never heard of a synchronicity in JavaScript I have a great tutorial with another project where we only use async await to fetch real data basically it stops the execution of the code until something is fetched so if you haven't checked it out I will link it in the description but now let's continue so we'll have a response from the YouTube API we are finally getting some things to happen and inside of here since we are inside of the async function so we are going to use evade now we are finally going to call our YouTube API so YouTube that get this is basically an axial instance of a fetch so we are going to call YouTube that get if you remember this YouTube is coming from that slash API slash YouTube and this is our Axios that create so our base URL plus all the parameters and we are simply going to do it like this search which is basically a continuation of base URL so everything that we had under base URL plus or forward slash search and then we are going to have our parameters so we are going to destructure them and YouTube API uses it as cue so basically cue is query I guess and it is going to be our search term so you will use it like this and it is not a capital S so search term right here I need to refactor this ok now we are getting YouTube that get forward slash search and we are passing in one parameter we specified which is basically a search term and window and we need to put it under queue because it is query and it is default for YouTube API right here we can console that log our responses or response rather and see what do we indeed get so now let's recapitulate we have this handle submit function and we are providing this handle submit on to our search bar we're going to go into our search bar we now have access to this own form submit through this that drops because we have passed it and now we can use we can call this own form submit and provide our search term that we are getting from the state I hope everything is a bit clearer right now so right now if you get back and refresh and open our console before we check what we get back from the you baby I let's solve these warnings right here because that doesn't look good basically it says that material UI doesn't want a spacing of 16 so we are going to go back and change this from 16 to 10 right here and see what we get okay now that warning is gone and we need to check our manifest since we deleted our manifest uh we probably have it still specified right here and we can also remove that so we get rid of the warning and now there are no warnings and we are ready to do a search term we are going to type YouTube and press Enter okay we are back in here after spent a long time debugging this problem with this YouTube API I figured that the problem was in Axios so it looks like the time when I was building this project myself the Axios version changed and they changed something regarding the parameters now these parameters are not correctly passing toward our axioms that get or YouTube that get as we created it right here so we need to use them explicitly in our call so we are going to copy these parameters right here and we are going to go back to our app data yes and now we are going to paste them right here so we are going to create YouTube that get and then we are going to have search so that is going to be V 3 and forward slash search and all the parameters are going to be specified in the object as a second parameter to our YouTube that get I spent quite some time now trying to fix this issue with Axios but it looks like we just need to pass our parameters right here I'm going to use my real API key right here but it is going to be closed after this video so it doesn't matter use your own and now if we have this working right here that should be finally working we also need to specify our Q as a query and that is our search term which is coming from our search term come and so now we are finally set up well it's not finally for you it was immediately for you I just spent like 10 or 20 minutes debugging this problem but that happens often in development so let's finally get back to our component as you can see here I was checking our requests but now if we go within the console and we type YouTube we finally get back our data in here under the data and then under items we have all of our five videos so let's narrow down our search you're just going to console that log response that data that items and if we go back refresh type something else again so YouTube press ENTER now we get a clear array with five objects every object has an e-tag an ID and everything is inside of this snippet so every object has a snippet of channel ID channel title description live broadcast content publish that and we also have thumbnails so that is really great now we have all the data necessary to create our YouTube iframe and YouTube thumbnails so if we go back now we can set the state with this data so we will have two state properties in this app main component so we are going to have state is equal to an object and first will be videos so at the beginning videos will be an empty array and we also have selected video which we are going to use later and that is first going to be set to now so now we need to set state will use this - set state and we are going to set the state of videos to response that data that items as we saw right now and we are going to set the selected video to response that data that items and going to pick the first video of the whole search so that's basically it for this handle submit now we have this data and we can manage it so inside of the video detail we can now pass these videos or these search terms and actually display them so let's do just that right now we can provide our component called video detail a property called video and that is going to be our selected video so we are simply going to pass this that state that selected video but as we learn before this structuring helped us quite a lot so we can use Const and then curly braces selected video equals this that state and now we can remove this that state from here now as we learned if we go inside of the video detail we will have property called video and it will have all the data for this video we can come inside of the video detail and we can start creating it so as before we are going to import all the necessary stuff from our material UI it is going to be paper and typography and we are going to import it from add material you like or oh and we can start creating it so as we learned in class based components you can access the properties or props um by going into the dis dad props so class based component have the on from some bit as we passed it right here they have access to it under this that props that name so it is on form submit and in the functional based components we have them under props so we have one object which is props and then we can call it and do something like props that video as if I passed it but using the destructuring we can simply de structure this props and take out all the necessary properties so we can simply do it like this and now we have acts to our video so what are we going to return in here we are going to return react that fragment which is basically an empty div because we need to have elements contained in one div we have not we cannot have ejected elements being returned and first we are going to have a paper and just below that we are going to have another paper both are going to have an elevation of six and first one is going to have styling of height which is going to be equal to 70% okay and the second one is going to have some padding so we are going to do style equal to padding and it will be equal to 15 pixels just like that now we can get back to our adding our content so in here we have an iframe iframe will display the video for us so inside let's add some necessary properties we are going to put frame border to 0 because we don't want to have an ugly-looking border we're going to set a height of 100 percent and also we are going to set width to 100 percent we are going to also give it a title which is going to be video player and now the most important thing we are going to give it a SRC so basically SRC is the URL of our video so what are we going to put in here we need to fetch that SRC from our video so how are we going to do that first let's add our check so if there is no video we don't want to return nothing we just want to return an empty dip so we're just going to return there and it is going to say loading so you don't have video at the beginning it's okay it will just say loading but if we do have video we are going to fetch something from it so we are going to create a new constant called video SRC and we have a special URL that we are going to use with data coming from our video so we're going to type template literals so backticks if you have UK keyboard it's the key left to the one key and we are going to type HTTP and then forward slash forward slash www.youtube.com/watch in bed forward slash and now inside of here we are going to type dollar sign curly braces because we are going to use dynamic data so we're going to use video that ID that video ID basically this is how we are going to fetch things right here if we now do a console that log right here of our video that I did that video ID you'll see that that is the actual data coming from our video so let's get back refresh and type something like test when you press Enter you'll see that in here we get at that ID so if we do like this and if we copy the hold string and then paste the ID after the string we can copy the whole URL and paste it let's say right here to see if we do get the video so you see that we do indeed get the SRC for this specific video we can now get back knowing that we successfully fetched the video SRC so this is all dynamic data and now we are going to put it inside of here so we are going to do SRC curly braces and then we are going to put not this specific static URL but we are going to put video SRC that we just created above now let's fetch some additional data from our video so if we just cancel that log our video and get back and type something like this you can see that we get all kinds of stuff right here so we get kind snippet ID and stuff like that so let's see what we are going to need some necessary data and some human readable data we are going to type typography typography is basically a paragraph or heading or any text so this is just a material UI property we are going to have three typographies first one is going to be a variant of h4 second one is going to have a variant of subtitle so we're going to type subtitle one and the third one is going to have a variant of subtitle two and inside of here we are going to fetch the title so we are going to go inside of here and we are going to type video that's snippet that's title and if we get back and if we check our console where is it if it looks like it's refreshed but if we type again and if we check our console and if we go under snippet here we have title channel title and stuff like that so we are going to fetch video that snippet died title and then and also we are going to do video that snippet that channel title so we know who created that video and that should be it below we are going to fetch video that snippet that channel title the same as above so we know who created it and just below this should be age for this should be subtitle one and the third one should be subtitled two and in here we are going to use video that snippet that description so now let's check everything that we have to see what it is going to look like so for now we have just loading which is great and now we can type something like test and wish we get our full cart with this video snippet preview this is our title with a channel title in here we also have channel title and in here we have the description that is great so we can get back and that should be it for our video detail component so that's it now we need to create video list so video list is going to have video items in them so if we go under video list first we need to create a one separate video item so we are going to create a new file and it is going to be called video item it just it is just going to be a small preview of this whole video just without the I iframe of the whole video so we are going to go under video item and inside of here we are going to do all the usual stuff import react from react and inside of here we are going to import grid paper and typography from material UI core ok and we are going to have another function based components called video item which is going to be simple arrow function and it is going to have a return and it's out of here let's just say video item and let's export it so export default video item okay that's it the reason why we don't have it listed here because the video will list is going to have the video items and then we are just going to export the video list so now let's create some boilerplate for the video list so import react from react import grid from add material UI and then in here we are going to have another function based components and inside of here we are going to have another function based component this is a great time to explain why do we have so many function based component and only a few class based components so basically this is a dummy component this is also a dummy component it doesn't have any state this also is dummy based component basically we have some type data coming in and we are doing something with it we are displaying but this component for example is class based it has stayed and it has some methods so it is much smarter it needs to handle state also this one this handles quite a lot of logic right here so it needs to be class based but not all components need to be smart some of them only need to return or display some data so we're going to have return statement right here and we are going to export it this we can type right here h1 video list just like that and now we need to export it as the other two in the components index a a s so we are going to type video list from video list and now we can use it inside of our app that is right here video list and we can uncomment this out and do that as a component so video list right here so if I went a bit too fast let's see what I did we created a dummy component called video list inside of our in text Egeus in components we exported it and inside of the abbé de Geus we imported in and we are going to show it right here so if you go back you can see that we have video list but you may be wondering where is the video item very going to use that so basically inside of the video list we are just going to map through array of video items so we are going to do it like this above we are going to create a constant called list of videos and it is going to be equal to videos that map and we are going to have an arrow function and we are going to do something in here but for now we do not have this prop called videos so we are going to get it from the props and if you remember this is props and we can get it by typing props that videos but even simpler way is to just simply destructure it so props right here and we are not getting it right now but if we go under ab dodge is we need to simply pass a probe called videos which will be equal to videos and these videos are coming from the states right here oh this is a typo it should be videos right here and we can simply pop past them right here but we need to destructure the videos from the state right here so now we are getting the property videos we can get back into the video list and now we can type for each video we need to return a component which is actually a video item so we are going to import our video item from that slash video item okay that's great and we can simply return our video item for each of the videos we have we have here we need to distract your videos here not props so we are going to do just that now that this is done we can refresh and instead of our video list we are going to return list of videos so return list of videos and now if we go back to our browser and we type something you can see that we indeed do have five video items that's great so there is a slight warning here when you're mapping over properties right here as we are in this video list we need to also provide some ID and we are going to have it right here and the key of each video item is going to be a simple ID so key is equal to ID and that ID is coming from the video so we know so we know that each video has an ID property okay so then we can also provided a video so all the info of the video as we said we are getting the data from five videos and each of this is an object with all different properties so to each video item we are going to provide its own video details so it'll are going to be video now we can get back to our video item and inside of here we can do something with it as we explained before we can this structure the data we just brought in and we can use it to display something okay now we need to display this video properly first we are going to have a grid which is going to be an item because container will be in the video list so we are simply going to have an item and it will take the full width of the container by typing X as 12 inside of it we are going to have a paper so it is going to be paper and we are going to provide it with some styling so style would be equal to display flex it will have a line items to Center and that's basically it for this paper inside of here we will have an image and in here we will be working with the thumbnail data that videos provide us so it is going to be a self closing tag and inside of here we are just going to give it a style of margin right which is going to be 20 pixels and now we need to provide it with a alt tag which is just going to be thumbnail and we need to provide it with an SRC so associ of this image is the data that we are fetching from the video and it is going to be video that's Nippert that thumbnails that medium that URL basically if you want to take a look at the data we are getting once again you can go in here and type test press Enter we get some errors now but inside of here you can inspect the data and see that indeed we are getting a snippet and thumbnails and medium and URL so here we are getting the URL for that specific image and just below the image we are going to have a topography which is going to have a variant of subtitle 1 and inside of here we are going to have bold element so bold and it will have video that snippet that title and now let's see what do we get back there is an error right here expect the corresponding closing tag for B but it indeed is here so what seems to be the problem that's it the error was just slow and if we get back refresh type something like YouTube press Enter we get some errors and that is because cannot read thumbnails of undefined that means that we misspelled right here which is okay if we get back and refresh type YouTube again right now you can see that we indeed do get some cards right here it looks great we get some thumbnails right here and we get the main displayed right here there is also some styling that we need to do more so if we go back under the video list right here we are going to add some additional styling so instead of just returning a list of videos we are going to return them in a grid containers so we are going to do it like this return and we are simply going to type grid place this inside with curly braces and to that grid we are going to provide type of container and spacing equal to 10 as we said before let's see how it looks right now let's type something related to JavaScript and inside of here now you can see that we get nice-looking data coming from the API with an iframe and also this little current slide here now if we click them nothing happens but we need to add Lord for that so let's do just that it is going to be as simple as providing another property to our video item which is going to be called on video select and we are simply going to provide it on video select so this doesn't exist yet we are not going to do it in this component but we are simply going to fetch it as we did videos right here so on video select is going to be something that we are going to specify in the fjs so inside of here you can see that we are providing it with videos but we will also be providing it with own video select which is going to be equal to on this that on video select which doesn't exist yet but we are going to create it just now so if we get back and if we create another method which is going to be called on video select just a simple error function and the important thing to notice here is that we could have created the on video select right into the video list but it wouldn't work because we need that data that is coming from the state right here so inside of here we already have selected video so we can simply pass it as a state so in this property we are going to have a video as we specified right before and it is going to just set state so this that says stay off a selected video we need to put in an object so selected video will be equal to video ok that's it so let's inspect it on video select is being transferred to our video list inside of here we are passing it and if we go into the video list we are passing it once again inside of our video list and now we have access to it right here in the video item we can also get on video list from on video select sorry from the app so it traversed two different components all the way from AB Dodgers to the video list to the video item and in here we are getting that state and in here we can specify an on click on the paper component so we can type on click right here and it is going to be equal to an arrow function and when user clicks on that we are going to call that on video select and we are going to provide it with a correct video simple as that and in here we can also provide some additional styling so it looks clickable we are going to give a style of cursor and that will be equal to pointers so user knows that we can point to that if we go back and if you type something like JavaScript click enter now we have this nicely spaced little tabs when you hover over this element you indeed get a cursor and now when you click on it the SRC and all the data is being transferred to our main video detail now we can choose between these items and see all the items right here so we can type right here and the video will indeed display so let's see some of the videos let's for example search for async/await i told you that i did a project on it so if you don't know async I think we'll find it like this I think of a real project and as you can see my video is coming in first in here you can learn everything about async I'll wait that's basically it now let's see if there is something else that we can do with our application or is it completely done we are going to repeat everything we did we are going to explain a bit more in detail what we did right here so if you didn't understand everything right from the beginning we are just going to go through it one more time the one last thing we can do just to make this a bit better is to create a life cycle method inside of our app - yes so at the top just be just after this date we can specify component did mount this basically means that everything inside of this function will be run immediately after the class component loads so inside here we can just call this that handle submit and we can pass it a search term so let's just comment this out and see how the app looks like now so now we just have an empty looking page at the beginning but we can make it better with one simple line so inside of here we can simply specify the search term that will show every time the page loads so let's see um there's another video I did before it is PDF generation with react and note and if we type back and now you can see here that immediately when we refresh when you come down the page we immediately gimps get some data so it doesn't look ugly from the beginning but of course we can also search anything at the end will change immediately okay now let's get back to repeating everything that we learned in this video about react and about building this application and let's close all of this so now let's take a deep breath and congratulate you on coming to the end of this video let's repeat everything that you learned in this video first we created a new react app by running three eight react app and that generated this boilerplate hold for us inside of the package that JSON we install the necessary dependencies which are Axios and material UI in this case we also deleted all the unnecessary code we created our in text Egeus which is rendering our whole application in the root of our directory which is just a simple HTML page with a div that has an ID of root and then inside of the SRC is where the magic happens we have one main component which is called fjs it and it does all the stuff but to make it look a bit better we simply imported all of these blocks of code so if we just didn't do this search bar as a separate component right here or a video detail we would have much less clutter and we would have like 10 20 30 methods right here and a lot of code right here basically every of this items like search bar would have like 10 to 20 lines and we would need to put it right here but this way using react we can simply create it as a separate component and import it like here so we learn how to do this import by using index J s we also learn how to actually call these components right here another great thing we learned is how to pass props to our components that is maybe the biggest thing that you learned this video because we had a lot of passing properties right here if we go into the search bar search bar is getting this on form submit function from the AB de Geus inside of the search bar props so we are getting it right here but maybe the best example of props passing is this on video select we are creating it right here on video select then we are passing it to our video list right here and then we are passing it one level deeper into the video item right here where we are finally using it so we learned a lot about passing props another thing we learned is a bit of material UI as I said we can do another video on it specifically we also learned a lot about setting state so if you want to change state right here we have initial state which is just an empty array of videos and the selected video of now when you want to change that state in react you need to call this that set state and then update all the details another great thing we learned is about using Axios so we created a whole new Axios instance right here with the base URL and then we called it inside of the app that is right here where we passed it all the parameters and we used async/await to wait for the details then we put this details of the videos in the videos and then we passed them again all the way to the video list where the video list is actually mapping through them and using every specific video to create a new video item right here and the last thing is the video detail in which we are using the data coming from the API to actually display the video that's really it this was quite a comprehensive video if you come all the way to the end thank you feel free to watch the github video I did before and then upload this project to your github portfolio because this is quite a nice project to have if you're looking for applying to jobs regarding react or note or something like that this could come quite handy if you're looking for projects to put in on your portfolio if you feel that with if you feel that this video helped you make a new project or learn react but a bit better feel free to let me know that in the comments I would greatly appreciate you also feel free to like and subscribe to JavaScript mastery because a lot of new stuff is coming on the channel thank you again and stay tuned [Music]