I'm excited to show you this course where we're going to use the wrecked hooks to create a video player on Thomas Veil on FARC And I will be your guide in this course.

So what are we going to build?

A.

We're going to build this video player.

It's full, responsive, and we're going to create this list of videos where we can select the video.

Andi also have a medicine kind of night mode here if you want to shift the color for a light beam to a dark theme and we're going to use style components for all the CSS styling here, and I'm going to show you how we can use different theming and stuff like that.

So I'm really excited for you to see this because I love this new hooks and I also think style components is great.

If we go to the react site, we can read a little bit of hooks here at the time of the recording off this course, they're fairly new, so they're not an official release yet, So you have to use this Alfa build, overreact to have access to the hooks.

But that's okay.

We'll go through that in a bit.

We're going to install it, so don't worry about it.

So we're going to use the state hook and the effect took.

There's a lot more hooks and you can read about them here at the site.

You can also create your own hooks.

I think the fake took and the state hook are the ones you're going to use in 95% of the cases when you code, so they the most important and they will kind of replace the state in the class component and the lifecycle methods.

So with this once, we can have stayed on kind of life cycle methods.

In are functional components, there's no need to use class components and has great.

They also say that it's great because if you kind of knew direct, you don't have to learn all about classes and things like that.

You can do your stuff.

We just functional components, so it should have ah, less learning curve as you don't have to go that deep into JavaScript classes.

Well, with that said, let's go through what we're going to need to create this application.

We are going to use ah library cold racked player.

It will give us some nice functionality, like cool backs when they're playing the video and callbacks when the video has played and things like that, we could do everything ourselves in on I frame.

But there's a lot more coding, so it's better to use this library and have all this for free.

So why created from scratch when he don't need to?

We're also going to use as a set of style components on the style.

Components is really great because it's almost like creating regular components interact.

But you create CSS components.

We'll get to that when we get there.

I'll show you that in a later video, and we're also going to use the React router for routing or videos because if you look up here, you can see we have a unique I D for each video.

So if we click another one, we have a not already and we use routing for that.

In that way, we can just copy this link and paste it somewhere, and we'll get directly to that video.

So it's great if you want to share a link or something like that.

That's why we're using wrecked router.

You could do this, play without the road and just change the video here, and it will still be at the main domain here and not change the route.

And, of course you can starless whatever you want later.

Maybe there is some few things that could be better here with styling.

And, yeah, you decide what tastes you having what you want to do with that later.

Let's get on with the installing over.

Dependence is we need for this.

If we go back to Ah, Terminal, we do a CD and we have to go into our starter file's directory.

So make sure you, diello the start of files, and it's the folded that's cold.

React Hooks Video player start attend So seedy into that folder.

It's really important that you're in this folder.

You can rename it if you want.

It doesn't matter, but do it no.

Before you start doing anything and make sure you're in that fuller and then we just do them in store as this is an intermediate course, I assume you know how to use the terminal and MPM and all this stuff.

So if you don't, you probably should take a story course before taking this course.

I actually have a start, Of course, where we create a move application so you can roll it.

Course, if you want to learn the wrecked stuff, The basic stuff before you do this one.

Well, my firm just went crazy here in the computer.

Hope it doesn't bother you too much, so you can hear what I'm saying.

Let's get on with it.

We have to install or reacts players.

So we write NPM, install miners s react hopes layer.

Then we need to install or wrecked router.

And we do that by MPM in store minus s react row their dome.

And lastly, we need our stunt components.

So MPM install the miners s style components like so and press enter.

And that should be it.

We should be good to go.

We just take a quick look at the package.

Dr.

Jason file in the folder.

As I told you before, we using the 16.7 Alfa version.

So that's what I want to show.

You know, it's really important to use this version of reactor waas.

The hooks won't be there and it's against sea or dependencies.

has been installed here also, So we should be able to just write MPM start.

They should fire up or application here at local host 3000.

It should open up automatically.

But if it don't to go to this address here and it says, start here as we see these here, we know that are up.

It's working so we can start building things.

We can also just take a quick look at the photo structure for a project.

So we have Ah, as usual, we have a public folder.

Where are in that's docked html fatherless.

I've only imported a frontier from Google that we're going to use for this one on.

I also created this turnoff input Hayden Input Field where this is a little trick you're going to use to get access to the videos in the player.

We will get back to this when we get there.

I'll show this trick later on and we'll have the source folder there.

We have our indexed Octavius file and we have our components folder.

I created these ones for you, so they are empty now and we're going to fill this one up with code.

We also have a fuller called hook.

We're going to create a high order component.

I'm going to show you how the you step and wherever Containers folder with our up.

And this one is just the start here that we see I created this one.

So it just started up something here and the playlist step is empty, the playlist items see something.

And this one is the main component for up where most of our logical girl and I also supplied the styles for you here because I think this is a react course and not to see it says course.

Hey, it's kind of boring seeing me creating.

I'm writing CSS.

Ah, long time here.

So we're going to create maybe one or two of these when we go through the style components and the other walls, I give you for free, so you don't have to do that by yourself.

So I think this is it.

We're good to go.

We have our local host up and running here, and we will start scaffolding out or application in the next video.

All right, we're going to start scaffolding out, or components and the structure of this application so We're going to create a lot of functional components here, and we just create some basic stuff in there now, So we're going to come back to all of them and finish them later on so we can start with the W B N player doctors.

W beyond is short for ve been.

They called me away because my name is Damon Fox.

So this is my player I'm doing.

So I selected to call it W B on player.

You can shake a name if you don't like it.

I don't care.

So do whatever you want.

So we're just going to create the regular components regular, functional components.

So we import react from react.

And in this world, we're also going to need a video and a playlist because the video is the kind of window ever play the video and the playlist is to play list to the right in the application.

It will look at it here, where I have it.

No, I have a deer.

Yeah, So this is the playlist.

And here we're going to have a night more component.

We're going to have a head a component, and this one is also container It's the playlist items container, and this is each a playlist component off these ones here, and this is the video component we are using here.

Let's go back to our application.

So import video from Dr Forwards last video.

And of course, we haven't created this one's yet, So it will give us an error if we save and tried to run her application right now.

So bear with me will fix this in a second, and we import a playlist from this one is going to be Dr Forrest last containers on playlist because this one is a container and the other ones are just presentational components and they go outside the containers folder.

Then we create the const.

W B on player props are a function like this and also make sure you have the casing right on everything we do in this course.

Because I know there's a lot of people having trouble sometimes, and it's in 90% of the case.

It's, ah, some type error or it's the casing here that's different, and it will throw in error if you don't have the casing exactly like I write it here in the video.

So make sure you have everything correct and shake it twice.

If you've got some error when it tried lead wrong and this one, we have to have a return statement and parentheses and we're going to return the video component on the playlist.

We're going to change this a lot in the future videos because this is the main component.

Most of a logic will go here so it will grow and have a lot more code on export.

The fault doubly.

Be a player like so we can save it also.

Whoops.

We have some error here, and that's because you can't return to components.

We can create direct fragment here and you can just use this.

This is shorthand for react fragment.

So you can just write it like this like so we can cook.

But all of these code, we can move into our playlist component paste it, we import react these ones we don't need.

But we are going to need the playlist header import that one from dot thought forward slash playlist header like so we're also going to need a playlist items and we grab that from Dr Forward slash containers lay least items and we're going to need our night mode.

Also, that one regret from the thought forward slash night mode like so And this one is only going to return JSX so we can commit this once and removed the return and make it nice like that.

First, we have our night mode component.

Then we have our play least Heather, and then we have our play list items.

Um, there's a typing error here.

It should say playlist items.

And of course we have to rename this one also, So we call it a playlist, and that's it would say that one on we concocted this one and go to play list items pasty Cody in.

We can remove this one.

We are going to import our play list item from Dr Forward Slash play list item.

We can remove the night mode, and we're also going to import the high order component in this one later on.

But we'll save that one for a special video about this.

Were named this one toe play list items and exported as playlist items, of course.

And in this one, we're just going to return a playlist item for now, like so Eric make little nicer.

That would save it.

So this is our container components we have are up.

We have our playlist or play list items.

We have our main component to W B on player, not taste.

So let's move on or high or component with, say, this one for later.

As I said So we go to our presentation or components.

We can face their code.

We can remove all of this and remove these ones here for now and rename it to night mode like So we can just create Dave for now.

Here.

Every right light mode.

Say this one actually can cook this one.

We go to a playlist header win in this one toe play.

Least header.

That's enough for this one.

Also fun.

Also say that one and move on to our play list.

Items pace to code and rename me too.

Play list items Play list item not witness.

Save it and we go to a last one.

The video.

Yes, Paste it on.

You probably know it by now.

We should rename it the video look so and for this one we can also import Iraq player So import react player from react player like this, and this should be it.

We have all our components scaffold up now and we're going to up that yes and import W B on player from this one is just going to be one daughter and four slash w b on player on.

We can return that component here like so, and we save it.

Go back to her application.

And as you can see, it's working because it's showing the text we wrote in the different components.