Name: React Hooks チュートリアル - スタイル付きコンポーネント、JSX、React Router、HOCのクラッシュコース (React Hooks Tutorial - A Crash Course on Styled Components, JSX, React Router, and HOC)
Uploaded: 2021-01-14T10:21:53.000Z
Duration: 1 h 55 min 21 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

現在進行形

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.

to 不定詞

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.

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.

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.

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.

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.

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.

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.

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.

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.

We just take a quick look at the package.

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

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.

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'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.

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.

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.

They called me away because my name is Damon Fox.

React Hooks チュートリアル - スタイル付きコンポーネント、JSX、React Router、HOCのクラッシュコース (React Hooks Tutorial - A Crash Course on Styled Components, JSX, React Router, and HOC)

字幕リスト動画再生

React Hooks チュートリアル - スタイル付きコンポーネント、JSX、React Router、HOCのクラッシュコース (React Hooks Tutorial - A Crash Course on Styled Components, JSX, React Router, and HOC)

stuff

access

constant

grab