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

Learn about React Hooks and Styled Components in this full tutorial.

We'll build a React video player where you can create a list of videos and select from the list. The video player can play both Vimeo and YouTube videos and will also persist state in local storage of played videos.

In this course you'll learn:
∙ React Fundamentals with Hooks
∙ Stateless Functional Components
∙ JSX syntax and expressions
∙ Styled Components
∙ Higher Order Components (HOC)
∙ React Router
∙ Use Create-React-App
∙ Deploy the finished App
∙ ES6+ concepts and syntax
∙ Use Local Storage to keep state

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction and Setup
⌨️ (0:07:50) Scaffolding
⌨️ (0:15:50) Setting Up the Routes
⌨️ (0:18:45) Styled Components - Global Styling
⌨️ (0:25:27) Styled Components - Component Styling
⌨️ (0:34:09) Styled Components - Themes
⌨️ (0:50:11) Preparing for Hooks
⌨️ (0:59:15) Pre-Example
⌨️ (1:02:49) useState
⌨️ (1:13:23) useEffect
⌨️ (1:21:57) Higher Order Components
⌨️ (1:28:03) Callback Functions
⌨️ (1:40:35) Persisting State in Local Storage
⌨️ (1:45:19) Deploying
⌨️ (1:49:10) useCallback

--

[DEV_XO]

Damn man, this channel is just amazing. Really really nice content, and for free to us all. Well, deserved 1.1M Subs, and many more! Thanks.

[austenvalentine]

I am incredibly grateful for this video. The documentation for styled components is excellent, but seeing it used in a workflow makes the learning much faster. Thank you!

[victorkarlsson]

Your Swenglish is amazing man! Love it.

[robby]

if you get an error w/ running npm update' should fix it

[aashayamballi]

Thank you so much... I was waiting for this :)

[marcelomagalhaes]

For the routing part (16 min) it would be better to use an optional param instead of two routes, like this: <Route exact path="/:activeVideo?" component={WbnPlayer} />.

[sviatlanakruhlikava]

Thank you for this course.
But for me there are a lot of styled components and others and only a few hooks.

[twjr]

could yall do a redux crash cource please?

[iKhawajaWaleed]

9:27 you could have just wriitten "import Playlist from './Playlist'"; instead of "import Playlist from '../containers/Playlist'";

[ishumishra]

you have used props in your wbn functional component but from where these values are coming under props as you havent used wbn anywhere else

[majik]

How can you change those videos in the playlist. I used the embed code in the video url but the same video plays no matter what.

[LosEagle]

There is very little need to use hocs with hooks. Hooks should just about replace most use cases for hocs. Also you don't really need to delve deep into javascript classes even without hooks. All you ever use with classes in react are the lifecycle methods and custom methods. Since React uses composition instead of inheritance and every method is private, you don't really need to have any OOP knowledge either.

[alexgusev]

Don't use hooks inside of conditions

[maximchernenkov]

good Course / but it's too much css here

[coldwarrior]

You should have called your video “Styling” not react hooks

[Kangoo]

It would have been better to use typescript