React JS Course for Beginners - 2021 Tutorial

Learn:
- React
- JSX
- Styled Components
- React Router
- State and Props
- Context
- CSS
- API handling
- Hooks
- Typescript
- Persist state in SessionStorage
- Deploy to Netlify
- And MUCH more ...

⭐️ Course Contents ⭐️
⌨️ (0:00:10) Introduction
⌨️ (0:00:57) The App
⌨️ (0:03:27) The Movie DB - API Key
⌨️ (0:05:09) What is React?
⌨️ (0:10:49) Starter Files
⌨️ (0:14:16) Quick about tooling
⌨️ (0:15:50) Bootstrap with CRA
⌨️ (0:19:11) Install dependencies
⌨️ (0:24:17) Copy fils from starter files
⌨️ (0:28:34) Setup API Key and walkthrough of API files
⌨️ (0:33:24) React without JSX
⌨️ (0:40:10) Short about JSX
⌨️ (0:42:52) Crash course in Props and State
⌨️ (0:55:12) Short about Styled Components
⌨️ (0:58:23) Global Styles
⌨️ (1:08:01) Header Component
⌨️ (1:21:09) Header Component - Styles
⌨️ (1:25:40) Home Component - Scaffold
⌨️ (1:33:45) Short about built-in hooks in React
⌨️ (1:38:55) Fetch data from the API for Home Page
⌨️ (1:52:44) Custom hook for Home Page
⌨️ (1:59:49) HeroImage Component
⌨️ (2:11:22) HeroImage Component - Styles
⌨️ (2:20:23) Grid Component
⌨️ (2:26:06) Grid Component - Styles
⌨️ (2:29:44) Thumb Component
⌨️ (2:34:59) Thumb Component - Styles
⌨️ (2:37:28) Spinner Component
⌨️ (2:42:03) SearchBar Component
⌨️ (2:57:54) SearchBar Component - Styles
⌨️ (3:02:16) SearchBar Component - Logic
⌨️ (3:06:51) Button Component
⌨️ (3:10:42) Button Component - Styles
⌨️ (3:13:06) Button Component - Logic
⌨️ (3:19:50) Short about React Router
⌨️ (3:21:59) Routing with React Router
⌨️ (3:34:15) Movie Component - Scaffold
⌨️ (3:36:26) Fetch movie data from the API
⌨️ (3:49:38) BreadCrumb Component
⌨️ (3:54:49) BreadCrumb Component - Styles
⌨️ (3:57:46) MovieInfo Component
⌨️ (4:08:41) MovieInfo Component - Styles
⌨️ (4:17:35) MovieInfoBar Component
⌨️ (4:23:26) MovieInfoBar Component - Styles
⌨️ (4:26:38) Actor Component
⌨️ (4:32:09) Actor Component - Styles
⌨️ (4:34:16) Short about PropTypes
⌨️ (4:37:38) Validate Props with PropTypes
⌨️ (4:48:17) Short about SessionStorage
⌨️ (4:50:32) SessionStorage - Home
⌨️ (4:59:34) SessionStorage - Movie
⌨️ (5:03:17) Build and prepare for Netlify
⌨️ (5:05:58) Netlify drag and drop and Netlify CLI
⌨️ (5:10:29) Netlify Continous Deployment
⌨️ (5:13:48) Bonus - Classes - SearchBar Component
⌨️ (5:22:04) Bonus - Classes - Home Component
⌨️ (5:33:14) Bonus - Classes - Movie Component
⌨️ (5:40:39) Bonus - Typescript - Introduction
⌨️ (5:42:20) Bonus - Typescript - Bootstrap project and copy files
⌨️ (5:47:19) Bonus - Typescript - Refactor base files
⌨️ (6:04:16) Bonus - Typescript - Refactor Home and Components
⌨️ (6:14:55) Bonus - Typescript - Refactor Movie and Components
⌨️ (6:25:52) Bonus - Login - Short about TMDB login and rating system
⌨️ (6:29:25) Bonus - Login - Global Context
⌨️ (6:34:34) Bonus - Login - Login Component
⌨️ (6:50:49) Bonus - Login - Login Component - Styles
⌨️ (6:53:47) Bonus - Login - Login from Header
⌨️ (7:00:27) Bonus - Login - Rate Component
⌨️ (7:04:35) Bonus - Login - Rating from MovieInfo

🎉 Thanks to our Champion and Sponsor supporters:
👾 Wong Voon jinq
👾 hexploitation
👾 Katia Moran
👾 BlckPhantom
👾 Nick Raker
👾 Otis Morgan
👾 DeezMaster
👾 Treehouse

[Aly_Fahmy]

Has anyone noticed free code camp has been absolutely KILLING it (even more than usual) ever since quarantine last year?!
Truly thank you guys!!

[ahmadkhaled]

0:00 - Introduction
0:47 - The App
3:17 - The Movie DB - API Key
4:59 - What is React?
10:39 - Starter Files
14:06 - Quick about tooling
15:40 - Bootstrap with CRA
19:01 - Install dependencies
24:07 - Copy fils from starter files
28:24 - Setup API Key and walkthrough of API files
33:14 - React without JSX
40:00 - Short about JSX
42:42 - Crash course in Props and State
55:02 - Short about Styled Components
58:13 - Global Styles
01:07:51 - Header Component
01:20:59 - Header Component - Styles
01:25:30 - Home Component - Scaffold
01:33:35 - Short about built-in hooks in React
01:38:45 - Fetch data from the API for Home Page
01:52:34 - Custom hook for Home Page
01:59:39 - HeroImage Component
02:11:12 - HeroImage Component - Styles
02:20:13 - Grid Component
02:25:56 - Grid Component - Styles
02:29:34 - Thumb Component
02:34:49 - Thumb Component - Styles
02:37:18 - Spinner Component
02:41:53 - SearchBar Component
02:57:44 - SearchBar Component - Styles
03:02:06 - SearchBar Component - Logic
03:06:41 - Button Component
03:10:32 - Button Component - Styles
03:12:56 - Button Component - Logic
03:19:40 - Short about React Router
03:21:49 - Routing with React Router
03:34:05 - Movie Component - Scaffold
03:36:16 - Fetch movie data from the API
03:49:28 - BreadCrumb Component
03:54:39 - BreadCrumb Component - Styles
03:57:36 - MovieInfo Component
04:08:31 - MovieInfo Component - Styles
04:17:25 - MovieInfoBar Component
04:23:16 - MovieInfoBar Component - Styles
04:26:28 - Actor Component
04:31:59 - Actor Component - Styles
04:34:06 - Short about PropTypes
04:37:28 - Validate Props with PropTypes
04:48:07 - Short about SessionStorage
04:50:22 - SessionStorage - Home
04:59:24 - SessionStorage - Movie
05:03:07 - Build and prepare for Netlify
05:05:48 - Netlify drag and drop and Netlify CLI
05:10:19 - Netlify Continous Deployment
05:13:38 - Bonus - Classes - SearchBar Component
05:21:54 - Bonus - Classes - Home Component
05:33:04 - Bonus - Classes - Movie Component
05:40:29 - Bonus - Typescript - Introduction
05:42:10 - Bonus - Typescript - Bootstrap project and copy files
05:47:09 - Bonus - Typescript - Refactor base files
06:04:06 - Bonus - Typescript - Refactor Home and Components
06:14:45 - Bonus - Typescript - Refactor Movie and Components
06:25:42 - Bonus - Login - Short about TMDB login and rating system
06:29:15 - Bonus - Login - Global Context
06:34:24 - Bonus - Login - Login Component
06:50:39 - Bonus - Login - Login Component - Styles
06:53:37 - Bonus - Login - Login from Header
07:00:17 - Bonus - Login - Rate Component
07:04:25 - Bonus - Login - Rating from MovieInfo

[mfg]

Started with FCC years ago, went to a BootCamp well prepared and now am a software engineer, keep up the good work folks :)

[battlebear]

I'm at 2 hours in. I'd say that this is not beginner friendly, especially if you don't know anything about React at all before this. It's easy to get lost and there're bunch of libraries involved. Not just React. But I think it is good for someone who knew basics and want to solidify the concept with practical website building. He also introduced many nice tools for development. It's clear that he spent much effort on this course.Thank you!

[harshkc]

If the initial timestamp in the description is changed to 0:00 from 0:00:10, YouTube will render them as chapters and it would make navigating between timestamps easier.
Keep the killer content following...

[azizbliss]

Absolutely loving it. Feels like watching Batman Dark Knight's Bane conducting the course. Thank you @Weibenfalk for this wonderful course.

[jimbouch]

I had to wait until I completed all the steps in the section - Header Component - Styles - for all of the styles to render, so be patient. It works. Thanks for this course. So far, it's a good intro.

[muscleinjury]

was just gonna buy one from udemy tomorrow....guess not. thank you so much fcc.

[bsal]

I haven't finished those two courses yet and another course already ! i will come back for sure after exams !!!

[Syntax]

Really enjoying this course! Thanks for all the hard work that's gone into it!

[goldenmonkey]

Follwwww up !!!! I am learning JS HTML CSS. React is my next station!! But most tutorial and course on udemy is outdated. It's the time !! let's go~~~
And super thanks English Substitle

[patricialee]

Thank you so much for this, I'm switching from Angular to React, 7 hrs of tutorial! awesome!

[ozz]

THIS IS EXACTLY WHAT I NEEDED NOW THANK YOU
i hope they post a react native course aswell

[WalZKiller]

Thank you for your tutorial! I very much appreciate your effort in creating this 7-hour full React course. I hope you continue sharing your knowledge and keep inspiring others :D

[sahul._]

No words to appreciate free code camp,
You are better than many paid course on the internet,
Thanks.

[EnesKab]

Before I start to that course, I checked the comments if this is React beginner friendly or not. I could not see any proper review, so I trusted the title of the course and started. I have spent almost 1.5 hours on this so far.. I know JS, I know backend etc. And I can assure you that this is not a beginner friendly nor intermediate, nor advanced friendly course.

We are talking about what is JSX, and then immediately diving into props, components etc without any clue. Then we start to type "stuff", again without knowing anything. But on the other hand, we are talking about JS destructing meanwhile. So, if this is NOT beginner friendly, why we are talking about stuff like destructing? If this is beginner friendly, why we are NOT talking about what the heck is a component, props, states etc in advance? Why we are directly diving in ???

So heads up to anyone who is considering following this course. You will get lost in no time. If you don't believe me, be my guest and go on. You will agree with me soon or later.

[matthastings]

Just finished! Thanks Thomas! Very helpful!

[codymccarty]

If your code in side of the backticks inside of global styles is all red or all blue. He is using an extention called vscode-styled-components to get syntax highlighting and intelliSense for styled-components.

[andreaspatounis]

Dude you are always the right video the right time

[tommasocastagnola]

exactly what I needed right now! The older one was 10 hours, less affordable