Make YouTube Application with ReactJS - For Absolute Beginners | Waqas Ahmad | Skillshare

Make YouTube Application with ReactJS - For Absolute Beginners

Waqas Ahmad, Software Engineer

Make YouTube Application with ReactJS - For Absolute Beginners

Waqas Ahmad, Software Engineer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
23 Lessons (1h 14m)
    • 1. Introduction

    • 2. Course outline

    • 3. Contact me

    • 4. Environment setup

    • 5. Hello world project setup

    • 6. Hello world project part 1

    • 7. Hello world project part 2

    • 8. Hello world project part 3

    • 9. Hello world project part 4

    • 10. Hello world project part 5

    • 11. Hello world project final review

    • 12. Youtube project design

    • 13. Youtube project setup

    • 14. Youtube project part 1

    • 15. Youtube project part 2

    • 16. Youtube project part 3

    • 17. Youtube project part 4

    • 18. Youtube project part 5

    • 19. Youtube project part 6

    • 20. Youtube project part 7

    • 21. Youtube project part 8

    • 22. Youtube project part 9

    • 23. Youtube project final review

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this course we will start from absolute beginner and end this course as a hero. After this course you will have enough knowledge and command over ReactJs and you will feel yourself confident as a developer.

Why Student bored in tricky Courses:

  • Because the course videos are very long and also does not have exciting content in it.

So i have tackled this problem in this course:

  • Because i have keep things exciting, simple,clear,shorter and to the point.And you will enjoy this course alot.

What we cover and Build in this course:

The main thing in this course is we are covering this course by making real world app and you can easily understand the main and tricky concepts of ReactJs.

  • Simple introduction of ReactJs by making Hello world Project.

  • We will cover this course by making real world exciting app "Youtube".

  • Import Statement

  • Export Statement

  • Props

  • States

  • Handling Events

  • Lists And keys

  • Functional Components

  • Non Functional Components

  • JSX

  • How to use API

  • How to Get API from GOOGLE

  • How to get data from SERVER

  • AJAX Request

  • Styling Your Components

What will students learn in this course?

  • After this course you can make your own applications and also upload them on the internet
  • After this course you can start a business as a freelancer but also enhance your skills as well with that.
  • After this course you will learn how to fetch data from server and use it.
  • After this course Build user friendly and fast web applications
  • Learn new and exciting web technology to compete with other developers
  • State, Props and the flow between components
  • Basics of React
  • Connect to an external API
  • Build an real world Web App from start to finish "YouTube"
  • Component Styling

Course requirements or prerequisites?

  • tools are stable internet connection and pc or laptop
  • Basic knowledge of HTML, JAVASCRIPT and CSS but don't worry i will teach you each and everything

Targeted students?

  • Beginner react js developer who want to learn from absolute beginner to advanced
  • Beginner react js developer who want to learn new exciting JavaScript library
  • Beginner react js developer who want to get a job in Facebook or any other industry as a web developer
  • Beginner react js developer who want to start their own business as a freelancer
  • Anyone who wants to learn how to build real world apps with the latest web technology.

Meet Your Teacher

Teacher Profile Image

Waqas Ahmad

Software Engineer


Hello, I'm Waqas.

Experienced Developer
Hello I have been doing development in the field of web development and computer vision for the last 3+ years and now it is the time to share my skills and experience.That's why i joined skillshare to help others by teaching  them new technologies and tools.So you are on right track and take my courses now.Thanks

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Introduction: Hello, Islam. Ali Gunes. Oshri. Girl on now, Most goings, my whole. You are doing well in these goals. We will learn about react. Jim's by making real world at court. Judy. So the first question is that what is the ECJ years? Yeah, Jess. In the job script library developed by Facebook in 2015 to design. Judson interferes. Okay, guys, the ag GS is in high demand, and this is the right time for you to learn and get a job. Or start your own business and feel answer. Almost 60 totem jobs are posted on indeed dot com daily basis regarding the ECJ is so you can see that how much famous is react? Yes. So, guys, don't this your time? You are on the right drag and dig discourse. No, thanks. 2. Course outline: Hello, guys. In this video I will show you the course or climb. So what we will cover in this girl's So there is a lot of content we will cover. So let's see. We will go or how word program words JSX Components and props. What is important judgments? Export Straight man's what is stayed full and stateless companies. What is handling revenge on what? Our lists and keys and what is it? J X request with react. So guys don't bank. I will. Did you each and everything. And after this goes, you can make your own applications with react. Yes, I did you agent. Every line off the cord till them Good bye. Thanks. 3. Contact me: Hello, guys. How you can contact me in this ghost? If you feel any difficulty or any question regarding react Yes, I will be there for you to help your You can email me on Gmail. My email is W A to double a double salmon at gmail dot com. You can email me any time. I will reply you as soon as possible So you can also contact me on Facebook. This is my Facebook page and I hope you know, Don thanks. 4. Environment setup: Hello guys. In this video we will set up our environment First open your brother and die nor Js the gender and the force linger beer click on the Norges This is the set of you have the dollar playing down Lord like this I have already donor did so I can salute in second step you have don't Lord the i d their record or write Web Strong Web strong is my best i d a gender The false ling appear Click on just don't Lord button Here click on the dollar burden It takes some time and automatically donated. So, guys, I already don't word it, so I cancel it. Okay, let's show you our dollars Said these are the sort of that I have downloaded. So let's install one women Boston Short Norges So I already installed on my computer Second install web strong on your computer In the third step, you have to install suggest globally First, open your command terminal CMD bid administrative permissions like this, right? Cmd right click. Done as a mystery Yes, right and bm install Dash G Destiny means you have to install globally create Did you react and her gender if you are immaculate, then right. Suitable when? The start of the late space and it ended So I just right npm install DSG create director. So you tender This is how you have to install your reacted globally. So the alternative is done until then. Goodbye. Thanks. 5. Hello world project setup: Hello, friends. I hope you have installed all the settings in this video we will court or first chord Hello , Word with react. Jazz selects open dieting We have opened Iady. Let's create new product. You can also select another location so I have select the location. My deck stop and let's select reactor because we are making objective. So let's change the name all the work. So no click on the create button. Great. This will take some time and will create are up on the next row with the name off. Hello world. So it is installing a packages gold and get the big dome and react squares. We will discuss later What are these packages? So finally we have installed each and everything. So let's explore our broader structure in this part of structure the first polar card nor models. So what is normal ideals? Even stall any new packages using NPM, it will go into the Nord Models folder like these are then stole packages. And you have seen the package door Jason folder. In this file you have see the installed packages list like yakked, yak, Tom and Jack Skip these all the install dependencies And there is also get ignore file what it does get Ignore fel It means work files you need to ignore at the time off upload on the guitar So there is another fold called source So we mainly use the source folder where the men have lives This is our main court Let's open have dart Yes this is all me in there so no we run our first hello world program just right and pm is start and he dinner This will start our automatically. Have you seen that? It started out at automatically. Boom! This is our first trap running on the solar. So this is our product structure We will discuss later the court This isn't strong dessert We just write NPM start and our have been start on our brother like this on the server local host work name three people Who? I think that's it. See you in the next video. Thanks 6. Hello world project part 1: Welcome back, friends. In this video we will code let's start from scratch and great all the files. No right click when a source for their new and make a new file off Jealous script. Name that oil index. And he turned around. OK, but we have created a indexed RGs file. So let's start according first import react. What is thus Syntex to import something from your install dependencies from Package or Jason Fire. So we have installed these packages Solar. It's import the act and react right Imports treatment on board you get from th no import react Don't from Did he act? Don't somebody got No. Let's write a function, Const Constantly Gifford, There's function name Hello in dysfunction. Let's they're done. Is Jamil heading each one? That's right. The hell award here. So no, we have to run this gored to run This scored right yet don't dart render function react dome dot The gender So what element we want to show the element name should be. Hello word. Hello. Word in the Siqing where we want to show this element The container. So the continued would be our Dave Davies, located in public folder here this is the day. Very sure or element. So what is already other deal Already? Name is ruled. So let's slag decided he document dog get element by Ari and already is rude. So my calling and no, let's open the brother just his putrid flesh. Okay, so you have seen or hollow word for step that we are created shown on the screen. So let's review what we have did. Still no. First, we imported the react and react don't packages from north models. Next, we have clear to the function which is returning the each one element in the third step the React dome dark render function that takes two arguments. The first argument which elements need to be rendered and the second argument were to render in dome. This is the cord we have done. I hope you can understand. If there is any question and problem, please email me or message me on my fears with Paige. Thanks 7. Hello world project part 2: Hello, friends. In this video we will modify our hello world. And so let's start So friends, what we have done before. Let's review the court. So first we import the statements and then we can get a hello where function and then call a render function from reactor. So what is return? Heading? This is a GSX GSX means javascript example, which is used in the react. To write this Jamil like syntax, insert the JavaScript. It is just a pre processing the GSX. We right? Let it converts into the JavaScript with the help of Babel. So let's modify and make it another compliments. So here is the question is what is cos components are the reusable pieces off compose herbal with other components. So let's make another JavaScript file with minimal like before import reject. So there are two types of components. Function components and class B, its components. So functional components. We will discuss later. Select first making class companies plus companies starts with the keyboard applause and then the name off the close companies. There's given the name. Yep, extremes. Experience means inheritance extended from the components like this. So let's import component from the act So we have make class component with the name off and extend with the components so component in this class, there is a render function Let's maker under function and there will be a return where we write our GSX scored gsx just writing html So let's make a live here and hurting. Finally, we have making class company alerts command this function instead off Hello Word night app here So let's see what is the result upon the brother? So the Aries app is not defined The egg gsx in indexed Rogers So what is the problem? Problem is, we haven't import alert nursing for their board from dart forward slash It means that the current directory current directories the source So write the name of the you want to import 7/4 So let's see the result. Okay, what is the error export before imported as it was not phoning that. So you have important the file but not exported from the main component called abject. So let's export the files export default ec so no, let's check the result. Boom! Just we have done the modification off our hello word up. So I hope you have understand Children. Thanks 8. Hello world project part 3: Hello, friends. In this video, we will aired some more features. Toe are Hello word. Let's start first, I have created new Joe Strip for gold question Dodgers in questioned RGs I have declared a any off object and Jack's just export this fire. And no, I really import this while in the men have import question from dot farmers class, It's me, the current directory Know what they want to display? I want that I will display here the full area. The question will display and then the answer, as in ist So let's start first. We have toe looked through the all objects to show in a list. So let's startle. If you write a JavaScript in GSX, you should create a curly records in cuddly records, right and loop to display the objects less Looked through the question Kerry met Question dart mad in the traitor by director. There's work the same as Lou. In the first argument, I will pass a arrow function at a function that takes forced argument. E is the element in Dari, and the second argument is I that is the index off the area. So let's you're drunk and right edge Essex. Let's make a another list. No. First, what are the objects contain in objects? There are two keys. The first is question, and the second is answer. No access thes case. No, don't forget toe right godly wreckers because it is a JavaScript. So you question dot question. And in the second list, we will show dancer question dot So So let's see what happened in the browser. Oh, I think we have mistakes somewhere else. Let's check. We have toe display the element. Nor the question. The name off area yourself. No, this is wrong. We have right here the element. The element is he to replace with a That's check again bone. So finally we get our list on the brother. So this is the result that we want to get. So let's review what we have done. So first we have great job script file called Question, and in it we declare an area named question and there declared some objects and then export that fight. After that, we imported file in average s, and then it dread through the question area and show their element in, or I hope you get the idea till then. Good bye. Thanks. 9. Hello world project part 4: friends in this video we will refectory or court. So what we write and this return a list? It is not a good practice, so we have to make a separate component. So let's make a separate component New job, script, file and call this component a list. You tender and last import the yet this component, we will make a functional component. So let's make a functional component. There's name dis component A list. Okay, call it her done function to write some GSX. So what this argument takes, it takes properties. Sue properties is used to pass the data toe their Children. So I would use a sharp homo. Property is crops. So let's make a list here. No, we have to show this data there. So hole, we can access this in the list. White toe less. Import this while here. No import list from dot barber slash List from the current Derek. No. Let's cut this an air list here. No other argument and passed the better. The first debtor argument is question question you dot question and the second argument would be the answer. He thought so. We have bossed properties like this. No, we will utilize their like drops dot question and drops dog. So we will export this list as well explored. Let's see, what is the result? No, there is a problem that's like the problem in the court. So what I miss? Let's check the list. Sorry, guys. I forget to Carly basis. There's why this problem occur. Let's add cuddly braces, Bob's Dutch questions and same bra. Obstruct Answer. No, please don't forget to add. Carnivorous is because you are writing javascript. Not a simple is Gemma text. So let's see. What is the result? Fine. We have got desert. Have you seen all? We use? The props Drops are used toe past better to their Children. So we have make another component card function component. These are the functional components. They're Jews. I hope you get the idea. Until then. Good bye. Thanks. 10. Hello world project part 5: friends in this video we will learn how to act. He went handler in our react Just so let's start already, Handler. So let's add handle here and name the handler. Function as a handler less basti. Just rinse treatment on soul dot log Just bring to help. No, our past at this handler to the list lives. Name 100. You can name anything did you want? You can access the 100 function by this. This has a reference off this class last name is Distort handler. No, let's improvement dysfunction toe a list? No. In a list implement on click pension. Right arrow function here the daughter and argument and hold to access the handlers to crops. So drops dog handling in this way you can exist 100 So no, let's check what happens if you click on a list There will be Ah! Hello, Brent on the console. Let's see. So so how you can see the console. There's right. Click there. Inspect. Inspect your court. So here is a concern in console You just quickly on a question list. Then you will see the hello in the console. So let's Blake. Hello. Okay. Have you seen that they're squeak again. Hello. The second time. Third time for 56. Have you seen that whole hander works in the act and how to use and let injects. So I hope you get die again until then. Goodbye. Thanks. 11. Hello world project final review: difference in this video. We will review what we have done so far. I think we have learned a lot. So what we have learned we have learned about components and props, even handling and GSX and how to set up or project environment. So we have covered a lot and these are the basics off react and we are successfully covered . This basics off react So the next what we love. We will learn more amounts about react by making the real were called you too. So in December we will not cover the core functionalities off YouTube like how to create your general how to upload videos. But you will learn a lot in this. So I hope you will understand what we have done so far till then. Goodbye tanks. 12. Youtube project design: Hello, friends. In this video we will start on Jumbo Ab Giorgio. So let's first discuss our YouTube ab design. So no struck. This is the design off. So in this air we will have four companies. The first component is the search bar. The second component is that you do itself and the title and description of the video. And the third component is the single video. And the fourth component is the list off video. So this is that designer. In the next video, we will discuss hole to set up our product. So until then, goodbye, thanks. 13. Youtube project setup: Hello, friends. In this video we will set up our product. So players first open The I D diary we're using is Web strong. So click on the create new project. I already said the location before location our deck stop on the left side. Click on react because we are making a reactor name your project and play Create. This will take some time and automatically create your project on deck Stop. So it starts running and take some time. No, It is installing all required deputies for our reactor. So finally the installation has done so. Let's explore the directory. So in the source Fuller, we will create a directory card component where we define our company. So right, click on the soles. Fuller knew and created directory name as component. In this directory we will create our four companies. So water poor components. These will be a javascript file. The first component is such bar. So we have created our first component. Then the second component we will create as video today taking component will be beauty order there and the third component will be with your list. And the fourth and the last conflict will be video list item. So finally, we have created our four components and create our products set of successful. So in the next video, we'll cord are still then good bye. Thanks. 14. Youtube project part 1: Hello, friends. In this video we will start according So let's first run the suburbs and check what is the result? Click on the terminal and right and PM star. Hey, Tender. This will take some time and automatically start yourself are so discerning successfully So the result is here. This is the result Off are so no less change and remove some court. No, remove this goal and simple Reuter heading Hello world. Let's see, what is the result? They're here is our reserved. So there's implement or first component there appeared on the door off their this search bar. So no to start According First Import React and the component No, we will use a class component and why we're using class compliments Because we use in this class state. We make this component as close component because we are using states in it. When we're using spirits, there will be a class component. So what are the strict states are used to store data? Just a simple. So let's implement the close with the class covered name. Your plus the such bob extends with the competent plus first the render function, then the return function. So in return function with just return our input. Such bar. So no export this class to show on our mean abduct. Yes, well, for divorce such so No, we have exported it. And no important the Abdullah Jess spot. No, let's import this plus in ab Jess before such by door partner slash x means the current directory this source and then competent directory slash such my So we have imported a such bad successfully. No Julie this in our main container at just below the hurting. Such simple No, let's see. What is the result? Yes, re lord, There you we have successfully got there is a village or search but they're trying something No alerts air the handler who are such by they're scored. Let's add 100 on change That's the adult function there. This is there a function? Just bring the value on the console. Then we write in the input Go to get this value. The matter is they went dot target dot In this way, we can get the value off the such bar. So let's see the result. Right? Click inspect upon the console. Let's write something in the such. There you go. Have you seen the result? We have successfully got there First move hurt so we have Gardeners are successfully. Let's implement the straits Chairs are used to save the data. So let's implement a constructor method. Constructor method is work When you make object The clause the constructor method calls us This will take an argument. Rob's Forbes is property and the first line we will call a super close with the Keeper Super. This is also take a props. Are you going in? This instructor matter will really find our straight. But they gave it this This represent gloss such but close They start straight looks deploy Nikki as John. It could be anything sign before will you know belly toe the report value this state is not . Let's update our straight with the mattered this dot Set straight he went taught or good? Don't value who this will update us trade So loves this line in a deep dolar sprint the value on our supreme well cool off input is done Strange the trump the initially the value of trump is now when we get the value from our search bar, this will set straight new value. This could be anything that we will type. Then we will show the value or scream. So let's see. What is the result? Did Is there magic? What has happened? The arrow is because we are not said the straight. We're just past the value. We have to start the street. Let's start this trade like this in the strait we have a G. Don't we have to pause this as a job script in a girly dresses this way. So we have abducted our spirit successfully. We have right discord or side our input. Let's see. What is the result? No. Okay, all is well. Color stripe something there you We have typed on the screen. So have you seen that? So you can get input from your such part and right on the screen. So this is it. I hope you can understand the concept of straights. Good and good bye. Thanks. 15. Youtube project part 2: Hello friends. In this video we will get our A p a ki from the Google to get better from the server. So let's open a brother and type console consoled or developers George Golden And he tends to to you this account you have to log in. So I have already logged into my account Surfers go to library and such for you do This is what we require So he genter so right No, it is not enable enable it FDA is a Nevil. Let's create a credential to your disappear Jewels were using YouTube utopia tree for my brother for public debt it entered We have successfully grij r a p a ki was Skopje this key and done so let's save this picky to our main container corns. We will use this epic e to request a silver and getting daughter from there. So I hope you have been strained. The process until then. Goodbye. Thanks 16. Youtube project part 3: Hello Frames To use this EP E G, we have to install a package using MP. So let's open a terminal. We have already upon a terminal. Just cancel the running sober with control. See? And those using mag book Just common. See, that's install the package using and being being. And stroll does see you do a P I cash. So this is the package. Winning your gentle This will take some time. Our package has been installed successfully, so let's see where the package instruct. Right in package Georgeson for open the file. There you go. It is our instruct package. There's why we Jews deaths tests there because we want installer package in this product right here. Celebs use this inner men ad. We have to import the package. First you do what he means. You do so less making constructor here because it is a close component And we also you the state here in the bear claws. Call it super. You were so lives. Get the letter from the supper. This is the matter off the you dupe such EPA In this method, the false argument will be a key given B or a PG and a second argument What we're searching for legs search for songs and in the second argument, the arrow function Arrow function Bill Get the letter from the silver. So in the Arab function, the argument will be This is the debtor we're getting from the sub. Just console your sprint on the console did. Let's see, what is the result? Just started. Server champion struck. This will take some time. So the Lord is saying Well looks Inspect. Have we got the letter from the server or not? That's up on the console. Yes, there's you go. We have got an area. This is the data we have get from the solar. And search result for this is here. So this is the better we're getting from the server. And we will use this data in our duty back. So until then goodbye. Things 17. Youtube project part 4: Hello firms. In this video, we will implement our video list company. So let's first set our straits. So in our constructor method, we have to settle straight in this straight with Jews or data A data from the server as the area. So we've been declared this key as an area. This is an emptier. So let's set the street here. So we have defined our straits. But sculptures, videos Okay, no import a video list in our main container. We have important realist. So let's scored or video list so we're not doing a straight. This will be a functional component. There's import the actor. So this is our functional component takes a props as an argument return method. We will return a video list as a ownerless, so we have passed better to our video list. In this way, we have fostered a toward Children solar's juice. This just juiced the starter at the Prague Rob start, and this is a GSX, so writing curly braces videos are an area. Let's check the land open air. I will use a bootstrap sitting in here. There's open a grown brother and right both shrimp opened the first link get started. This is the city in that I'm juicing this copy and paste in your public directory. Is Jamil right here? There is no need off thes toe attributes. Just remove them. So I will be Jews. A class name. Last name will be a bootstrap poll. All a medium dash for as a list. So let's see. What is the result? Okay. What is that? The error is we haven't export our video list. So let's exporter realist or default? Realist. Let's check the results again. So this is our result. We have got a result. The length off or a is fight. Let's check Is we're right or not? Yes, we're right. This is the lentil for Harry. And have you seen in the console? The length off Harry is five. So we have got our result. Great. So this is it. Hope you can under strained. Well, then. Good bye. Thanks. 18. Youtube project part 5: Hello. Friends in this video with Bill Implement are very a list item company. So let's start that's open video destroyed, inboard, react and just redone. Always ally just right of you do and export this as well. No, we have to import this in the video list. Slaps import in a video list board. No, we have to trade the area of videos. Const. Video it 10 props, start videos. That is the area that we're going toe to treat with a traitor. Mayor, this is the argument. Is the content off their with the arrow function in this Arab function, we will return our video This traitor So we will pass that we do destroy item. Did you? What is the video? This is the video that we're going to pass. So in the jewel list, we just have to pass a video fighting like this. So let's see what is the result? I think there is an error check words there and the error is because we haven't mentioned the current directory. So please mention the current directory. Don't forget, dog. Former slash. Let's see what is the result and we have caught the result. We have drained the videos five times. So this is or isn't so. We have got a result successfully part. There is the error. Each child in an area or a critter should have a unique So let's Jack, What is the unique in our area? The first object have aren't jag and I d electric explore First object or four. Subject has a e deck unique attack. So this would be our unique idea. Every object has its remaking. Sellers use this as a unique to remove. This one bloods implement is did you dot you? Let's see what is the result? So we have successfully removed the warning So we have got a result successfully. So let's implement a video list item component. So So in this props argument, we will replace his argument with the D structure method. With the destruction method, we will God just one object that we want. Example Boss. This then attribute is a video we can get on Lee. This attribute not the whole properties, the video This So that's why we replace this argument with the video? No, that's implement list item in the l. A. We will define our dig that will hold our main. I will be using both tracked classes in this. So don't way. It's bear with me before L A. I would used the class name off. Bootstrap. It's true for the mandate. Five injured. The Bush class name did your list Media. Next, we will use another date for image Julia blouse name. But this Jeep Media left this did We will use an image, Jack. The cloth name and the source will define another deep for the media body and another live for the media Heading title the video We have to define the jewel of the video. So what is the Ural of the video ho? We can get it so far. So open the console off the closer. This is the false object and just open the snippet. These are the video generality, Jenna. Title description. Like both clustering thumbnail, etcetera. So with Tom nails. This is the You are I love the video. This way we can get the general of the video. So let's Gord, you made your oh, with the video addict that we d structure from the properties. But well, you don't snippet Come nails dog. Before Joyal, we used this, Ul. Here, read you heading through this? Have you tried it here? Your thought? That dog. Let's check the result. That's really Lord, I got this. There you go. We have caught the first result or app from the solar saying that this is the result, can't you? I hope you can understand. If there is any question and curry, please ask me E mail me or message me on my Facebook page. Please don't forget then. Good bye. Thanks. 19. Youtube project part 6: Hello, friends In this video we will implement our video detail competent. So let's start implementing for soap on video detail component. This will be a function component because we are larger than straight in it. So I'm boat you dio dio properties also export this well let's they're drunk on JSX scoped in our video to deal first We have our video. The men did This was the class name of this will be a You do todo call medium it in. The men did. There is another day The close name for this em backed These are pure bullshit Because it's so Don't worry, You can find easily in bed Responsive Dash 16 by nine In this deep we have to pass on my friend with the class name bet Responsive So there is another the trip food source. The source will be a jury The first we have to the structure the properties Just get video attribute on to find the video i d with the video dot I don't did you already? Don't worry, it is easy. So I get this idea from the area. Just inspect This is the idea. This is the video where I can get the video. I'd so very simple. Don't weight bear with me Simple and North This time toe Get the jewel. The jewel is his GP colon slash light definitively turbid taught you, Would you door gone flesh in bed and another string that is video idea and then seven. So in the IAP claim right source is your and there will be another tape for dry gin and description. In this day there will be a title and description, and it'll be a JavaScript court. So writing calibrate is Read your dog, keep it. Don't try to. So this is the description. So let's see what is the result? That's really Lord nothing. Nothing is happening because we haven't defined this view detail in our main container at So let's define here. Let's add a huge deal in our main component mean container, so let's you do what you do. So at this dot stood Dodge videos. This will excess a video that is on zero index. So we passed this video toe are very detailed, someone it. So let's check what is the result? So we haven't got any result. There is an error. Let's see What is the error? The other is because we clear the videos. Is zero no area. There's way. It is not getting the debtor. So first we have to define a condition. If there is no video then just returned loading. I hope this will work. Let's see. Yes, it is working, but the video doesn't display what's fresh. The pitch. Let's check what is happening. The all goes right, but the main video does not display. Let's see. I think the problem is in Juoro. Let's add a former slash and check. What is the result? Did you go? There you go. Boom. Hannity regard the result. Our at is working Fine. But men thing is missing and that is styling. So we will see later. John Berry. I hope you can understand then. Good bye. Thanks. 20. Youtube project part 7: Hello friends In this video we will play some videos. So still No, we only play our main video just like this. We cannot play other videos. So in this video we will working on this. So let's start guarding in our main app. We have to implement this. First we have toe define and other set off straight and there is selective video selected. Did you force it is no and no. The substrate also pass this other key videos, videos and the second G will be selected. Did yours selected video will be videos zero index. What does it mean? So we have clear and nooky in the street that is selectively force that is now when we curie and federal data from the server we get the letter after getting the video data we just set are selected video by default zero next week. So let's implement a handler in our video list component in the video to dare component we pass a zero index video So no, we will change this to the selected video this district of structure. So we have updated or we do detail successfully solar See the result. So the result is Okay, we have got our results, right? So let's move further. No, we have toe implement a handler in the video list. So let's implement on video handler on Selected With You. Let's go on Selected video. Let's write an arrow function selected video this dog sit selected video So this is the hander we have passed through the video list. So we have implemented handler on selected video and no good with the video list and light implement here. All video select on Just drops dot on selected with you. So let's go to the video list. I don't and the structure the matter on video select. So in the video, this item in l. A just implement on click method and False an arrow function, a method on video Select and Boss David you that you want to select. Let's see, what is the result? No. So the result is really my saying we can play the first video before as well, let's check. Can we play the video in the bottom off the list? Let's check this video Jazz Yes, yes, we can play that video. Let's check some other video like this. Yes, we can select the video and play the videos. So, guys, I hope you can understand. And we have achieved a lot in the react. Yes. If there is any question, please ask me. Well, then. Good bye. Thanks. 21. Youtube project part 8: in this video with just a little bit style are jujube. So I just added a new directory just by right click and a degree. And in this directory, I just good to see if this file at this so and no, we have egg. This year's this, while in our all components and just important issues is while import from style and style nurses and best this all other companies as well. So in this way you can paste all these components. Solar. See what is the result can improve. But adding Casillas's file, Yes, we can improve a little bit. There is a nice padding and margin and look at that data the cursor view. So this gives a look nice. Tore up. We can easily she was like, You do and play as well. So what I did. I just add a CSS file. I have mentioned the clauses earlier and define their seizes ledger, So let's go to the such bar and remove this line. Let's add a clause there such let's see, What is that? Look at that pretty much prettier. Very pretty. So are such does not working so far, so we will see it later and no are looking good. We can select and Harvard effect on our video list as well. I hope you can understand if there is any question Curie, please ask me until then. Goodbye. Thanks. 22. Youtube project part 9: we will implement are such bar functionality. So let's implement. I will define a handler here video such that will take a argument that is, ah, such value. It could be anything I give it a name is job so less got this court and base here. So also Curtis such Dag And right here is it John, Let's call this function here this dot video search You can write anything less right? Sports whatever you like. So this is whole. We define our handler and no implement this method in the search bar component. So on search change, Joe lives All it uncertain change like this an arrow function that's called this start video search and Boston commanders John so loves implement this Also change in a search bar . Let's implement the handle here. Old input, input change This will take the argument job and we have to set the street this dot said straight A little bit, John. And we have to excess o r on certain change metal that is here and boss the drum. Let's this truck drops dog on. I think it is on down change. Let's see on certain change and boss the argument job. Okay, let's check this. We have toe all this method like this. Remove. Just remove This method is dot on and put change and pass the value of the in book even dot like this. So let's see. What is the error? I think there is gone slash check. What is the result? I think there is an error. Sorry. I think I have implemented this matter in render function. There's about this error occurs and implement. Also said that under function like this so I think there will become now Let's check trust showed up lording And have you seen that? I have said the default search is sports and it is showing me sports Let's check or is working less Jack or search function it search for my favorite hero Tom groups Okay, there is an error. Let's check what is happening here on and put change is not a function. It will be here on the loose. I see no less Jake always going well, there's such again Good. I think I miss belt whales. The line number 20 years last year. Okay, answer James C h a N g thing. This terror. Let's check again Let's such again. Tom Cruise. Have you seen that? How fast is this react Gs? Look at that. Unbelievable result your ab genius runtime Very swiftly and fastly. Look at that. You can search whatever you want. Search like Hollywood songs. Look at that, man. It is very fast. So we have completed our YouTube vint courageous success. I think you have longed a lot in this. This is the AB. You want to build and learn a lot toe. That's such stone. And Jerry, look at that man. This is draped. And you can also play every video that you like. We're split rail this video, man Ju have no won't your own Judea so you can play. This is great. This is great. So I hope you have enjoyed This goes a lot. So until then Goodbye. Thanks. 23. Youtube project final review: Hello, friends. I hope you're doing well and I call You have enjoyed the course as well. So this is the final look off all you do Boom. So let's search something like John Jerry. You can also play the video as well and also select some other videos as well. Like this. Have you seen that hope for us is react? Jazz on This is the latest technology by visible so you must have to learn. And don't forget to learn new exciting skills. I hope you have enjoyed the boss and I am also making a new courses and working on new technologies like Computer Vienne, Open city Beytin react native etcetera and I will soon published them. Until then, Goodbye and take care of yourself. Thanks.