React JS Full Course 2021 - 7 hours! - React tutorial for beginners and intermediate - Movie App
This is a full premium course. Learn React.js from the ground up! The course is 7 hours long and has been re-created 3 times from scratch over the years! Learn from the ground up with fundamentals to more intermediate and advanced topics.
And the most important thing: Build a fun project and learn from building a real App!
Starter files: https://github.com/weibenfalk/react-r...
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 ...
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
—
Support me by subscribing to this channel ❤️
Find me somewhere below:
Website: https://www.weibenfalk.com
Udemy: https://www.udemy.com/user/thomas-928/
Linkedin: / thomas-weibenfalk-76356611
Twitter: / weibenfalk
Github: https://github.com/weibenfalk
FreeCodeCamp: https://www.freecodecamp.org/news/aut...
Dev.to: https://dev.to/weibenfalk