Coding

React Hooks Tutorial – A Crash Course on Styled Components, JSX, React Router, and HOC

  • 00:00:01 hello I'm excited to show you this
  • 00:00:04 course where we're going to use react
  • 00:00:06 hooks to create a video player and
  • 00:00:08 Thomas Valen Faulk and I will be your
  • 00:00:10 guide in this course so what are we
  • 00:00:13 going to build here we're going to build
  • 00:00:14 this video player it's fully responsive
  • 00:00:17 and we're going to create this list of
  • 00:00:20 videos where we can select the video and
  • 00:00:22 also have various kind of night mode
  • 00:00:25 here if you want to shift the color for
  • 00:00:27 a light theme to a dark theme and we're
  • 00:00:31 going to use style components for all
  • 00:00:33 the CSS styling here and I'm going to
  • 00:00:36 show you how you can use different
  • 00:00:37 theming and stuff like that so I'm
  • 00:00:39 really excited for you to see this
  • 00:00:41 because I love these new hooks and I
  • 00:00:43 also think style components is great if
  • 00:00:46 we go to the react site we can read a
  • 00:00:48 little bit of hooks here at the time of
  • 00:00:51 the recording of this course they're
  • 00:00:53 fairly new so they're not an official
  • 00:00:55 release yet so I have to use this alpha
  • 00:00:57 build or react to have access to the
  • 00:00:59 hooks but that's okay we'll go through
  • 00:01:01 that in a bit we're going to install
  • 00:01:03 this so don't worry about it so we're
  • 00:01:06 going to use the state hook and the
  • 00:01:08 effect hook there's a lot more hooks and
  • 00:01:11 you can read about them here at the site
  • 00:01:12 you can also create your own hooks I
  • 00:01:14 think the effect hook and the state hook
  • 00:01:16 are the ones you're going to use in 95%
  • 00:01:19 of the cases when you code so they're
  • 00:01:22 the most important and they will kind of
  • 00:01:25 replace the state in the class component
  • 00:01:29 and the lifecycle methods so with this
  • 00:01:31 once we can have stayed and kind of
  • 00:01:34 lifecycle methods in our functional
  • 00:01:36 components there's no need to use class
  • 00:01:38 components and that's great they also
  • 00:01:41 say that it's great because if you kind
  • 00:01:43 of knew to react you don't have to learn
  • 00:01:46 all about classes and things like that
  • 00:01:48 you can do your stuff we just functional
  • 00:01:51 components so it should have a less
  • 00:01:53 learning curve as you don't have to go
  • 00:01:56 that deep into JavaScript classes well
  • 00:01:59 with that said let's go through what
  • 00:02:02 we're going to need to create this
  • 00:02:03 application we are going to use a
  • 00:02:06 library called react player it will give
  • 00:02:08 us some nice functionality like cool
  • 00:02:11 backs when playing the video and
  • 00:02:13 callbacks when the
  • 00:02:14 video has played and things like that we
  • 00:02:16 could do everything ourselves in an
  • 00:02:18 iframe but there's a lot more coding so
  • 00:02:21 it's better to use this library and we
  • 00:02:23 have all this for free so when I create
  • 00:02:26 it from scratch what you don't need to
  • 00:02:28 we're also going to use as I said style
  • 00:02:31 components and the style components is
  • 00:02:34 really great because it's almost like
  • 00:02:36 creating regular components in react but
  • 00:02:38 you create like CSS components we'll get
  • 00:02:41 to that when we get there I'll show you
  • 00:02:42 that in a later video and we're also
  • 00:02:45 going to use the react router for
  • 00:02:47 routing or videos because if you look up
  • 00:02:51 here you can see we have a unique ID for
  • 00:02:53 each video so if we click another one we
  • 00:02:56 have another ID and we use routing for
  • 00:02:58 that in that way we can just copy this
  • 00:03:01 link and paste it somewhere and we'll
  • 00:03:03 get directly to that video so it's great
  • 00:03:06 if you want to share a link or something
  • 00:03:07 like that that's why we're using react
  • 00:03:10 router you could do this play without
  • 00:03:12 the router and just change the video
  • 00:03:14 here and it will still be at the main
  • 00:03:16 domain here and not change the route and
  • 00:03:19 of course you can style this whatever
  • 00:03:22 you want later maybe there is some few
  • 00:03:24 things that could be better here with a
  • 00:03:26 styling and yeah you decide what taste
  • 00:03:29 you have and what you want to do with
  • 00:03:30 that later let's get on with it
  • 00:03:33 installing over dependencies we need for
  • 00:03:35 this if we go back to our terminal we do
  • 00:03:39 a CD and we have to go into our starter
  • 00:03:43 files directory so make sure you
  • 00:03:45 download the starter files and it's the
  • 00:03:48 folder that's called react hooks video
  • 00:03:49 player start at end so CD into that
  • 00:03:54 folder it's really important that you're
  • 00:03:57 in this folder you can rename it if you
  • 00:04:00 want it doesn't matter but do it now
  • 00:04:02 before you start doing anything and make
  • 00:04:04 sure you're in that folder and then we
  • 00:04:07 just do an NPM install as this is an
  • 00:04:14 to mediate course I assume you know how
  • 00:04:16 to use the terminal and am/pm and all
  • 00:04:18 this stuff so if you don't you probably
  • 00:04:21 should take a starter course before
  • 00:04:23 taking this course I actually have a
  • 00:04:25 starter course where we create a movie
  • 00:04:28 application so you can enroll that
  • 00:04:30 course if you want to learn the react
  • 00:04:32 stuff the basic stuff before you do this
  • 00:04:35 one well my firm just went crazy here in
  • 00:04:38 the computer I hope it doesn't bother
  • 00:04:40 you too much so you can hear what I'm
  • 00:04:41 saying
  • 00:04:42 well let's get on with it we have to
  • 00:04:44 install or react player so we write npm
  • 00:04:47 install – s react oops
  • 00:04:52 layer then we need to install or react
  • 00:04:57 router and we do that by MPM install – s
  • 00:05:00 react ro there Dom and lastly we need
  • 00:05:08 our star components so NPM install – s
  • 00:05:13 style components like so and press enter
  • 00:05:19 and that should be it we should be good
  • 00:05:21 to go we just take a quick look at the
  • 00:05:24 package.json file in the folder as I
  • 00:05:27 told you before we're using the 16.7
  • 00:05:31 alpha version so that's what I want to
  • 00:05:33 show you now it's really important to
  • 00:05:34 use this version of react otherwise the
  • 00:05:37 hooks won't be there and as you can see
  • 00:05:39 or dependencies has been installed here
  • 00:05:42 also so we should be able to just write
  • 00:05:46 NPM start and this should fire up or
  • 00:05:51 application here at localhost 3000 it
  • 00:05:56 should open up automatically but if you
  • 00:05:58 don't to go to this address here and it
  • 00:06:01 says start here as we see this here we
  • 00:06:04 know that our app is working so we can
  • 00:06:06 start building things so we can also
  • 00:06:08 just take a quick look at the folder
  • 00:06:11 structure for a project so we have as
  • 00:06:14 usual we have a public folder where our
  • 00:06:17 index dot HTML file is I've only
  • 00:06:19 imported a frontier from Google that
  • 00:06:23 we're going to use for this one and I've
  • 00:06:25 also created this kind of in
  • 00:06:27 he'd an input field where this it's a
  • 00:06:30 little trick you're going to use to get
  • 00:06:32 access to the videos in the player we
  • 00:06:34 will get back to this when we'll get
  • 00:06:36 there I'll show you this trick later on
  • 00:06:38 and we'll set the source folder there we
  • 00:06:42 have our index.js file and we have our
  • 00:06:45 components folder I created these ones
  • 00:06:47 for you so they are empty now and we're
  • 00:06:49 going to fill these ones up with code we
  • 00:06:52 also have a folder called hook we're
  • 00:06:54 going to create a high order component
  • 00:06:56 I'm going to show you how to use that
  • 00:06:58 and we have a containers folder with our
  • 00:07:02 app and this one is just the start here
  • 00:07:04 that we see I created this one so it
  • 00:07:07 just started up something here and the
  • 00:07:09 playlist stamp is empty the playlist
  • 00:07:12 items is empty and this one is the main
  • 00:07:15 component for the app where most of our
  • 00:07:17 logic will go and I also supplied the
  • 00:07:19 styles for you here because I think this
  • 00:07:21 is a react course or not to CSS course
  • 00:07:24 hey it's kind of boring seeing me
  • 00:07:25 creating I'm writing CSS a long time
  • 00:07:29 here so we're going to create two maybe
  • 00:07:31 one or two of these when we go through
  • 00:07:33 the style components and the other ones
  • 00:07:36 I'll give you for free so you don't have
  • 00:07:38 to do that by yourself
  • 00:07:40 so I think this is it we're good to go
  • 00:07:42 we have our local host up and running
  • 00:07:45 here and we can start scaffolding out
  • 00:07:48 our application in the next video
  • 00:07:50 all right we're going to start
  • 00:07:52 scaffolding out or components and the
  • 00:07:56 structure of this application so we're
  • 00:07:58 going to create a lot of functional
  • 00:07:59 components here and we just create some
  • 00:08:01 basic stuff in there now so we're going
  • 00:08:04 to come back to all of them and finish
  • 00:08:05 them later on so we can start with the
  • 00:08:08 WBM player yes WBM is short for vibin
  • 00:08:12 they call me Valen because my name is
  • 00:08:14 Bateman so this is my player I'm
  • 00:08:17 doing so I selected to call it WB I'm
  • 00:08:19 player you can shake the name if you
  • 00:08:21 don't like it I don't care so do
  • 00:08:23 whatever you want so we're just going to
  • 00:08:26 create regular components regular
  • 00:08:28 functional components so we import react
  • 00:08:30 from react and in this one we also going
  • 00:08:34 to need a video and a playlist because
  • 00:08:36 the video is the kind of window where we
  • 00:08:38 play the video and the playlist
  • 00:08:40 is the playlist to the right in the
  • 00:08:42 application it will look at it he have
  • 00:08:46 it no I have it there yeah so this is
  • 00:08:50 the playlist and here we're going to
  • 00:08:52 have a night mode component we're going
  • 00:08:54 to have a header component and this one
  • 00:08:56 is also container
  • 00:08:57 it's the playlist items container and
  • 00:09:00 this is each a playlist component of
  • 00:09:03 these ones here and this is the video
  • 00:09:05 component we are using here let's go
  • 00:09:08 back to our application so we import
  • 00:09:11 video from dot dot forward slash video
  • 00:09:15 and of course we haven't created this
  • 00:09:17 ones yet so it will give us an error if
  • 00:09:19 we save and try to run our application
  • 00:09:21 right now so bear with me we'll fix this
  • 00:09:24 in a second and we import the playlist
  • 00:09:28 from and this one is going to be dot dot
  • 00:09:31 four slash containers and playlist
  • 00:09:36 because this one is a container and the
  • 00:09:40 other ones are just presentational
  • 00:09:41 components and they go outside the
  • 00:09:44 containers folder then we create a Const
  • 00:09:48 wbm layer props on our function like
  • 00:09:54 this and also make sure you have the
  • 00:09:57 casing right on everything we do in this
  • 00:09:59 course because I know there's a lot of
  • 00:10:01 people having trouble sometimes and it's
  • 00:10:04 in 90% of the case it's some type error
  • 00:10:07 or it's the casing here that's different
  • 00:10:10 and it will throw an error if you don't
  • 00:10:12 have the casing exactly like I write it
  • 00:10:15 here in the video so make sure you have
  • 00:10:17 everything correct and check it twice if
  • 00:10:20 you got some error when you try it later
  • 00:10:22 on and this one we have to have a return
  • 00:10:25 statement and parenthesis and we're
  • 00:10:28 going to return the video component and
  • 00:10:32 the playlist we're going to change this
  • 00:10:37 a lot in the future videos because this
  • 00:10:39 is the main component most of our logic
  • 00:10:42 will go here so it will grow and have a
  • 00:10:44 lot more code and we export default WB
  • 00:10:49 and player like so and we can save it
  • 00:10:53 also
  • 00:10:54 we have some error here and that's
  • 00:10:56 because you can't return to components
  • 00:10:59 we can create a rag fragment here and
  • 00:11:03 you can just use this this is shorthand
  • 00:11:05 for react fragment so you can just write
  • 00:11:12 it like this like so we can copy all of
  • 00:11:19 this code we can move into our playlist
  • 00:11:22 component we paste it we input react
  • 00:11:25 these ones we don't need but we are
  • 00:11:28 going to need the playlist header and we
  • 00:11:34 import that one from dot forward slash
  • 00:11:37 playlist header like so we also going to
  • 00:11:42 need a playlist items and we grab that
  • 00:11:46 from dot dot forward slash containers
  • 00:11:50 lay list items and we going to need our
  • 00:11:54 night mode also and that one we grab
  • 00:11:58 from dot forward slash night mode like
  • 00:12:01 so and this one is only going to return
  • 00:12:04 JSX
  • 00:12:05 so we can omit these ones and remove the
  • 00:12:09 return and make it nice like that first
  • 00:12:16 we have our night mode component then we
  • 00:12:20 have our play list header and then we
  • 00:12:25 have our play list items there's a
  • 00:12:29 typing error here it should say playlist
  • 00:12:31 items and of course we have to rename
  • 00:12:34 this one also so we call it playlist and
  • 00:12:39 that's it we say that one and we can
  • 00:12:43 copy this one and go to playlist items
  • 00:12:48 paste the Korean we can remove this one
  • 00:12:52 we are going to import our playlist item
  • 00:12:55 from dot dot forward slash playlist item
  • 00:12:59 we can remove the night mode and we're
  • 00:13:02 also going to import the high order
  • 00:13:04 component in this one later on but we'll
  • 00:13:06 say that one
  • 00:13:07 for a special video about this we rename
  • 00:13:10 this one to play list items and export
  • 00:13:15 it as playlist items of course and in
  • 00:13:19 this one we're just going to return a
  • 00:13:21 playlist item for now like so we can
  • 00:13:29 make little nicer and we save it so this
  • 00:13:34 is our container components we have our
  • 00:13:36 app we have our playlist or playlist
  • 00:13:38 items we have our main component the WB
  • 00:13:42 and player Deus so let's move on or hi
  • 00:13:46 our component we say this one for later
  • 00:13:48 as I said so we go through our
  • 00:13:49 presentation or components we can paste
  • 00:13:53 our code we can remove all of this and
  • 00:13:57 remove these ones here for now and
  • 00:14:00 rename it to night mode like so now we
  • 00:14:03 can just create a div for now here every
  • 00:14:07 write in light mode say this one and
  • 00:14:12 actually we can copy this one we go to a
  • 00:14:14 playlist header rename this one to play
  • 00:14:22 list header and that's enough for this
  • 00:14:26 one also for now so say that one and
  • 00:14:28 move on to our playlist items paste the
  • 00:14:32 code and rename it to play list items
  • 00:14:37 playlist item not witness save it and we
  • 00:14:43 go to our last one the video das paste
  • 00:14:46 it and you probably know it but now we
  • 00:14:50 should rename it to video like so and
  • 00:14:54 for this one we can also import our
  • 00:14:56 react layer so import react player from
  • 00:15:00 react player like this and this should
  • 00:15:05 be it we have all our components
  • 00:15:06 scaffold out now and it
  • 00:15:13 going through a pas and import WBN
  • 00:15:17 player from and this one is just going
  • 00:15:21 to be one dot and /wb m player and we
  • 00:15:26 can return that component here like so
  • 00:15:33 and we save it go back to our
  • 00:15:35 application and as you can see it's
  • 00:15:37 working because it's showing the text we
  • 00:15:39 wrote in the different component so we
  • 00:15:42 know that our structure of working in
  • 00:15:43 the application in the next video we're
  • 00:15:46 going to finish our apt of j/s and talk
  • 00:15:48 a little about routing and react your
  • 00:15:50 router it's time to start coding our
  • 00:15:53 application from real and we're going to
  • 00:15:55 start by creating our routes we're going
  • 00:15:57 to need for this one so we're going to
  • 00:15:59 be working in the app top JS file for
  • 00:16:02 this video
  • 00:16:02 we need a browser router and the routes
  • 00:16:04 because we want every individual video
  • 00:16:07 to have a unique link so we can go
  • 00:16:09 directly to it in our video player so
  • 00:16:12 that's why we use in routes for this one
  • 00:16:14 let's start off by importing everything
  • 00:16:17 we need from the browser router so
  • 00:16:19 import browser router and we need the
  • 00:16:23 route and we need a switch and we grab
  • 00:16:27 them from react router Dom we can delete
  • 00:16:33 this one we won't need it
  • 00:16:35 instead we create a new component called
  • 00:16:38 browser order and we wrapped everything
  • 00:16:40 in that component and inside we create a
  • 00:16:43 switch and we can start creating your
  • 00:16:47 first route and it's going to be an
  • 00:16:50 exact match with a path to the route our
  • 00:16:54 component are going to be the WBM player
  • 00:16:59 and what this will do is when we go to
  • 00:17:04 the route here in my case it's vaping
  • 00:17:07 Falcone's last react underscore video
  • 00:17:10 player it will start the application
  • 00:17:12 from scratch so in this case now you see
  • 00:17:15 it's going to another route here that's
  • 00:17:17 because I played a bunch of videos here
  • 00:17:19 and it remembers that I was on the video
  • 00:17:21 7 I'm going to show you this in a later
  • 00:17:23 video so don't worry how we do this
  • 00:17:26 routing
  • 00:17:26 how it remembers where we left off the
  • 00:17:29 last time so this is kind of the first
  • 00:17:33 time when you go to the video player and
  • 00:17:34 haven't played anything then it's going
  • 00:17:36 to stay in the root and not forward you
  • 00:17:39 to another video ok let's create another
  • 00:17:43 route it's also going to be an exact one
  • 00:17:46 and the path is going to be forward
  • 00:17:48 slash : active video so you probably
  • 00:17:53 know this as this is an intermediate
  • 00:17:55 course and not the starter course so
  • 00:17:57 what this will do is create kind of a
  • 00:17:59 variable for us we call it whatever we
  • 00:18:01 want in this case it's active video and
  • 00:18:03 it's this ID up here by calling this one
  • 00:18:08 in our application we can grab this ID
  • 00:18:10 up here so the component will be guess
  • 00:18:16 what it's going to be the exact same
  • 00:18:17 component for this one and why is that
  • 00:18:20 yeah that's course we don't want to
  • 00:18:22 change the view here we just want to go
  • 00:18:24 to different videos but have the same
  • 00:18:26 view so we're just using this so we can
  • 00:18:29 get this ID and use it in our
  • 00:18:31 application make sense I hope so
  • 00:18:35 one thing you also could do here is to
  • 00:18:37 create kind of a not found component I
  • 00:18:40 haven't done this now so if we for
  • 00:18:42 example go into another directory here
  • 00:18:44 it won't show us anything or if you
  • 00:18:47 write the wrong ID it won't show us
  • 00:18:50 anything either so that's kind of an
  • 00:18:52 exercise you can do if you want just
  • 00:18:55 create another route that will fall back
  • 00:18:57 to a not found component when the routes
  • 00:19:00 don't match okay this is actually it for
  • 00:19:04 this video it's a short one and in the
  • 00:19:06 next video we're going to talk about
  • 00:19:07 style components and how it can use them
  • 00:19:10 to style our applications ok we're going
  • 00:19:13 to talk a little about star components
  • 00:19:16 in this video and also start coding with
  • 00:19:18 star components if we first go to the
  • 00:19:21 star components comm we can check out
  • 00:19:24 what star components are and yeah it's
  • 00:19:26 visual primitives for the component age
  • 00:19:28 yeah use the best bits of es6 and CSS to
  • 00:19:33 style your apps without stress that
  • 00:19:35 sounds wonderful you should also know
  • 00:19:37 that there's different opinions about
  • 00:19:39 star compo
  • 00:19:40 and what you should use creating react
  • 00:19:43 applications or you maybe should use CSS
  • 00:19:45 modules or regular CSS I happen to like
  • 00:19:48 star components and I wanted to try
  • 00:19:50 using it in this course I hope you like
  • 00:19:53 it if you don't like it you can of
  • 00:19:55 course implement another styling for
  • 00:19:58 your application you can read everything
  • 00:20:00 about it here and I suggest you do it if
  • 00:20:02 you're interested in in star components
  • 00:20:04 in the future the basic idea here is
  • 00:20:07 that you create components with your
  • 00:20:10 styles so you can use the Stars just as
  • 00:20:12 regular react components if we look at
  • 00:20:15 the basic instructions here we have to
  • 00:20:17 import style from star components we've
  • 00:20:19 already installed style components we
  • 00:20:21 did that in the first video with the NPM
  • 00:20:24 install command and then you create
  • 00:20:26 these cones and call it whatever you
  • 00:20:29 like it will be a component to use for
  • 00:20:31 you later on and then you create your
  • 00:20:34 style as a regular CSS so the only thing
  • 00:20:38 you may be wondering about here the
  • 00:20:39 these backticks and it's called
  • 00:20:42 a tagged template literal you can
  • 00:20:44 basically invoke function with backticks
  • 00:20:47 instead of parentheses and they write
  • 00:20:50 all about it here and this is not a star
  • 00:20:52 component specific it's in es6
  • 00:20:55 JavaScript so you have to look this up
  • 00:20:57 if you don't know what is this so I
  • 00:21:00 suggest you do that also if you're
  • 00:21:02 interested in learning more about es6
  • 00:21:04 and javascript and as you see rewrite
  • 00:21:08 the style inside of these backticks and
  • 00:21:10 it will create a component for us to use
  • 00:21:13 in our code and that's the basics of
  • 00:21:16 style components and we're going to go
  • 00:21:18 to our code editor and start coding or
  • 00:21:21 first style component if we take a look
  • 00:21:24 at our starter files you have a
  • 00:21:26 directory called Stice I choose to
  • 00:21:29 separate this out from the main
  • 00:21:31 components and have them in their own
  • 00:21:33 file and there's also different opinions
  • 00:21:35 about this some like to have them in
  • 00:21:37 their component directly but I think
  • 00:21:40 it's nice to do like this to kind of
  • 00:21:42 separate them in their own files but if
  • 00:21:44 it's a large application it may be good
  • 00:21:47 to have it in their own components so
  • 00:21:49 you know exactly where you have the
  • 00:21:51 styles for your component as always to
  • 00:21:54 do as you
  • 00:21:54 want I'll choose to do it this way
  • 00:21:56 because I like it and I think it's
  • 00:21:58 fitting for this application and this
  • 00:22:01 course alright we're going to work in
  • 00:22:03 the app top JS file this time also and
  • 00:22:06 we're also going to work with a global
  • 00:22:08 style yes in the Styles folder because
  • 00:22:12 now we're first going to create the
  • 00:22:14 global styles for the whole application
  • 00:22:16 if we look at the global style yes I
  • 00:22:19 already provided these for you we're
  • 00:22:21 going to delete it now if you don't want
  • 00:22:23 to do this if you don't want to create
  • 00:22:25 CSS and if you don't want to do all
  • 00:22:28 these things with star components you
  • 00:22:30 can just keep this because this way you
  • 00:22:32 can just import these in the components
  • 00:22:34 later as we're going to do and you don't
  • 00:22:37 have to write your CSS at all so they'll
  • 00:22:41 eat these ones and we start writing some
  • 00:22:44 code here again so we import something
  • 00:22:49 called create global styles from style
  • 00:22:55 components and this is something as it
  • 00:22:59 says we can use to create a global stars
  • 00:23:01 it's in the star components library so
  • 00:23:05 we use this ones when we want to create
  • 00:23:07 global stars then we create the Const we
  • 00:23:10 can call it whatever we want and I want
  • 00:23:12 to call it global style for this one
  • 00:23:15 then we use create global style it
  • 00:23:19 shouldn't be on s there it should just
  • 00:23:22 say create global style then we create
  • 00:23:26 backticks and inside these backticks we
  • 00:23:30 write our CSS first we want to set
  • 00:23:35 box icing to board a box in the whole
  • 00:23:39 application then we have our body and we
  • 00:23:45 set the font size to 10 pixels and we
  • 00:23:48 set the font family – Hinda sans-serif
  • 00:23:54 and this is the one I imported in the
  • 00:23:57 index from the google fonts and this is
  • 00:24:01 it for a global styling we just have to
  • 00:24:04 export this 1x put default global style
  • 00:24:08 like this we save it and as I said this
  • 00:24:12 is takes AK code as we just deleted I
  • 00:24:14 just wanted to provide you with this if
  • 00:24:17 you don't want to do all this so we go
  • 00:24:20 back to our app top guess we have to
  • 00:24:22 import our global style that we just
  • 00:24:25 created global star from we grab that
  • 00:24:30 from dot forward slash tiles global
  • 00:24:34 style and now we can use it in this
  • 00:24:37 component and how do we apply the global
  • 00:24:41 style to our application well it's
  • 00:24:43 fairly easy actually in this case we
  • 00:24:46 just create the component called global
  • 00:24:49 style like so and this will apply the
  • 00:24:53 global style to our application and as
  • 00:24:56 you can see we have an arrow now and
  • 00:24:57 that's because as it says the router may
  • 00:25:00 only have one schoiar element so we'll
  • 00:25:02 wrap this one's in a fragment like so
  • 00:25:12 you see that the font size is less now
  • 00:25:14 so we know that the global stars are
  • 00:25:17 kicking in and this is it this is how we
  • 00:25:20 applied global styling with star
  • 00:25:22 components in the next video I'm going
  • 00:25:25 to show you how to do the styling for
  • 00:25:27 the individual components
  • 00:25:29 we've finished our global styling and
  • 00:25:32 we're going to continue to do some
  • 00:25:33 regular component styling in this video
  • 00:25:36 so if we go into the Styles folder and
  • 00:25:40 into the style playlist we're going to
  • 00:25:42 create the style component for the
  • 00:25:44 playlist so as before delete this one
  • 00:25:47 and we're going to write it from scratch
  • 00:25:49 first we import style just as before
  • 00:25:53 from styled components then we create a
  • 00:25:57 Const called styled playlist and an
  • 00:26:01 equal sign and style dot div and if this
  • 00:26:05 for example should be an input box we
  • 00:26:08 just write input like this or if you can
  • 00:26:11 have what element you want here so in
  • 00:26:13 this case it's going to be a deep so we
  • 00:26:15 use the deep here and now it's just
  • 00:26:18 regular CSS here so not that funny but
  • 00:26:21 we have to do it so we set a flex to 1
  • 00:26:27 don't know if we need to have these
  • 00:26:30 vendor prefixes here but to be sure I
  • 00:26:32 put them in so we're creating a flex box
  • 00:26:42 here just for centering things in a nice
  • 00:26:46 way if you're not familiar with Flex box
  • 00:26:50 I recommend looking it up it's really
  • 00:26:51 nice on you it's much easier to Center
  • 00:26:54 things and vertical center and
  • 00:26:56 horizontal Center and aligning your
  • 00:26:58 items and we have a color of white for
  • 00:27:02 that one and also if you're going to
  • 00:27:04 have some other classes and things maybe
  • 00:27:06 for example you want to have some
  • 00:27:08 styling for different viewport and some
  • 00:27:11 responsive styling you just write it
  • 00:27:13 below here and you can have what classes
  • 00:27:16 you want it's just regular CSS so you
  • 00:27:18 can name some class and you just do like
  • 00:27:21 this and write your CSS in here it just
  • 00:27:24 has to be inside these backticks so for
  • 00:27:27 example you don't want to create a
  • 00:27:28 component for every little class you
  • 00:27:30 have in this case we don't have other
  • 00:27:32 classes we have one media query that
  • 00:27:34 we're using for the responsive
  • 00:27:36 functionality so we write media screen
  • 00:27:41 and
  • 00:27:43 max with 1400 pixels and we have a width
  • 00:27:49 of 100% and display:block and finally we
  • 00:27:56 just export this one also export default
  • 00:27:59 style playlist like so and this is it
  • 00:28:02 this is the style for the playlist we
  • 00:28:05 save this one and we go back into our
  • 00:28:08 playlist das file first we import our
  • 00:28:11 newly created styled playlist from
  • 00:28:16 doctored forward slash Styles tiled
  • 00:28:20 playlist like so and then instead of
  • 00:28:25 this fragment here we can just wrap it
  • 00:28:27 in the styled playlist like so and if we
  • 00:28:33 take a look here we can see that it's
  • 00:28:36 not showing the other ones here and
  • 00:28:37 that's because they right now we're
  • 00:28:40 using a white color in the playlist but
  • 00:28:43 they're there so don't worry it will
  • 00:28:45 look a lot better soon right now it's
  • 00:28:47 looking tragically sad but we're going
  • 00:28:50 to fix this and we're going to do one
  • 00:28:52 more just to make some exercise in this
  • 00:28:54 one so if we go into our styled playlist
  • 00:28:58 items in the Styles folder just as
  • 00:29:01 before delete this one I think it's good
  • 00:29:05 to repeat things because that way you
  • 00:29:07 learn a lot faster and maybe it's boring
  • 00:29:10 and you already have this code as as
  • 00:29:12 Thole you can just save it and let it be
  • 00:29:15 but I highly recommend that you do like
  • 00:29:17 this and repeat it and just write it
  • 00:29:18 because your brain will learn a lot more
  • 00:29:21 if you write it down yourself so import
  • 00:29:24 style from style components again we
  • 00:29:29 create the const called styled play list
  • 00:29:32 items and we write styled div this is a
  • 00:29:37 deal also and we do two backticks
  • 00:29:41 and we're going to write a CSS between
  • 00:29:43 these backticks
  • 00:29:44 and we have a padding:0 20px 0 and 20
  • 00:29:50 pixels actually we can do like this like
  • 00:29:54 so that's the shorthand for that one
  • 00:29:57 we have an overflow why of all we have a
  • 00:30:01 height of 20 8 VW a max height of 500
  • 00:30:09 pixels right
  • 00:30:11 then we're going to do some trick c2
  • 00:30:13 style or a scroll bar and we have to do
  • 00:30:16 some WebKit stuff here so : :
  • 00:30:19 WebKit scroll bar we want a width of 5
  • 00:30:28 pixels : :
  • 00:30:32 WebKit scrollbar track and we set the
  • 00:30:39 background to transparent and we have a
  • 00:30:46 WebKit scrollbar thumb where we want our
  • 00:30:54 background to be 8 8 8 & or border
  • 00:31:01 radius 2 pixels and the last one : :
  • 00:31:07 WebKit scrollbar thumb and hover and we
  • 00:31:15 want a background to be a little darker
  • 00:31:18 so we set that one to five five five
  • 00:31:21 that's it then we export default styled
  • 00:31:28 latest items and we say this one so I
  • 00:31:33 hope you got to flow here now we just
  • 00:31:35 import start and we create the cons to
  • 00:31:37 name it whatever we want this is not
  • 00:31:39 something specific to style components
  • 00:31:42 or react or anything you can call it
  • 00:31:44 whatever you want and we create our CSS
  • 00:31:46 inside these backticks
  • 00:31:48 here as I said before this is the
  • 00:31:51 element you want to create the star
  • 00:31:53 component for it can be whatever HTML
  • 00:31:55 element you want so in this case it's a
  • 00:31:58 deal we go into our playlist items das
  • 00:32:02 we import
  • 00:32:05 style lay list items from total forward
  • 00:32:10 slash styles and styled playlist items
  • 00:32:16 like so then we can wrap this component
  • 00:32:20 in our style playlist items and we save
  • 00:32:28 it and we have some error here module
  • 00:32:32 not found okay there must be some
  • 00:32:34 misspelling here from my side of course
  • 00:32:39 this one shouldn't be there it should be
  • 00:32:41 right there instead
  • 00:32:43 bad mistake by me but alright
  • 00:32:47 that's coding you know trial and error
  • 00:32:49 all the time and now it should work
  • 00:32:51 again still not showing anything
  • 00:32:54 exciting here but it will soon get more
  • 00:32:57 exciting I promise okay we can do one
  • 00:33:00 more thing here before we finish of this
  • 00:33:01 video we're going to go into our
  • 00:33:04 playlist item is not items with an S
  • 00:33:07 playlist item J s and for this one we're
  • 00:33:11 not going to create the whole CSS for
  • 00:33:14 this one we're just going to import it
  • 00:33:16 here import start play list item from
  • 00:33:23 dot forward slash Styles styled playlist
  • 00:33:27 item like so and as you can see here if
  • 00:33:31 we just check the CSS file playlist item
  • 00:33:34 you see it's a lot of CSS code here and
  • 00:33:37 we don't have to write all this now it's
  • 00:33:40 kind of a boring the one thing you can
  • 00:33:42 notice here is this special where we use
  • 00:33:44 props here to change different values on
  • 00:33:48 the properties of the CSS and we're
  • 00:33:50 going to talk this in the next video
  • 00:33:51 when we go through the theming with star
  • 00:33:54 components so don't worry so go back
  • 00:33:56 into our playlist item and instead of
  • 00:33:59 the deep we just wrap this with styled
  • 00:34:03 playlist item like so and save it still
  • 00:34:06 not showing up anything here but it will
  • 00:34:09 soon
  • 00:34:11 all right so far so good this is the
  • 00:34:13 last video in setting up the styled
  • 00:34:15 components to be used in our application
  • 00:34:18 we're going to talk a little about
  • 00:34:19 theming and how we can use it to have
  • 00:34:22 different themes in our app so let's get
  • 00:34:25 started here we're going to be mostly in
  • 00:34:27 our WBM layer JS file so make sure you
  • 00:34:31 navigate in to that component style
  • 00:34:34 components have something called a theme
  • 00:34:36 provider and we can use that to switch
  • 00:34:38 different themes in our application and
  • 00:34:41 also we can use it to sort of set up
  • 00:34:44 different properties that we're going to
  • 00:34:46 reuse somewhere in our Styles it's
  • 00:34:49 really convenient if you're for example
  • 00:34:51 have some predefined colors then you can
  • 00:34:53 just use those colors by fetching the
  • 00:34:55 props for your component because the
  • 00:34:57 theme provider will make sure that the
  • 00:35:00 theme get passed down by props to your
  • 00:35:02 component so first of all make sure we
  • 00:35:05 import our theme provider so import
  • 00:35:08 theme provider from style components so
  • 00:35:15 we're going to create our themes now
  • 00:35:17 first of all we have a regular theme we
  • 00:35:20 call that theme it's just a regular
  • 00:35:24 object here you can see we create a
  • 00:35:25 Const named theme and it's a regular
  • 00:35:27 JavaScript object so we have a beedi
  • 00:35:29 color of three five three five three
  • 00:35:34 five we have a beedi color item and that
  • 00:35:38 one will be for one for one for one like
  • 00:35:41 so we have a beedi color item active and
  • 00:35:46 that one is going to be 45 c63 whoops
  • 00:35:52 there's something wrong here of course
  • 00:35:54 this should be comas here as its own
  • 00:35:57 object BD color played and that one is
  • 00:36:02 going to be five to six d4e and we have
  • 00:36:07 a border it's going to be none and we
  • 00:36:10 have a border played and it's going to
  • 00:36:15 be none also and we have a color that is
  • 00:36:19 going to be white so set that to ffff
  • 00:36:24 all right that's our theme object and
  • 00:36:27 then we're going to create another
  • 00:36:28 themed object it's the object for the
  • 00:36:30 light theme so we can just copy this one
  • 00:36:33 and right below it we paste it and we
  • 00:36:37 call that theme light and we're going to
  • 00:36:40 change some values here so we set the BT
  • 00:36:44 color to FFF white we also set the BT
  • 00:36:48 color item to white
  • 00:36:50 we set the B the color item active to 80
  • 00:36:54 a 7 B 1 we set our B the color played to
  • 00:36:59 7 D 9 9 7 9 really innovative numbers
  • 00:37:05 here and you can of course style it like
  • 00:37:07 whatever you liked for this one we're
  • 00:37:09 going to have a border of 1 pixel solid
  • 00:37:12 and a color of 3 5 3 5 and 3 5 and
  • 00:37:18 border played it should say border
  • 00:37:22 played there so make sure you change
  • 00:37:23 this in both of the themes border plate
  • 00:37:27 and that should be non there and the
  • 00:37:30 color for this one should be 3 5 3 5 3 5
  • 00:37:35 like so so this is our objects with all
  • 00:37:39 the different theming styles and we have
  • 00:37:42 this theme provider that we imported
  • 00:37:43 from style components we can use this
  • 00:37:46 one let's go down here to our return
  • 00:37:49 statement
  • 00:37:49 and first of all we're going to wrap
  • 00:37:51 everything in our theme provider so make
  • 00:37:58 sure you move it inside the theme
  • 00:38:01 provider like so then we're going to
  • 00:38:05 send in our themes so we have the theme
  • 00:38:07 and we're going to set the theme based
  • 00:38:10 on our button if you look here we have
  • 00:38:14 this nice mode button here so our theme
  • 00:38:17 is going to be based on how we have set
  • 00:38:19 this button state so we grab that one
  • 00:38:22 from state night mode and this is a
  • 00:38:26 ternary operator here so if the state
  • 00:38:28 night mode is true we're going to grab
  • 00:38:30 the theme cuz that's the night mode
  • 00:38:32 otherwise we're going to show the theme
  • 00:38:35 light
  • 00:38:36 like so and of course this won't work
  • 00:38:39 now because we have no state yet and we
  • 00:38:41 haven't fixed all other things so it
  • 00:38:43 will throw an error now and we're going
  • 00:38:46 to replace this fragment here with or
  • 00:38:48 WBN player styles first of course we are
  • 00:38:51 to import them so we grab them from
  • 00:38:54 import style WB and player from dot dot
  • 00:39:00 forward slash styles styled WB and
  • 00:39:05 player like so and now we can use it so
  • 00:39:09 we replace the fragment with style
  • 00:39:11 WB and player all right we have wrapped
  • 00:39:14 everything we return in our theme
  • 00:39:15 provider and we have provided a theme
  • 00:39:18 based on the state on our night mode
  • 00:39:20 button we also have created a style for
  • 00:39:24 the player component here so if we go
  • 00:39:27 into our Styles folder and style WB and
  • 00:39:30 player and this is how we can access the
  • 00:39:33 values in the two themes we created in
  • 00:39:35 the component so we can get again delete
  • 00:39:39 all of this and we're going to create it
  • 00:39:40 from scratch and we import style from
  • 00:39:44 style components just as before and we
  • 00:39:49 create a Const of style WBN player and
  • 00:39:53 we use style that we imported and it's
  • 00:39:56 deep this time also create two backticks
  • 00:39:59 and we write our CSS inside of these
  • 00:40:03 backticks just as before so our
  • 00:40:06 background are going to be based on if
  • 00:40:08 we have the light or dark theme and how
  • 00:40:11 do we access this well in our WB and
  • 00:40:14 player yes we use this theme provider
  • 00:40:16 and supply the theme that means we now
  • 00:40:19 have a prop that's named theme and we
  • 00:40:21 can access all of these values in this
  • 00:40:24 prop so we go back to our style style WB
  • 00:40:28 and player yes and for a background we
  • 00:40:30 grab or prop we do that by a dollar sign
  • 00:40:33 and curly brackets we grab our props and
  • 00:40:36 we grabbed it from props dot theme VD
  • 00:40:40 color just as we named it in this
  • 00:40:42 component here so this is the one we
  • 00:40:45 grabbing based on what theme we are
  • 00:40:48 using light or dark
  • 00:40:50 we do the same with our border or props
  • 00:40:55 error function we grab it from props
  • 00:40:59 theme and border and that ones are just
  • 00:41:03 regular CSS so we have a max width of
  • 00:41:05 1800 pixels we have a margin of Cyrano
  • 00:41:10 row we display it as a flexbox WebKit
  • 00:41:14 box ms flex box and display flex we have
  • 00:41:22 a flex direction over Oh a max height of
  • 00:41:29 863 pixels we have a transition all 0.5
  • 00:41:34 seconds and an ease like so then we have
  • 00:41:38 a media query here for our
  • 00:41:39 responsiveness so we have media screen
  • 00:41:44 and max width of 1400 pixels we display
  • 00:41:52 block and max height of 10,000 pixels
  • 00:42:00 well this is CSS so you have to you can
  • 00:42:03 try it yourself and see what all these
  • 00:42:05 values does to the app and you also have
  • 00:42:07 to export this one so export default
  • 00:42:12 style w VN player that's all and save it
  • 00:42:18 and that's it that's how you use themes
  • 00:42:20 with star components one more thing
  • 00:42:23 we're going to do in this video is we're
  • 00:42:24 going to connect or different style
  • 00:42:26 sheets here with our components so we go
  • 00:42:29 through all our components here in our
  • 00:42:31 app we've already all the style sheets
  • 00:42:33 we need here we have the global style
  • 00:42:35 and the styles for the individual
  • 00:42:37 component in our playlist we also have
  • 00:42:40 all our styles you know playlist items
  • 00:42:43 we also have our styles in our WBN
  • 00:42:46 player we have all our styles in the
  • 00:42:50 night mode EAS we're going to import or
  • 00:42:54 style sheet for that one so we import
  • 00:42:57 styled night mode from dot forward slash
  • 00:43:02 styles
  • 00:43:04 night mode here we wrap this one with a
  • 00:43:09 style night mode instead like so and
  • 00:43:15 actually we can just finish this one as
  • 00:43:17 we here we have a span and we write
  • 00:43:23 night mode and a column then we have a
  • 00:43:28 label with a class name of switch then
  • 00:43:35 we have an input with the type of
  • 00:43:40 checkbox we set the checked to night
  • 00:43:45 mode which set the on change to a
  • 00:43:49 callback function that we call night
  • 00:43:52 mode callback and as before these are
  • 00:43:57 not going to work now because we haven't
  • 00:43:59 created this ones yet we have
  • 00:44:04 span with a class name of slider round
  • 00:44:11 we can just destructure the props here
  • 00:44:14 also we have a night mode callback and
  • 00:44:19 we have a nice mode and that's it for
  • 00:44:24 this component and we're going to create
  • 00:44:26 these ones in a later video so don't
  • 00:44:28 worry say this one okay we have a few
  • 00:44:32 more components left that we're going to
  • 00:44:33 import or styles for so we go into our
  • 00:44:36 playlist header yes and we import our
  • 00:44:39 style playlist header from dot forward
  • 00:44:44 slash styles styled playlist header like
  • 00:44:48 so and then we import our styled journey
  • 00:44:52 from dot forward slash styles style
  • 00:44:57 journey and this is also quite a small
  • 00:45:01 components I think we can finish this
  • 00:45:03 off right now we have our styled
  • 00:45:06 playlist header you wrap it in that one
  • 00:45:08 then we have a P tag and we grab that
  • 00:45:11 from a probe called active dot title
  • 00:45:14 then we have our styled journey and also
  • 00:45:22 active probe we grab the numb and we
  • 00:45:25 have a forward slash and we have a total
  • 00:45:28 like so and this is it for this one and
  • 00:45:31 these ones here it is what you see here
  • 00:45:34 this is the journey we have the active
  • 00:45:36 video and the total video and this is
  • 00:45:38 the title of the active video that's the
  • 00:45:41 ones who goes here we can destruct you
  • 00:45:43 the props for this one also the active
  • 00:45:46 and the total like so so it's nice and
  • 00:45:48 clean then we go to our playlist item
  • 00:45:51 yes we already have imported or stars
  • 00:45:54 for that one but we can finish this
  • 00:45:57 component off also
  • 00:45:59 and for this one you can see we're
  • 00:46:01 sending in some props so we send him the
  • 00:46:03 active and we send in the played like so
  • 00:46:07 and we destructed the props we have the
  • 00:46:11 video we have the active and we have the
  • 00:46:15 played so if we go and check our style
  • 00:46:17 sheet for this one style playlist item
  • 00:46:20 you can see that the props we send in we
  • 00:46:22 using them here also just as we did
  • 00:46:24 before with the theming so we have these
  • 00:46:27 props accessible for us and we can
  • 00:46:29 change the CSS based on the props it
  • 00:46:32 works the same way as I showed you
  • 00:46:34 before here we have the theme and here
  • 00:46:37 we also have the props that's called
  • 00:46:38 active and also the props is called
  • 00:46:41 played we're changing the visual of our
  • 00:46:44 player based on the active video and if
  • 00:46:46 it's played or not that's this one here
  • 00:46:49 is the green dot here that's going to
  • 00:46:51 show up you can check those CSS files
  • 00:46:54 out as I said before this is not the CSS
  • 00:46:57 course it's a react course so I'm not
  • 00:47:00 going to go through all of these CSS the
  • 00:47:02 most important thing here is that you
  • 00:47:04 can use props like this with the style
  • 00:47:06 components so I suggest you can go
  • 00:47:08 through them and see how I've done it
  • 00:47:10 here we go back to a playlist item dot
  • 00:47:13 yes and finish this one of all so first
  • 00:47:16 we have a deal with a class name of WBM
  • 00:47:19 player underscore underscore video minus
  • 00:47:23 number and we have the video and num for
  • 00:47:26 that one can actually copy this one here
  • 00:47:33 this one is going to have last name of
  • 00:47:35 video name and this one is going to have
  • 00:47:38 video time and here we grabbed a video
  • 00:47:43 title and here we grab the duration like
  • 00:47:48 so and this is of course these ones here
  • 00:47:52 in each item that we are setting up here
  • 00:47:56 so say that one and we have the last one
  • 00:47:59 to go and that's our video we import
  • 00:48:02 styled video rapper from dot forward
  • 00:48:08 slash styles style video rapper and we
  • 00:48:14 import style video from dot forward
  • 00:48:19 slash Styles style video like so I
  • 00:48:23 actually think we're going to finish
  • 00:48:24 this one off also and we're going to
  • 00:48:27 talk more about these components later
  • 00:48:29 on when we are assembling the video
  • 00:48:31 player with these components so we're a
  • 00:48:34 proper active we have an autoplay we
  • 00:48:37 have an end callback and we have a
  • 00:48:41 progress callback we change this one to
  • 00:48:44 style video and inside of this one we
  • 00:48:48 have a style video wrapper like so and
  • 00:48:52 our react player goes inside this one's
  • 00:48:54 a rack player or the one that we
  • 00:48:57 imported here and also installed with an
  • 00:49:00 Pam earlier so this one will take a few
  • 00:49:03 props we have a width of 100% we have a
  • 00:49:10 height of one hundred percent we do some
  • 00:49:13 inline styling here with this one it's
  • 00:49:15 just a small small adjustment here we
  • 00:49:18 have a position or absolute and top of
  • 00:49:23 zero then we have playing we're going to
  • 00:49:29 grab
  • 00:49:29 on the prop out of play we have the
  • 00:49:32 controls set to true we want to show the
  • 00:49:35 controllers in the video you can change
  • 00:49:37 these ones if you want we have an URL of
  • 00:49:40 active video on ended we're going to
  • 00:49:49 create an end callback and we have an
  • 00:49:52 own progress callback also and these
  • 00:49:57 ones are defined in the react player so
  • 00:50:00 we're just using them as this say you
  • 00:50:02 should use them we have to close this
  • 00:50:04 one also and this is it for a video as I
  • 00:50:07 said we're going to talk more about this
  • 00:50:09 later on but I thought we could finish
  • 00:50:11 them as we already here now first of all
  • 00:50:14 we're going to correct some little type
  • 00:50:16 error I did in the last video maybe you
  • 00:50:19 saw it already done so we have corrected
  • 00:50:21 it but in the playlist header yes and
  • 00:50:24 where we destructure the props
  • 00:50:26 it should say total not total total is
  • 00:50:30 the Swedish word for total so maybe it
  • 00:50:33 was that who made me misspell it so all
  • 00:50:36 right with that said I thought we were
  • 00:50:39 going to create some hooks by now but I
  • 00:50:41 think it's better if we in this video
  • 00:50:44 just finish off our components so when
  • 00:50:47 we start creating a hooks in the next
  • 00:50:49 videos it's better to have a working app
  • 00:50:52 and not this kind of fail to compile
  • 00:50:55 thing here and a broken application so
  • 00:50:58 if we fix these ones in this video we
  • 00:51:01 are going to at least have something
  • 00:51:02 showing here when we create the state
  • 00:51:05 hook in the next few videos so let's get
  • 00:51:09 on with it we can start we have the
  • 00:51:11 playlist and the playlist items left so
  • 00:51:12 in the playlist go into the playlist das
  • 00:51:15 and first we can destructure the props
  • 00:51:18 we're going to need and we have some
  • 00:51:20 videos we have the active we have the
  • 00:51:24 night mode callback and we had a night
  • 00:51:29 mode like so and for our night mode
  • 00:51:32 component we're going to send in the
  • 00:51:34 night mode callback like so
  • 00:51:40 also have the night mode prop like so or
  • 00:51:47 playlist header are going to get the
  • 00:51:49 active prop and a total prop and we grab
  • 00:51:56 that from videos length 10 or playlist
  • 00:52:00 items are going to get the videos and
  • 00:52:04 active also like so and we're going to
  • 00:52:11 come back to these props and what they
  • 00:52:13 are so say this one and we continue on
  • 00:52:17 to our playlist items KS first we
  • 00:52:20 destructor the props and we have the
  • 00:52:24 videos and we have the active for this
  • 00:52:26 one and we can delete this one because
  • 00:52:29 in these styled playlist items we have
  • 00:52:32 this list of different videos so we have
  • 00:52:35 to loop through this list and create all
  • 00:52:38 the items and we do that by grab our
  • 00:52:41 videos and map through them we have a
  • 00:52:45 video and an error function and inside
  • 00:52:50 here we are going to return our playlist
  • 00:52:53 item and it's going to have some props
  • 00:52:55 it's going to be the key we always had
  • 00:52:58 to have the key when we map through
  • 00:52:59 something we had a video we have the
  • 00:53:04 active and here we're going to check if
  • 00:53:08 the active ID is the same as the video
  • 00:53:10 ID and then we set active to true
  • 00:53:12 otherwise we set them to false that way
  • 00:53:15 we know which video that is active so we
  • 00:53:18 have the video ID and we check if that's
  • 00:53:21 equal to the active ID and then we set
  • 00:53:24 it to true otherwise we set it to false
  • 00:53:29 we set played to video dot played and we
  • 00:53:35 close it like so and this is it for this
  • 00:53:38 one and the last thing we have to do
  • 00:53:41 here is to kind of assemble everything
  • 00:53:43 in the WBM player dot Das and we're also
  • 00:53:46 going to create empty callback functions
  • 00:53:49 just so we don't get an error because
  • 00:53:51 they don't exist
  • 00:53:52 and then we're going to fill them out
  • 00:53:54 and create them in a later video if we
  • 00:53:58 go into our component we can create a
  • 00:54:01 Const night mode callback and this is
  • 00:54:08 just an empty error function we're doing
  • 00:54:10 here now
  • 00:54:13 then we create another one that's call
  • 00:54:16 and call back like so and the last one
  • 00:54:24 is going to be progress callback and for
  • 00:54:33 now they at least exist so we don't get
  • 00:54:35 an error thrown at us and in our return
  • 00:54:39 statement here we are going to do some
  • 00:54:41 coding also so first what we want to do
  • 00:54:45 is to check if we have videos in our
  • 00:54:48 state the state we haven't created that
  • 00:54:50 yet we're going to do that in the next
  • 00:54:52 videos so we're just preparing it here
  • 00:54:56 so it will work for us later on so we
  • 00:55:00 check that the videos array isn't null
  • 00:55:03 and if not we're going to return all
  • 00:55:06 this right under here we create the
  • 00:55:10 closing parenthesis and then know if we
  • 00:55:14 have videos we're going to return the
  • 00:55:16 player otherwise we return nothing we
  • 00:55:18 return now and we have a closing curly
  • 00:55:22 bracket there also and we can do like
  • 00:55:26 this and then we have to send in the
  • 00:55:29 props to the video and playlist so in
  • 00:55:33 our video we're going to send in an
  • 00:55:34 active prop we're going to grab that
  • 00:55:38 from our state that we're going to
  • 00:55:40 create later so we have a state of
  • 00:55:44 active video we have the autoplay prop
  • 00:55:47 and we grab that from state or a play we
  • 00:55:53 have the end callback and that's the one
  • 00:55:57 we've created up here like so and we
  • 00:56:02 have our progress callback
  • 00:56:05 that's of course is this one light so
  • 00:56:11 and of course this shouldn't be there so
  • 00:56:14 remove this one we have it down here
  • 00:56:17 and our playlists are going to receive
  • 00:56:20 some props as well and for this one we
  • 00:56:22 have the videos we grab them from state
  • 00:56:25 of videos we have the active we grab
  • 00:56:32 that from state active video we have the
  • 00:56:37 night mode Kovac and that one we
  • 00:56:40 grabbing from of course night mode
  • 00:56:43 callback and I spelled that wrong also
  • 00:56:46 this shouldn't be too C's so remove the
  • 00:56:49 Seas and just have one in that one and
  • 00:56:53 we have the night mode and it's going to
  • 00:56:55 be from state night mode like so and
  • 00:56:59 this should be it we should be good to
  • 00:57:01 go what's happening here well we're
  • 00:57:03 going to create a state with hooks in
  • 00:57:05 this functional component and we have
  • 00:57:08 our video that's this one and we have a
  • 00:57:11 playlist components so in our video we
  • 00:57:15 grab from our state the active video we
  • 00:57:18 grab if it's older playing and we grab
  • 00:57:20 or uncool back and/or
  • 00:57:22 progress call back these ones are going
  • 00:57:24 to be sent into the video component so
  • 00:57:28 we have the active order play and call
  • 00:57:30 back and progress call back here in our
  • 00:57:32 video and we're using them to control
  • 00:57:34 the video then we have our playlist and
  • 00:57:37 for a playlist we have to have some
  • 00:57:39 videos and we want to show if it's the
  • 00:57:41 active video and we also have a nice
  • 00:57:43 mode callback and a nice mode if it's
  • 00:57:46 true or false and this one as I showed
  • 00:57:49 you is the button for night mode and
  • 00:57:50 here is our items in the list so in our
  • 00:57:54 playlist we have or props that we sent
  • 00:57:57 in from WBN player and we use them in
  • 00:58:00 our playlist component with Sandin or
  • 00:58:02 call back for the night mode and the
  • 00:58:04 night mode if it's true or false and the
  • 00:58:07 playlist header are receiving the active
  • 00:58:09 video cause it's the active video we're
  • 00:58:12 showing here it also receives the total
  • 00:58:14 amount of videos in our list cause we're
  • 00:58:17 going to me
  • 00:58:18 here as we displaying the total and what
  • 00:58:21 video we're on in the journey section
  • 00:58:23 here and we have a playlist items that's
  • 00:58:26 going to of course need a video so we
  • 00:58:29 send in all the videos all the videos
  • 00:58:31 from the array and we also send in the
  • 00:58:34 active one because we want to highlight
  • 00:58:37 the active videos somehow here the
  • 00:58:40 playlist items are going to loop through
  • 00:58:42 the list of videos in this array and
  • 00:58:44 create a playlist item for each video in
  • 00:58:47 the array so I hope this is clear for
  • 00:58:50 you if you want to get the feeling you
  • 00:58:52 can click through the components and
  • 00:58:54 start with this one as this is the kind
  • 00:58:57 of main component for application and
  • 00:58:59 from there we send out props to our
  • 00:59:01 different components down the tree this
  • 00:59:04 is it for this video we should be good
  • 00:59:06 to go when we create the state hook and
  • 00:59:09 in the next video I'm going to show you
  • 00:59:11 another example of react hooks and how
  • 00:59:13 they work before we start actually
  • 00:59:16 coding our hooks take a deep breath and
  • 00:59:19 lean back in your share because now we
  • 00:59:21 can relax you won't have to code
  • 00:59:23 anything in this video we're going to
  • 00:59:25 step away from the original application
  • 00:59:28 we building and I'm going to show you
  • 00:59:29 some basic concepts of the react hugs in
  • 00:59:33 this video so I created this special
  • 00:59:35 little application here or it's really
  • 00:59:37 an input field where you can write some
  • 00:59:40 text in that I'm going to use to show
  • 00:59:42 you how you can use the hooks instead of
  • 00:59:44 glass components and keeping state in a
  • 00:59:47 controlled component so if we look at
  • 00:59:50 the code here it's just a regular input
  • 00:59:52 field that I've styled with the style
  • 00:59:54 components and this one is the new ones
  • 00:59:57 here it's the the hooks here that I'm
  • 00:59:59 going to explain a little short before
  • 01:00:01 we create our own hooks so as you can
  • 01:00:03 see here it's just a functional
  • 01:00:05 component and I'm creating the state
  • 01:00:08 here with a u state hook so the benefit
  • 01:00:11 here is that you don't need to have a
  • 01:00:12 class component to have State in your
  • 01:00:14 component and we import them from you
  • 01:00:18 state and use effect from react and as I
  • 01:00:21 said before you have to have the Alpha
  • 01:00:23 build or react
  • 01:00:25 that's called 16-point 7.0 alpha for the
  • 01:00:29 hooks to work
  • 01:00:31 when you create a state you do it like
  • 01:00:34 this and for now I'm just going to show
  • 01:00:37 you we're not going to write anything in
  • 01:00:39 the next video we're going to create our
  • 01:00:41 own state and then I explain it more in
  • 01:00:43 detail so hold on we'll get there soon
  • 01:00:46 enough
  • 01:00:46 the basic concept is that you create
  • 01:00:49 whatever name you want for your state
  • 01:00:51 and you also have a second one that sets
  • 01:00:54 the state here and this value here is
  • 01:00:56 the default value so it can for example
  • 01:00:59 be testing we say that one and you see
  • 01:01:05 it says testing here in the input box
  • 01:01:07 and for now we just want it to be
  • 01:01:09 nothing this is the placeholder text in
  • 01:01:14 the input field that I specified here
  • 01:01:17 well so how do we use these well if you
  • 01:01:20 look at this styled input we have a name
  • 01:01:23 of test we have a value of state the
  • 01:01:25 state is this one so we set the value to
  • 01:01:28 state just as we do in a regular
  • 01:01:30 controlled component in a regular class
  • 01:01:32 and we have a norm change function here
  • 01:01:35 that's called update value so in this
  • 01:01:37 update value I just set the state to
  • 01:01:40 each target value it's the value that
  • 01:01:42 you write in the input field and then in
  • 01:01:45 turn the use effect will trigger when
  • 01:01:48 the state updates and for this one I
  • 01:01:51 just gotten console.log know that
  • 01:01:53 console.log outer state so if we for
  • 01:01:56 example are going to write Star Wars
  • 01:01:58 here I love Star Wars so I have to use
  • 01:02:00 that as an example so we write the Star
  • 01:02:03 Wars you can see here it's constant
  • 01:02:06 logging out the state so there's nothing
  • 01:02:08 special about that it works like a
  • 01:02:11 regular state here you just have to
  • 01:02:13 initialize it a bit different with this
  • 01:02:16 I also create the effect state because
  • 01:02:19 in this use effect we are now going to
  • 01:02:22 set another state so you can have how
  • 01:02:25 many hooks you want here you can have
  • 01:02:28 how many states you want and your state
  • 01:02:30 can of course also be an object just
  • 01:02:32 like your regular state in a class
  • 01:02:33 component but in this case it's just
  • 01:02:36 this string and we'll talk more about
  • 01:02:37 this later when we create a state in the
  • 01:02:39 next video but for now we have these
  • 01:02:42 kind of two different states here
  • 01:02:45 so in the use effect we are going to set
  • 01:02:47 the effect state with the state we use
  • 01:02:50 the set effect state to set the value
  • 01:02:53 that we have in this state and we do it
  • 01:02:56 here you just call this as a regular
  • 01:02:59 function and send in the value you want
  • 01:03:01 to set the state with and then we
  • 01:03:04 console.log the effect state just to
  • 01:03:05 show what's happening here so say this
  • 01:03:08 one and we try to write to us as you can
  • 01:03:12 see here now what's happening here well
  • 01:03:14 it's going crazy and why is that I have
  • 01:03:17 to break this let's do it like this now
  • 01:03:19 and save it why did it go and set the
  • 01:03:22 state that many times like in an
  • 01:03:24 infinite loop well there's nothing
  • 01:03:26 strange going on actually because when
  • 01:03:29 we set the effect here in the use effect
  • 01:03:31 it's going to trigger the use effect
  • 01:03:33 again and of course it will set the
  • 01:03:36 effect state again and it will trigger
  • 01:03:37 it again so it goes into an infinity
  • 01:03:40 loop here and that's not good so how can
  • 01:03:42 we control this if we do like this I am
  • 01:03:45 comment out but we'll make this active
  • 01:03:47 in this array here you can specify what
  • 01:03:50 this use effect should be dependent on
  • 01:03:53 if we write state inside this array it
  • 01:03:56 will check if state have changed so that
  • 01:03:59 means in other words if we have the
  • 01:04:01 state here it won't do anything if we
  • 01:04:04 haven't changed the state with a set
  • 01:04:06 state because in the next loop here it
  • 01:04:09 will see that the state haven't changed
  • 01:04:11 and it will skip this use effect so we
  • 01:04:13 say this one now and as you see it's
  • 01:04:18 working just as before if we look at the
  • 01:04:21 state here it's a star but it only says
  • 01:04:24 sta in the effects it's always one
  • 01:04:27 character behind and that's because it's
  • 01:04:29 a sync when we set the effect state here
  • 01:04:33 it hasn't update this state when we
  • 01:04:36 console.log it out instead we can have
  • 01:04:38 another use effect here if we copy this
  • 01:04:40 one like so you can have as many as you
  • 01:04:44 want and we want this to be dependent on
  • 01:04:46 the effect state instead
  • 01:04:50 and in this one we console.log out the
  • 01:04:53 effect state so we remove this one here
  • 01:04:55 and if we save and try this now we write
  • 01:05:00 star and as you see it's always the same
  • 01:05:04 now and it's not like behind with one
  • 01:05:07 character all the time and that's
  • 01:05:09 because this one will trigger when the
  • 01:05:12 state has been set so we make sure that
  • 01:05:14 this is finished before we console.log
  • 01:05:16 it and we also make sure to not go into
  • 01:05:19 this infinity loop by using this one
  • 01:05:21 here and actually this won't go into an
  • 01:05:30 infinite loop because we're not setting
  • 01:05:32 in a new state in this one it will
  • 01:05:34 trigger when we update this state also
  • 01:05:36 so it will run kind of double yeah as
  • 01:05:42 you see it runs it two times and that's
  • 01:05:45 not good so we wanted to just show the
  • 01:05:48 console.log when we update the effect
  • 01:05:50 state like so and this is kind of neat
  • 01:05:53 cause you don't need that class
  • 01:05:55 component many people find the class
  • 01:05:57 components more complicated than the
  • 01:06:00 regular functional components and we use
  • 01:06:02 this use effect instead of the lifecycle
  • 01:06:04 methods that's on the class component I
  • 01:06:07 think it's great because you just have
  • 01:06:09 to think of this one and you can control
  • 01:06:12 it by specifying what should affect this
  • 01:06:15 one it's kind of new when filming this
  • 01:06:17 video so it would be fun to see what
  • 01:06:19 people will do with the hooks in the
  • 01:06:21 future here I hope this gave is some
  • 01:06:24 little idea before we go through and
  • 01:06:26 creating our own hooks we're going to do
  • 01:06:28 that in the next video and we're going
  • 01:06:30 to start with a used tail hook for our
  • 01:06:33 application alright it's time to start
  • 01:06:37 creating some hooks finally bet you've
  • 01:06:39 been waiting for this as my motivation
  • 01:06:41 for this whole course was to show you
  • 01:06:43 the newly announced hooks in react as of
  • 01:06:46 recording this video so in this video
  • 01:06:49 we're going to be in the WBM player JS
  • 01:06:52 file and we're going to create the state
  • 01:06:54 hook and if we go to the home page for
  • 01:06:56 react es dot org and read about the hook
  • 01:06:59 i just wanted to show you some small
  • 01:07:01 things here before we start
  • 01:07:03 noticed in the previous video that I was
  • 01:07:05 using this syntax when we created a
  • 01:07:07 state maybe you know about this already
  • 01:07:10 because this is es6 syntax how a
  • 01:07:12 destructor an array you can read about
  • 01:07:15 it here also they're showing a great
  • 01:07:17 example here of why we can do like this
  • 01:07:20 when we create the state and you state
  • 01:07:23 returns an array with two elements and
  • 01:07:25 when we do like this we can name these
  • 01:07:28 elements so this is the same as these
  • 01:07:30 three rows here you first create one
  • 01:07:33 variable with the you state and you send
  • 01:07:36 in your initial value and this one will
  • 01:07:38 return a pair and this is just a regular
  • 01:07:41 array so we can access the values by the
  • 01:07:44 zero and one to get the first and the
  • 01:07:46 second value respectively yeah the using
  • 01:07:49 the fruit example here so they assigning
  • 01:07:51 to variables called fruit and set fruit
  • 01:07:54 and you can call these ones whatever you
  • 01:07:56 want I don't think I explained that in
  • 01:07:58 the previous video with the setting here
  • 01:08:00 it don't have to be named set but it's
  • 01:08:03 very practical to have it like this
  • 01:08:05 naming convention so you know that this
  • 01:08:07 is the one that you said to stayed with
  • 01:08:09 but you can call them whatever you want
  • 01:08:11 so enough sad about that go back to our
  • 01:08:14 coding editor and we're going to start
  • 01:08:17 do some coding here and I just want to
  • 01:08:19 show you I promised you in an earlier
  • 01:08:21 video that I was going to show you a
  • 01:08:22 neat trick on how we can get the videos
  • 01:08:25 into our react player if we look at our
  • 01:08:27 index dot HTML file in the public folder
  • 01:08:30 and inside here you can see I've created
  • 01:08:33 a hidden input field here and the nice
  • 01:08:36 about this is that we can create a value
  • 01:08:39 on this hidden input field and this is
  • 01:08:41 like a JSON syntax here we can write all
  • 01:08:44 our videos here and we can grab them in
  • 01:08:46 our react place so we don't have to hard
  • 01:08:48 code them in as we don't have a back-end
  • 01:08:50 to upload or we don't have a database to
  • 01:08:53 grab or videos from for our react player
  • 01:08:55 so we can just create this hidden input
  • 01:08:57 field and you can do this in whatever
  • 01:08:59 HTML file you are going to apply this
  • 01:09:01 player to just be careful here because
  • 01:09:05 you can't just create space and things
  • 01:09:08 and quotes you have to use these special
  • 01:09:10 characters here otherwise it won't work
  • 01:09:12 so this is simply the videos here I
  • 01:09:14 wanted to have an I do
  • 01:09:17 list because when we save it to local
  • 01:09:19 storage it's good to know what playlist
  • 01:09:22 we have saved there then I have the
  • 01:09:24 actual playlist that's an array with
  • 01:09:26 objects in it we have the video number
  • 01:09:28 we have the title we have the video ID
  • 01:09:30 after the title we have the duration and
  • 01:09:34 lastly we have the video link so you can
  • 01:09:38 add whatever you want here and this is
  • 01:09:41 kind of neat trick to get the videos for
  • 01:09:43 a player kind of a hackish maybe but it
  • 01:09:46 works on as I said before if the things
  • 01:09:48 work in this easy to do it there's
  • 01:09:51 sometimes not bad doing things like this
  • 01:09:54 you don't have to build a complete back
  • 01:09:56 and complete admin system for this just
  • 01:09:59 to get some videos into your player so
  • 01:10:02 let's go back into our WBN player das
  • 01:10:05 file and we're going to add these videos
  • 01:10:07 to our state first we have to import our
  • 01:10:10 state hook so we do that up here we
  • 01:10:13 write the coma and curly brackets and we
  • 01:10:16 have u state and we can also import use
  • 01:10:19 effect right now because we're going to
  • 01:10:20 use that later on alright let's go into
  • 01:10:25 our component here and create a Const
  • 01:10:27 that's called videos like so and we grab
  • 01:10:31 our videos with the JSON and we want to
  • 01:10:35 parse it we have a parenthesis we grab
  • 01:10:38 it from document query selector and we
  • 01:10:42 have a new parenthesis and a tick we
  • 01:10:44 have a bracket name equals videos like
  • 01:10:50 so and we have an end bracket and then
  • 01:10:54 dot value at the end and this one will
  • 01:10:57 give us all the videos in this con steer
  • 01:10:59 so we just have to create our state now
  • 01:11:02 we do that with the new Const brackets
  • 01:11:05 we call it state and set state like so
  • 01:11:09 and as I said many times now they don't
  • 01:11:11 have to be called this that's cause I
  • 01:11:13 choose to call them this you can call
  • 01:11:15 him whatever you want and we call the
  • 01:11:19 use state function and we're going to
  • 01:11:22 say
  • 01:11:22 our initial state with an object inside
  • 01:11:25 here so we have our videos we grab them
  • 01:11:28 from videos dot playlists we have an
  • 01:11:33 active video and that one we're grabbing
  • 01:11:36 from videos dot lay list and it's an
  • 01:11:40 array so we're using the first video if
  • 01:11:42 you haven't watched any video we're
  • 01:11:44 going to set it to the first one we have
  • 01:11:47 a night mode I'll set that to true cuz I
  • 01:11:50 want a dark theme you can set it to
  • 01:11:51 false and it'll show you the light theme
  • 01:11:53 so it's up to you what you want
  • 01:11:55 there we have a playlist ID and we grab
  • 01:12:00 that one from videos lay list ID and we
  • 01:12:06 have an autoplay that we're going to set
  • 01:12:09 to false to start with and this is
  • 01:12:11 really all there is to it it's just
  • 01:12:13 these two here one that we save the
  • 01:12:15 Stadion and one that we can set the
  • 01:12:17 state with we will do that in the next
  • 01:12:19 video when we use the use effect hook
  • 01:12:21 also if we save this one it should work
  • 01:12:24 now and of course we have an arrow here
  • 01:12:27 playlist items we go back here and check
  • 01:12:29 that one okay nothing wrong here so
  • 01:12:36 we're going to replace doc yes and yeah
  • 01:12:42 of course I forgot an S here so make
  • 01:12:44 sure in your playlist dot yes file in
  • 01:12:46 your playlist items the prop there
  • 01:12:49 should be called videos not video it
  • 01:12:52 should be plural so put an s on that one
  • 01:12:55 and save it and it should hopefully work
  • 01:12:57 now yeah we see it here now the first
  • 01:12:59 time we see our player it's actually not
  • 01:13:01 working now you can of course play the
  • 01:13:03 video if you want but we can't change
  • 01:13:05 the videos for now because we're going
  • 01:13:07 to create these links here when we do
  • 01:13:09 the higher-order component and also the
  • 01:13:11 ninth mode
  • 01:13:12 won't work now because we haven't
  • 01:13:13 created or callback functions but the
  • 01:13:16 player is there and as you can see it's
  • 01:13:18 fully responsive and it's working and
  • 01:13:20 looking great here now and that's good
  • 01:13:23 in the next video we're going to check
  • 01:13:25 the use effect hooks okay welcome back
  • 01:13:28 you can see that I have a little bit
  • 01:13:30 different policy in my editor and that's
  • 01:13:33 because I'm recording this video cause
  • 01:13:35 the
  • 01:13:36 hooks have changed a little bit since I
  • 01:13:38 recorded this course I recorded it when
  • 01:13:41 the hooks wasn't officially released so
  • 01:13:43 now they have some special rules here we
  • 01:13:45 have to take into consideration and that
  • 01:13:47 is in the use effect we have to define
  • 01:13:49 all the dependencies and that's what
  • 01:13:51 we're going to do also now in this video
  • 01:13:54 if you see something in the videos after
  • 01:13:55 this one that's yeah maybe not look the
  • 01:13:58 same as this one I created here that's
  • 01:14:00 because I have recorded this one and
  • 01:14:02 this is the one that it should look like
  • 01:14:04 so this is the correct video here
  • 01:14:06 alright first of all we can go to react
  • 01:14:09 the home page and check out the hooks
  • 01:14:11 API and there you can see that they've
  • 01:14:13 got some basic hooks and additional
  • 01:14:15 hooks there's actually a lot of hooks
  • 01:14:16 here and you can create your own hooks
  • 01:14:18 also we are only going to use the you
  • 01:14:21 state and use effect in this course
  • 01:14:23 cause that's the only ones we need but I
  • 01:14:25 highly suggest that you read more about
  • 01:14:27 the hooks API here and also if you like
  • 01:14:29 the hooks I'm going to work with them in
  • 01:14:31 your future work I suggest that you also
  • 01:14:34 read about creating your own custom
  • 01:14:36 hooks because it's very useful I use
  • 01:14:39 them a lot in my projects so that's the
  • 01:14:41 key I think we'd hooked that you can
  • 01:14:43 compose your own hooks and it's very
  • 01:14:45 composable if you use hook throughout
  • 01:14:48 your whole application ok that's that
  • 01:14:50 we're going to create or use effect in
  • 01:14:53 this video so let's go back into our
  • 01:14:55 code editor and into our WBM player dot
  • 01:14:58 JS file it's in your containers folder
  • 01:15:01 so we create the use effect we've
  • 01:15:04 already imported it up here and as you
  • 01:15:06 can see I also done some destruction
  • 01:15:08 here now in this component that's also
  • 01:15:11 one thing I didn't do in the previous
  • 01:15:13 video so we have the match and the
  • 01:15:15 history and the location prop so you can
  • 01:15:17 destructure them out like this
  • 01:15:22 alright then we create our use effect
  • 01:15:26 parentheses and we create an inline
  • 01:15:28 error function here we're going to have
  • 01:15:32 our dependency array so we can create
  • 01:15:35 that right now all right on the first
  • 01:15:39 thing we have to do is to get our video
  • 01:15:41 ID and if you remember in our app dot JS
  • 01:15:44 file in our route we created this param
  • 01:15:47 and that means that we can grab this ID
  • 01:15:50 with this parameter up here you can see
  • 01:15:54 that we have this ID here and this is
  • 01:15:55 the one that we're going to grab and
  • 01:15:57 that's the one we call active video so
  • 01:16:03 first we create the Const we can call it
  • 01:16:06 video ID and we grab that from match.com
  • 01:16:10 dot active video like so and that's
  • 01:16:15 because we destructor it here otherwise
  • 01:16:17 we have to put props in front of it but
  • 01:16:20 we don't have to do that now so here we
  • 01:16:23 grab the video ID from the URL and then
  • 01:16:26 we have to do some if statement here
  • 01:16:28 because if this value is undefined we
  • 01:16:31 know that we're not on a video and we're
  • 01:16:32 going to rock back to the first video in
  • 01:16:35 the video list when you open the video
  • 01:16:37 player for the first time then we don't
  • 01:16:39 have any saved state and local storage
  • 01:16:41 so we're just going to rock back to the
  • 01:16:43 first video and we're setting that as a
  • 01:16:45 default here in the active video it's
  • 01:16:47 the zero that's our first video so we
  • 01:16:51 create an if video ID not equals to
  • 01:16:55 undefined then we're going to do
  • 01:16:59 something and we're going to have an
  • 01:17:00 else and inside of this if it's not
  • 01:17:03 undefined we have to find the current
  • 01:17:05 video in our videos array and we can do
  • 01:17:08 that by creating a new cons first that's
  • 01:17:12 for new active video we have our State
  • 01:17:17 or videos and we can find index we have
  • 01:17:21 a parenthesis and inside here it will
  • 01:17:25 iterate through every element in our
  • 01:17:27 array so we can do some comparing here
  • 01:17:29 and find the index of that video so we
  • 01:17:32 have an inline function the video we
  • 01:17:35 compare the video the current video we
  • 01:17:37 run in the loop the ID of that one if
  • 01:17:40 that equals to our video ID like so and
  • 01:17:44 that will give us the index for this
  • 01:17:45 video that we get from our params
  • 01:17:48 alright
  • 01:17:49 and then we have our video we know what
  • 01:17:51 we do with this so we can set our state
  • 01:17:53 and we're going to use an updated
  • 01:17:56 function inside of the state for this
  • 01:17:57 one and that's because we don't want to
  • 01:18:00 specify this state as a dependency in
  • 01:18:02 our use effect because that will
  • 01:18:04 create an infinite loop in our use
  • 01:18:06 affect every time our state updates it
  • 01:18:09 will run the use effect and as we set
  • 01:18:11 the state in the u.s. effect it will
  • 01:18:13 create this infinite loop but if we grab
  • 01:18:15 the previous value in an updated
  • 01:18:17 function inside of sub-state it will
  • 01:18:19 just live inside of here and we don't
  • 01:18:21 have to specify it in the use effect and
  • 01:18:23 we get the previous state by this
  • 01:18:26 parameter here so we spread the previous
  • 01:18:29 state that's really important when we
  • 01:18:31 using hooks the set state will not merge
  • 01:18:34 the old state so you always have if we
  • 01:18:36 want to keep it should be three dots
  • 01:18:38 there if you want to keep the state as
  • 01:18:40 it was before
  • 01:18:41 you always have to spread it out
  • 01:18:43 otherwise it will wipe out the state and
  • 01:18:46 just to create the new values for you
  • 01:18:47 but if we spread it here we keep the
  • 01:18:50 state and we can set our new properties
  • 01:18:52 here so we have our active video and of
  • 01:18:55 course we also want to have parentheses
  • 01:18:57 here like so and we have our active
  • 01:19:05 video we grab that from Rev videos and
  • 01:19:09 we set a new active video so we change
  • 01:19:12 the video to the one we got here and the
  • 01:19:16 autoplay we grab that from location
  • 01:19:20 because we're sending this auto play
  • 01:19:21 with our route so we can grab that from
  • 01:19:24 props dot location auto play like so and
  • 01:19:29 that's it if the video ID isn't
  • 01:19:31 undefined we change the video to the
  • 01:19:33 value we have up here so we grab this
  • 01:19:36 value and set it in the state and this
  • 01:19:38 will trigger an update so we change the
  • 01:19:40 video in our list all right but if the
  • 01:19:43 video ID is undefined we know that we're
  • 01:19:46 going to route back to the first video
  • 01:19:47 and we can do that by pushed to our
  • 01:19:50 history prompt that we get from the
  • 01:19:53 router so history push parentheses and
  • 01:19:56 we have an object we have a path name we
  • 01:20:01 have backtick forward slash and a dollar
  • 01:20:05 sign and from our
  • 01:20:08 state active video we grab the ID and we
  • 01:20:13 am with another backtick and you also
  • 01:20:16 going to set the autoplay to false
  • 01:20:18 because we don't want the first video to
  • 01:20:20 start playing by itself alright and as
  • 01:20:25 you can see here now the linting rule
  • 01:20:27 are complaining that we're not
  • 01:20:28 specifying any dependencies so I guess
  • 01:20:30 we can just auto format it like so this
  • 01:20:33 one depends on what limiting rules you
  • 01:20:35 set up for yourself so maybe this one
  • 01:20:38 won't work for you maybe you have to
  • 01:20:40 specify this yourself
  • 01:20:41 depending on your limiting rules so it
  • 01:20:43 tells us that we need a history we using
  • 01:20:45 that inside of here we have a location
  • 01:20:47 or a play we're also using that inside
  • 01:20:49 of here we have our match perhaps active
  • 01:20:52 video we're using it inside of the use
  • 01:20:54 effect and with the state active video
  • 01:20:56 dot ID that we use here and we have the
  • 01:20:59 state
  • 01:20:59 videos so they are not specified in our
  • 01:21:02 dependencies for the use effect and this
  • 01:21:04 was the new thing when they release the
  • 01:21:07 hooks officially so if we save this one
  • 01:21:11 and go back to our application and if we
  • 01:21:16 go to the local host 3000 and not using
  • 01:21:21 a video ID it should raft us to the
  • 01:21:24 first video and it does so that's great
  • 01:21:26 and we can't click these ones now
  • 01:21:29 because that one we're going to do in
  • 01:21:30 the next video where we create the
  • 01:21:32 high-order component and attach this
  • 01:21:34 kind of linked functionality to our list
  • 01:21:37 items hope this made sense for you well
  • 01:21:39 it may seem a little much but I think if
  • 01:21:41 you take a look at this one or two or
  • 01:21:43 three more times it will come clear to
  • 01:21:46 you I think it's not that difficult what
  • 01:21:48 we're doing here ok we're getting
  • 01:21:51 somewhere here now and we're going to
  • 01:21:53 create our higher-order component so we
  • 01:21:55 can get these links to work so we can
  • 01:21:57 change the videos in the video list so
  • 01:22:00 let's go into our age OC folder or hoc
  • 01:22:03 folder and/or with linked Jas file and
  • 01:22:07 to be honest we actually don't need this
  • 01:22:10 high order component for this to work we
  • 01:22:12 could just go into our playlist item and
  • 01:22:15 we could create a link here on the name
  • 01:22:18 but I thought that I wanted to show you
  • 01:22:19 how to create a high order component
  • 01:22:22 this is an intermediate course and high
  • 01:22:25 order components are useful when you
  • 01:22:27 want to reuse your logic for different
  • 01:22:29 components so my thought was maybe you
  • 01:22:32 build another application where you just
  • 01:22:34 want to show your video titles or
  • 01:22:37 something and don't want them to be
  • 01:22:38 clickable then you can create a high
  • 01:22:40 order component where you can apply the
  • 01:22:43 link instead and then you can use your
  • 01:22:45 playlist item component for another
  • 01:22:48 course without the link so this is the
  • 01:22:51 truth you don't have to have this I
  • 01:22:52 thought it would be great to show you
  • 01:22:54 how high order component works the high
  • 01:22:57 order component is a component that
  • 01:22:59 either takes in a component as a
  • 01:23:01 parameter or returns a component or both
  • 01:23:04 of them in this case we're going to send
  • 01:23:06 in our playlist item component and we're
  • 01:23:08 going to create a new component with the
  • 01:23:11 linked function applied to it
  • 01:23:13 so it kinds of boost the other component
  • 01:23:15 with new functionality but we never
  • 01:23:18 modify the original component with
  • 01:23:20 signing in as a parameter we're just
  • 01:23:22 returning a new one
  • 01:23:23 because you shouldn't do that in a high
  • 01:23:25 order component you should always return
  • 01:23:27 a new one all right
  • 01:23:29 enough said in our widdling j/s let's
  • 01:23:32 start with import react from react then
  • 01:23:38 we import a link from react router dome
  • 01:23:46 then we create Const with link rat
  • 01:23:51 component that's the component we're
  • 01:23:54 sending in here we have our props and
  • 01:24:02 curly brackets and how this is going to
  • 01:24:05 work is we're going to take him the
  • 01:24:06 props and we're going to modify these
  • 01:24:08 props and apply the link to the name so
  • 01:24:12 we create the cost with new props like
  • 01:24:18 so we clone or
  • 01:24:22 props and we modify or video so this is
  • 01:24:27 not an array in this one this is only
  • 01:24:29 one single video so we have the video
  • 01:24:31 and all the data about the video in the
  • 01:24:33 video object this is not an array it's
  • 01:24:36 an object this time
  • 01:24:37 so we yet again clone the video object
  • 01:24:41 and we modify the title inside the title
  • 01:24:48 we create a link we link it to and for
  • 01:24:55 this one we have curly brackets and
  • 01:24:57 another curly brackets cause it's an
  • 01:24:59 object inside here so we change the path
  • 01:25:02 name to backticks forward slash dollar
  • 01:25:06 curly brackets props video ID and an
  • 01:25:12 ending backtick there then we set our
  • 01:25:16 autoplay to true because we wanted to
  • 01:25:20 play when we click the video and we
  • 01:25:22 close that one and we have a link and
  • 01:25:25 inside or link we grab our props dot
  • 01:25:30 video dot title so we have wrapped or
  • 01:25:34 title inside this link now then we just
  • 01:25:38 need to return or wrap component with
  • 01:25:44 our new props so we spread them out like
  • 01:25:48 that with es6 syntax and of course we
  • 01:25:52 export default or with link like so then
  • 01:25:59 we need to use this component and if we
  • 01:26:01 go into our playlist items yes for now
  • 01:26:04 we just returning the playlist item but
  • 01:26:06 we want to return the modified playlist
  • 01:26:09 item so first of all we import our newly
  • 01:26:12 created higher-order component from dot
  • 01:26:17 dot forward slash hawk whit link we
  • 01:26:24 created
  • 01:26:24 Const lay list item with link make sure
  • 01:26:31 that I don't have an s too much or
  • 01:26:32 something it should be playlist item
  • 01:26:34 with link yeah
  • 01:26:37 and we use a wit link and sending or
  • 01:26:41 playlist item so this one will give us
  • 01:26:44 to modify the booster component to use
  • 01:26:47 for us inside here and now we can just
  • 01:26:50 change this one to playlist item with
  • 01:26:54 link and it should work if we say this
  • 01:26:59 so we go back into our application but
  • 01:27:02 they won't work and why is that
  • 01:27:05 yeah and that's because we should of
  • 01:27:07 course return on new props here not the
  • 01:27:10 old props go back to your wit link das
  • 01:27:13 and change this one to new props
  • 01:27:16 otherwise we're just passing by the
  • 01:27:18 props and we're doing nothing with them
  • 01:27:20 it should say new props save that one
  • 01:27:24 and now we can click the links as you
  • 01:27:27 can see here nice it's working great
  • 01:27:32 actually
  • 01:27:33 and as you can see the ID is changing up
  • 01:27:35 here because we're routing it and we
  • 01:27:37 changing this ID with our router so this
  • 01:27:40 is how I do it with a high order
  • 01:27:42 component if you don't want to use this
  • 01:27:44 you can just apply the link in your
  • 01:27:46 playlist item instead in a much simpler
  • 01:27:50 way but in this way you can reduce this
  • 01:27:52 component and we have just added
  • 01:27:54 functionality with this wit link dot JS
  • 01:27:57 file with this high order component in
  • 01:28:00 the next video we're going to create the
  • 01:28:02 callback functions that we set up here
  • 01:28:04 so we get our full functionality of the
  • 01:28:07 player okay there's not much left to do
  • 01:28:11 here now with our player but we have
  • 01:28:13 some few things left in this video we're
  • 01:28:15 going to create the callback functions
  • 01:28:17 that we need for the player we have one
  • 01:28:20 when we switch the night mode on and off
  • 01:28:22 and we have also one when the video has
  • 01:28:24 ended when it's here I'm going to change
  • 01:28:26 to another video and we're also going to
  • 01:28:28 have a callback that sets the status to
  • 01:28:30 watch on the video that means it's going
  • 01:28:32 to indicate here with a little green dot
  • 01:28:35 that we have watched this video and we
  • 01:28:37 want to do this when we have played a
  • 01:28:39 video 10 seconds so you just don't click
  • 01:28:41 it and then it will say that you have
  • 01:28:42 played it we want to know that the user
  • 01:28:45 actually have watched at some of the
  • 01:28:47 video at least so let's go back into our
  • 01:28:50 WB mas file and first we create the
  • 01:28:54 callback for the night mode and that's
  • 01:28:56 fairly easy actually we have already
  • 01:28:58 created this kind of empty functions
  • 01:29:01 here so in this one we just have to
  • 01:29:03 check a boolean if the night mode is on
  • 01:29:05 or off and we have our night mode in our
  • 01:29:07 state here for now it's true and we
  • 01:29:11 should change it to false or true when
  • 01:29:13 we click the button in our player so in
  • 01:29:16 this one we actually just have to set
  • 01:29:17 the state first we clone the state and
  • 01:29:21 then we set the night mode to the
  • 01:29:24 opposite of state night mode like so and
  • 01:29:28 that's all we have to do with that one
  • 01:29:31 based on that boolean we are setting a
  • 01:29:33 theme here and selecting the light or
  • 01:29:36 the dark theme
  • 01:29:38 so we say that one and we should be able
  • 01:29:40 to try it now yeah as you can see we're
  • 01:29:44 changing the theme here now when our
  • 01:29:45 callback function working and that's
  • 01:29:48 really nice so now you can select if you
  • 01:29:50 want a light theme or a dark theme and
  • 01:29:52 of course as usual you can style them
  • 01:29:54 that's whatever you want you can have a
  • 01:29:56 orange team or a green theme or whatever
  • 01:29:59 you want
  • 01:30:00 all right and then if we just look in
  • 01:30:03 our video TAS file we have two callbacks
  • 01:30:05 on our video and these callbacks are
  • 01:30:08 integrated in the react player so we
  • 01:30:10 just use them as they are intended to do
  • 01:30:13 in the instructions from the racks
  • 01:30:14 player we have one prop that is called
  • 01:30:17 on ended and one prop that is called on
  • 01:30:19 progress one-handed is when the video is
  • 01:30:22 stopped playing and what we should do
  • 01:30:24 then so every time a video has reached
  • 01:30:25 the end we get the call back from this
  • 01:30:27 component drag player also we have this
  • 01:30:30 own progress it's given us a callback
  • 01:30:32 call every second of thing so we can do
  • 01:30:34 some stuff on progress call back here
  • 01:30:37 and we're going to use that to check
  • 01:30:39 when we are played the video for at
  • 01:30:40 least 10 seconds go back into our WBM
  • 01:30:44 player dot yes and we can start with the
  • 01:30:47 end callback here and there's a few
  • 01:30:49 things we have to do here first of all
  • 01:30:51 we have to know the index in the video
  • 01:30:53 race of the video we currently playing
  • 01:30:56 because we have this array here in a
  • 01:30:58 state with videos and we going to go to
  • 01:31:00 the next video or if we're at the last
  • 01:31:02 video down here we're going to jump to
  • 01:31:05 the first video and how do we do this
  • 01:31:08 well if we go to public index dot HTML
  • 01:31:11 file we have this num here so we num we
  • 01:31:14 give each video a number so that would
  • 01:31:16 be fairly easy to just grab this number
  • 01:31:18 and take minus one on the numbers cause
  • 01:31:22 the array starts at zero and this one
  • 01:31:24 starts at 1 then we know what position
  • 01:31:27 in the array we're at but we can't be
  • 01:31:30 sure that the user always are going to
  • 01:31:32 have these numbers in this file it could
  • 01:31:35 actually say whatever you want here so
  • 01:31:38 that's not a safe way for us to decide
  • 01:31:40 where in the array the current video are
  • 01:31:43 what we do also have is this kind of
  • 01:31:46 unique IDs they should be unique
  • 01:31:49 you could of course have the same here
  • 01:31:51 but then it won't work so the thought
  • 01:31:53 here is that we have unique IDs for
  • 01:31:56 every video and we can use this to find
  • 01:31:58 the index in the array so let's go back
  • 01:32:01 to WBM player yes and in RN callback
  • 01:32:05 first justice before we grab the video
  • 01:32:09 ID from props match params active video
  • 01:32:15 and that'll give us this ID up here then
  • 01:32:20 we have a method that we can use that's
  • 01:32:22 called find index on the array so if we
  • 01:32:25 use find index in our state that videos
  • 01:32:28 array we can find the index of the
  • 01:32:30 current video so we create a Const
  • 01:32:34 current video index and we have the
  • 01:32:38 array in state dot videos and then we
  • 01:32:43 use the find index method so parentheses
  • 01:32:46 and now we have to do some comparing
  • 01:32:48 here because we have our video ID and
  • 01:32:50 we're going to look for that one in the
  • 01:32:52 array so we have the video we have an
  • 01:32:56 error function we have a video ID and we
  • 01:33:01 just check if it's equal to or video ID
  • 01:33:04 that we grabbed up here so this one will
  • 01:33:08 iterate through every element in our
  • 01:33:11 array and compare the video ID for each
  • 01:33:13 item with this item here because we know
  • 01:33:16 this one is the active video so when it
  • 01:33:19 finally is one when this is equal it
  • 01:33:21 will return the index for us in the
  • 01:33:23 array all right I hope that was clear
  • 01:33:25 for you then we have to do some more
  • 01:33:27 shaking here and see what our next video
  • 01:33:29 will be so we have this Const :
  • 01:33:32 [Music]
  • 01:33:34 if our current video index equals to
  • 01:33:38 state dot videos length minus one we are
  • 01:33:44 going to jump to the video zero the
  • 01:33:47 first element in our array and we doing
  • 01:33:50 this – one year cause as I said the
  • 01:33:52 array starts at zero and our videos
  • 01:33:54 starts at one otherwise we just set our
  • 01:33:59 current video index to plus one
  • 01:34:03 we jump to the next video and this is a
  • 01:34:05 ternary operator here as you can see
  • 01:34:07 maybe we can just do that this it's a
  • 01:34:11 bit nicer so we know now what the next
  • 01:34:14 video will be so we can push that into
  • 01:34:17 our URL with the index of our next video
  • 01:34:20 and we push programmatically by props
  • 01:34:23 history push we have an parentheses and
  • 01:34:29 where curly brackets we have a path name
  • 01:34:32 backticks we have a dollar sign and
  • 01:34:35 curly brackets again state dot videos
  • 01:34:38 and we use our next video that we got
  • 01:34:42 here and or ID for that video and we end
  • 01:34:46 with another backtick so this one will
  • 01:34:49 go into our state array with the videos
  • 01:34:51 and use the index we got here in the
  • 01:34:53 next video for the array and grab the ID
  • 01:34:56 and we push that to the URL so we change
  • 01:34:58 video and this one should of course be a
  • 01:35:02 coma and we set to autoplay to false we
  • 01:35:07 don't want it to order play when it
  • 01:35:08 changed the video we just want to order
  • 01:35:10 play when we actively click a video
  • 01:35:12 ourselves and this should be it we could
  • 01:35:15 say this one so if we try it we can take
  • 01:35:18 one video here whatever and we go to the
  • 01:35:21 end so we're at video two now oh it's
  • 01:35:25 kind of slow here we play it and as you
  • 01:35:29 can see it jumped to the video three and
  • 01:35:31 it stopped there because we didn't set
  • 01:35:33 it to order play so we know that that
  • 01:35:35 one is working and now we have our
  • 01:35:38 progress callback left to do and as I
  • 01:35:41 said before what this will do is we'll
  • 01:35:44 set our video to played after ten
  • 01:35:46 seconds so first of all we have to check
  • 01:35:49 if we played it 10 seconds so we create
  • 01:35:52 an if statement if and of course here we
  • 01:35:56 have our event and it's only one
  • 01:35:58 parameter here so we can omit the
  • 01:36:00 parentheses so we do like this and we
  • 01:36:04 write if e dot laid seconds we get this
  • 01:36:08 one from the video from the react
  • 01:36:10 players we can check how many seconds we
  • 01:36:13 played so we're just grabbing that one
  • 01:36:14 from the event we get to this callback
  • 01:36:17 if it's greater than 10 and we also want
  • 01:36:20 to check that it's actually not greater
  • 01:36:22 than 11 because we don't want this to
  • 01:36:24 fire off all the time when we play the
  • 01:36:26 video so yet again we grab a dot played
  • 01:36:29 seconds and set it to less than 11 and
  • 01:36:33 there we have our if statement and now
  • 01:36:36 yet again we have to find the correct
  • 01:36:38 video to apply this play the value to so
  • 01:36:41 you can do this in a couple of different
  • 01:36:43 ways one way of doing it is set the
  • 01:36:45 state and then we can just loop over the
  • 01:36:48 videos and when we find the correct ID
  • 01:36:49 we just set that to true so I'm going to
  • 01:36:52 show you this one now so we set state
  • 01:36:57 parenthesis curly brackets we clone our
  • 01:37:01 state we have our videos array we want
  • 01:37:05 to update this whole array here so what
  • 01:37:07 we can do here is we can map through all
  • 01:37:09 the videos and we can update the element
  • 01:37:11 that we want to apply the plate value to
  • 01:37:14 so we just write state dot videos dot
  • 01:37:17 map we have an element an error function
  • 01:37:22 curly brackets and inside this map we
  • 01:37:25 want to return something and we create a
  • 01:37:27 ternary operator here we check if our
  • 01:37:29 element dot ID equals to state active
  • 01:37:35 video dot ID if it does we know that
  • 01:37:39 this is the video we want to change
  • 01:37:40 cause we playing this active video now
  • 01:37:42 and we want to change or videos array
  • 01:37:45 and set that this video has been played
  • 01:37:47 all right and if this is true we update
  • 01:37:52 this element so we clone the element
  • 01:37:54 first we always have to clone it and
  • 01:37:57 then we set the played property to true
  • 01:37:59 for that element otherwise we just
  • 01:38:02 return the element because we don't want
  • 01:38:04 to modify that one and this should work
  • 01:38:07 now so we go back to our video you can
  • 01:38:09 see here this it's this green little dot
  • 01:38:12 here that will get applied when we have
  • 01:38:14 played a video more than ten seconds so
  • 01:38:16 if we for example we have the second
  • 01:38:18 video here and we let it play for over
  • 01:38:21 10 seconds then it will apply this green
  • 01:38:24 little dot here and as you see if we
  • 01:38:26 change before the ten seconds nothing
  • 01:38:28 will happen
  • 01:38:30 it kind of tells us that we have been
  • 01:38:33 visiting this video before and played it
  • 01:38:35 and of course you can have more than 10
  • 01:38:37 seconds you can have less than 10
  • 01:38:38 seconds it's up to you what you want
  • 01:38:40 there stop this one and I can also just
  • 01:38:43 show you another way of doing this if
  • 01:38:46 you want if you don't want to do this
  • 01:38:47 map thing here take this one comment it
  • 01:38:51 out you can just create a Const with
  • 01:38:57 videos equals dotto top state videos we
  • 01:39:02 clone or state here with the videos we
  • 01:39:05 have a Const played video that equals
  • 01:39:10 videos find and here we can now find the
  • 01:39:14 correct video so we have a video an
  • 01:39:16 error function video dot ID equals state
  • 01:39:20 active video dot ID so here we grabbing
  • 01:39:25 the video in our array that's equal to
  • 01:39:27 the video that we actively playing now
  • 01:39:29 then we can just apply the played value
  • 01:39:31 to this one so we have the played video
  • 01:39:33 dot played and set that to true and then
  • 01:39:37 we can just set the state doctor top
  • 01:39:42 state and videos so we created this copy
  • 01:39:47 we cloned the videos here and we looked
  • 01:39:50 for the video that we want to set the
  • 01:39:52 plane to true we apply that one and then
  • 01:39:55 we set the state with the complete new
  • 01:39:58 videos array and it will replace the
  • 01:40:00 other one so save this one and it should
  • 01:40:03 work just as good so if we take this
  • 01:40:05 video for example and let it play for
  • 01:40:08 about 10 seconds yeah we
  • 01:40:14 all right and 10-11-12 just to be safe
  • 01:40:18 and you see it applies the green dot so
  • 01:40:23 it's really up to you this probably even
  • 01:40:25 more ways to doing this but now you have
  • 01:40:27 two ways you can do it here and I hope
  • 01:40:29 this was helpful for you and this is
  • 01:40:31 actually or a complete player we just
  • 01:40:33 have to create our local storage so we
  • 01:40:35 can persist this data or what we have
  • 01:40:37 played and or list with videos
  • 01:40:40 okay we are almost finished with this
  • 01:40:43 one and in this video we're going to
  • 01:40:44 learn how to persist our state in local
  • 01:40:47 storage the first thing we have to do is
  • 01:40:50 to have a function that will trigger
  • 01:40:51 when we have updated or state in the
  • 01:40:54 player and for that one we can use the
  • 01:40:56 use effect hook as we did before so we
  • 01:40:59 need a use effect hook that triggers
  • 01:41:01 every time the state updates so if we go
  • 01:41:03 into our file wbn player yes yet again
  • 01:41:07 and below our state we create a new use
  • 01:41:10 affect hook use effect parentheses then
  • 01:41:15 we have this error function inside like
  • 01:41:19 so and we will access the local storage
  • 01:41:21 I'm right to it here so we write local
  • 01:41:24 storage dot set item parentheses then we
  • 01:41:28 need a back tick dollar sign curly
  • 01:41:30 brackets and we want to grab state play
  • 01:41:34 list ID we want to save different states
  • 01:41:37 in the local storage if we have more
  • 01:41:39 than one player with different playlists
  • 01:41:41 so we identify it with the playlist ID
  • 01:41:44 and not a backtick coma and then we do a
  • 01:41:47 json stringify course you can only write
  • 01:41:51 a string to the local storage so we have
  • 01:41:53 to convert this one to a string before
  • 01:41:55 we write it parenthesis and we have our
  • 01:41:59 state orbit so we clone that one like so
  • 01:42:01 as we learned before we also have to
  • 01:42:04 make this use effect dependent on
  • 01:42:05 something and in this case we want it to
  • 01:42:07 only update when the state changes so we
  • 01:42:11 go down here write the coma create our
  • 01:42:14 state like so and this will make it only
  • 01:42:16 fire when the state changes so we say
  • 01:42:19 this one we go back to our player and
  • 01:42:22 inter console we can check our
  • 01:42:24 application and inside there we have a
  • 01:42:27 local storage oops just going to delete
  • 01:42:30 my old ones here so I reload it and as
  • 01:42:34 you can see we have this playlist called
  • 01:42:36 WBN RDX and we have our stayed here as
  • 01:42:40 you see so every time we change
  • 01:42:42 something here it will also update the
  • 01:42:44 state as you can see now it's the active
  • 01:42:48 video it's number three here
  • 01:42:51 and now it's number four so it's working
  • 01:42:54 it's updating the local storage and sync
  • 01:42:56 it with the state what we have left to
  • 01:42:59 do is when we initialize the player we
  • 01:43:01 want to check if we have something saved
  • 01:43:03 in local storage and use that stayed
  • 01:43:05 instead so we create a new con stopped
  • 01:43:09 here called saved stayed and we get the
  • 01:43:13 young to add JSON we parse it back to a
  • 01:43:15 JSON format local storage get item
  • 01:43:22 parenthesis backticks dollar sign curly
  • 01:43:27 brackets and we use the videos this one
  • 01:43:31 here we just playlist ID we grab the
  • 01:43:34 playlist ID from this one here in our
  • 01:43:36 JSON object in index dot HTML file so we
  • 01:43:40 have another backtick to end this one
  • 01:43:43 like so whoops we have an error here
  • 01:43:49 yeah I misspelled this one it should say
  • 01:43:52 parse like so so hopefully we'll have
  • 01:43:55 our local storage saved in the same
  • 01:43:58 state comes to do now is to modify or
  • 01:44:02 state or initial state here we have to
  • 01:44:04 check if we actually have this one or if
  • 01:44:07 not we're going to use the videos so we
  • 01:44:09 use a ternary operator here on every
  • 01:44:12 property in the state so we check if we
  • 01:44:14 have a same state if we have a safe
  • 01:44:17 state we grab the values from the safe
  • 01:44:19 state instead otherwise we grab it from
  • 01:44:22 the videos Const say state said state
  • 01:44:27 active video like so a bit repetitive
  • 01:44:32 here but we have to do it safe state say
  • 01:44:39 state dot night mode otherwise we can
  • 01:44:42 set it to true as before and we have a
  • 01:44:45 safe state say it state dot playlist ID
  • 01:44:52 like so just making sure that I spelled
  • 01:44:55 everything correctly here it looked like
  • 01:44:58 so so say this one
  • 01:45:02 and if we remove this one we clear out
  • 01:45:06 the local storage we make a reload and
  • 01:45:11 we change to video yeah three and we can
  • 01:45:16 also wait for 10 seconds here to see if
  • 01:45:19 it will save this one for us
  • 01:45:21 so exchange the video 5 we can change
  • 01:45:25 the night mode and if we look here it
  • 01:45:28 should be saved now number 5
  • 01:45:30 night more false and of video so if we
  • 01:45:33 load this one yeah it's working so we've
  • 01:45:37 learned how to persist a state it was
  • 01:45:39 falyse in this application it's not that
  • 01:45:42 much code to persist the state in local
  • 01:45:44 storage in the next video we just going
  • 01:45:47 to learn how to deploy this one we only
  • 01:45:50 have to learn where to deploy this
  • 01:45:52 sucker so in this video we'll do that if
  • 01:45:55 we start in our app dot JS file you have
  • 01:45:58 to think about the URL where you want to
  • 01:46:00 host your application and for example
  • 01:46:03 where I host it I have it at react
  • 01:46:08 underscore video player like so so I
  • 01:46:12 have it in a subfolder here and that's
  • 01:46:14 very important cause we have to tell the
  • 01:46:16 router in react that we have our
  • 01:46:19 application in a subfolder so we go into
  • 01:46:22 a PS file and inside you browse around a
  • 01:46:26 component tag here you create a base
  • 01:46:29 name equals and then forward slash and
  • 01:46:33 your sub folder and a forward slash
  • 01:46:37 again and this is only important if
  • 01:46:40 we're going to use a sub folder if you
  • 01:46:42 have it hosted at the root you don't
  • 01:46:44 need to do this it's only if you have a
  • 01:46:46 sub folder but it's likely that you're
  • 01:46:49 going to have that I think so say this
  • 01:46:51 one then we have to go into our package
  • 01:46:55 JSON file you have a property called
  • 01:46:58 home page and inside here you can just
  • 01:47:01 write the whole complete URL to your
  • 01:47:03 application so in my case it will be VM
  • 01:47:06 file calm slash react video player so
  • 01:47:09 put in your own URL there and also be
  • 01:47:12 sure that you don't have a typing error
  • 01:47:14 here you have to have a coma because
  • 01:47:15 this is a new prop
  • 01:47:16 in this object here sale is one and this
  • 01:47:20 is really all there is to it no we have
  • 01:47:23 to go into our console we have to break
  • 01:47:26 or application here with ctrl + C and
  • 01:47:29 then we just run npm run build and press
  • 01:47:34 enter and create drag tap will create
  • 01:47:36 this build folder for us as you can see
  • 01:47:39 here it has built some files for us here
  • 01:47:41 we go into our finder and you see we
  • 01:47:43 have this new build folder so these are
  • 01:47:45 the files that you just copied to your
  • 01:47:47 server so grab this file and upload them
  • 01:47:50 to your hosting server and it should
  • 01:47:53 work and there's also one more thing you
  • 01:47:55 have to think of and that's the dot h TX
  • 01:47:58 s file and this is really where it can
  • 01:48:01 look very different depending on hosting
  • 01:48:04 company your server and where you're
  • 01:48:06 going to host this one but I can just
  • 01:48:09 show you what works in my case so I
  • 01:48:11 create a new file here and I copy and
  • 01:48:13 paste this one this one here goes in the
  • 01:48:16 dot H the Access file in the folder
  • 01:48:19 where you host your application what
  • 01:48:21 this will do is it will always route
  • 01:48:23 back to the index dot HTML on the server
  • 01:48:25 cause we want or react application to do
  • 01:48:28 the routing and this is really important
  • 01:48:31 cause if you don't have this I've I've
  • 01:48:32 had a lot of Heric with this things a
  • 01:48:35 lot of times and if you don't have this
  • 01:48:37 one it will not work it will probably
  • 01:48:40 show you the start page but if you click
  • 01:48:42 another video here it will throw an
  • 01:48:44 error cause it won't find this one here
  • 01:48:46 as it's in a subfolder and we also have
  • 01:48:48 this ID here and it won't work because
  • 01:48:51 it's trying to route this on the server
  • 01:48:53 and we want to do this routing in the
  • 01:48:55 application that's why we fall back to
  • 01:48:57 the index dot HTML file so this is the
  • 01:49:01 end of this course I hope you learned
  • 01:49:03 something and I have had a blast
  • 01:49:05 creating this one and showing this for
  • 01:49:07 you hopefully I see you in my future
  • 01:49:09 courses I intend to do a lot more of
  • 01:49:11 them and I wish you all a great time and
  • 01:49:14 happy coding Thanks
  • 01:49:17 hi guys hope you enjoying the react
  • 01:49:19 cooks course I thought I could show you
  • 01:49:21 how to use the use cool back hook in
  • 01:49:23 this little bonus video today so what
  • 01:49:26 I've done here I set up a really simple
  • 01:49:28 react app here it's just this button
  • 01:49:30 that generates a random number here and
  • 01:49:32 as you can see in my code here I just
  • 01:49:36 have the app component and the button
  • 01:49:38 component and of course the index so
  • 01:49:40 what's going on here yeah in our app
  • 01:49:42 we're using the hooks in a function of
  • 01:49:44 component just as in the course and I
  • 01:49:47 created a callback for the button so
  • 01:49:50 when the button is clicked this callback
  • 01:49:52 is invoked the button that receives the
  • 01:49:55 callback and I also console.log what's
  • 01:49:58 happening here so if we start looking at
  • 01:50:01 the application and press the button
  • 01:50:03 here you can see I console log out when
  • 01:50:05 I click and I also console.log if the
  • 01:50:08 button is rendered so first of all we
  • 01:50:11 can just google use callback and go to
  • 01:50:14 the react home page and we have it down
  • 01:50:19 here and as you can see it returns and
  • 01:50:23 memorized callback and this is because
  • 01:50:25 in the functional components when you
  • 01:50:27 remember the component it renders
  • 01:50:29 everything again and if we look in our
  • 01:50:31 code for example or app the case or app
  • 01:50:33 component when this one rerun this it
  • 01:50:36 will go through all of this code again
  • 01:50:38 and create the callback over and over
  • 01:50:40 again and there's also many that's using
  • 01:50:43 inline functions here for the callback
  • 01:50:46 like so and you do something new here
  • 01:50:49 inside is and this anonymous function
  • 01:50:51 will get recreated every time you click
  • 01:50:54 so there will be a lot of these ones and
  • 01:50:56 that's no good if you have a really
  • 01:50:58 large application to be honest react
  • 01:51:01 it's a pretty good and optimized library
  • 01:51:04 so you don't have to worry about this
  • 01:51:05 really but this a lot of people out
  • 01:51:07 there worrying about recreating
  • 01:51:09 functions and callback functions so what
  • 01:51:12 we do in a regular class component we
  • 01:51:15 can remove this one and just go back to
  • 01:51:18 what it was before here and we just call
  • 01:51:22 the function up here instead and then it
  • 01:51:24 will not get recreated every time but
  • 01:51:27 that's in the class components
  • 01:51:30 they were different from the functional
  • 01:51:32 components so we have to do something
  • 01:51:34 else here for this one to not get
  • 01:51:35 recreated every time and if we read a
  • 01:51:38 little bit the use callback hook here
  • 01:51:40 pass an inline callback and an array of
  • 01:51:42 inputs use callback will return a
  • 01:51:45 memorized version of the callback that
  • 01:51:46 only changes if one of the inputs has
  • 01:51:49 changed so you can kind of send in this
  • 01:51:52 array here just like we did with the use
  • 01:51:54 effect hook and this one will control
  • 01:51:57 when the callback function will renew
  • 01:51:59 itself and then if you don't want to
  • 01:52:01 renew it just like we'd use effects you
  • 01:52:03 can just send in an empty array so this
  • 01:52:05 is useful when passing code back to
  • 01:52:07 optimize char components that rely on
  • 01:52:09 reference equality to prevent
  • 01:52:11 unnecessary renders Iggy should
  • 01:52:13 component update so when this one
  • 01:52:15 creates a new call back on every render
  • 01:52:18 even if the callback haven't changed the
  • 01:52:21 char components will think that it's a
  • 01:52:23 new prop that's being sent in and will
  • 01:52:25 rerender and of course you have to do
  • 01:52:28 something to control also what props are
  • 01:52:31 being sent to your component but I'll
  • 01:52:33 show you that in a second so what can we
  • 01:52:35 do it because this one is being
  • 01:52:37 recreated every time we click on this
  • 01:52:40 one it creates a new one so we can
  • 01:52:43 firstly import the use callback hook
  • 01:52:46 like so just call back and then it is as
  • 01:52:50 simple as just wrapping this one like so
  • 01:52:55 and we also want to pass in an empty
  • 01:52:58 array for this one because we're not
  • 01:53:00 going to need to recreate this one you
  • 01:53:03 just have this you state here that's
  • 01:53:05 creating a random number when we click
  • 01:53:08 this one so it should look the same all
  • 01:53:11 the time we don't have to recreate it so
  • 01:53:12 we just create this callback function
  • 01:53:14 once and we do that by sending in an
  • 01:53:16 empty array so if we say this one and we
  • 01:53:21 click and we can see that nothing has
  • 01:53:23 really changed here the callback
  • 01:53:25 function itself is just created once but
  • 01:53:27 we can't really see it now so we can
  • 01:53:30 test this one by going to our button dot
  • 01:53:32 JS file there's also one you think in
  • 01:53:35 react they call react dot memo and this
  • 01:53:38 one if you use the react memo it will
  • 01:53:41 make this functional component to check
  • 01:53:43 props and if the props are unchanged it
  • 01:53:46 won't be render itself and this way you
  • 01:53:49 don't have to import anything special
  • 01:53:50 you just write react dot memo and you
  • 01:53:54 wrap your component in that one like so
  • 01:53:57 so if we click this one you can see that
  • 01:53:59 we're not we rendering the component now
  • 01:54:01 and that's good because before we had
  • 01:54:04 this react memo say this one again you
  • 01:54:07 can see I had this console log here
  • 01:54:11 every time the app is rendered the
  • 01:54:13 button component also get rear-ended but
  • 01:54:17 by using the memo here like so we are
  • 01:54:23 making sure that this component will
  • 01:54:25 check the props before it decide if it
  • 01:54:27 should rerender or not and because we
  • 01:54:30 use the use callback hook here we are
  • 01:54:32 not recreating this one in each render
  • 01:54:35 so this will work now and as I said
  • 01:54:38 there's not a lot of performance issues
  • 01:54:40 here so you don't really have to do it
  • 01:54:42 and that's why I didn't show this one
  • 01:54:44 also in the course where we create a
  • 01:54:46 video play because you not need to do
  • 01:54:48 this in this kind of small applications
  • 01:54:51 but it could be good to know what the
  • 01:54:53 use callback is and now you know what it
  • 01:54:56 is and what you can use it for so hope
  • 01:54:59 this little bonus video was will have
  • 01:55:01 something to do and you learned
  • 01:55:02 something
  • 01:55:03 I also hope you enjoy my reax course and
  • 01:55:06 that it's going great you can also hook
  • 01:55:08 me up on twitter at raven if you
  • 01:55:11 want to I started to share small code
  • 01:55:13 tips there especially in react but also
  • 01:55:15 other things so this is it I hope you
  • 01:55:19 enjoyed it see you