Chapters (69)
- 0:10Introduction
- 0:57The App
- 3:27The Movie DB - API Key
- 5:09What is React?
- 10:49Starter Files
- 14:16Quick about tooling
- 15:50Bootstrap with CRA
- 19:11Install dependencies
- 24:17Copy fils from starter files
- 28:34Setup API Key and walkthrough of API files
- 33:24React without JSX
- 40:10Short about JSX
- 42:52Crash course in Props and State
- 55:12Short about Styled Components
- 58:23Global Styles
- 1:08:01Header Component
- 1:21:09Header Component - Styles
- 1:25:40Home Component - Scaffold
- 1:33:45Short about built-in hooks in React
- 1:38:55Fetch data from the API for Home Page
- 1:52:44Custom hook for Home Page
- 1:59:49HeroImage Component
- 2:11:22HeroImage Component - Styles
- 2:20:23Grid Component
- 2:26:06Grid Component - Styles
- 2:29:44Thumb Component
- 2:34:59Thumb Component - Styles
- 2:37:28Spinner Component
- 2:42:03SearchBar Component
- 2:57:54SearchBar Component - Styles
- 3:02:16SearchBar Component - Logic
- 3:06:51Button Component
- 3:10:42Button Component - Styles
- 3:13:06Button Component - Logic
- 3:19:50Short about React Router
- 3:21:59Routing with React Router
- 3:34:15Movie Component - Scaffold
- 3:36:26Fetch movie data from the API
- 3:49:38BreadCrumb Component
- 3:54:49BreadCrumb Component - Styles
- 3:57:46MovieInfo Component
- 4:08:41MovieInfo Component - Styles
- 4:17:35MovieInfoBar Component
- 4:23:26MovieInfoBar Component - Styles
- 4:26:38Actor Component
- 4:32:09Actor Component - Styles
- 4:34:16Short about PropTypes
- 4:37:38Validate Props with PropTypes
- 4:48:17Short about SessionStorage
- 4:50:32SessionStorage - Home
- 4:59:34SessionStorage - Movie
- 5:03:17Build and prepare for Netlify
- 5:05:58Netlify drag and drop and Netlify CLI
- 5:10:29Netlify Continous Deployment
- 5:13:48Bonus - Classes - SearchBar Component
- 5:22:04Bonus - Classes - Home Component
- 5:33:14Bonus - Classes - Movie Component
- 5:40:39Bonus - Typescript - Introduction
- 5:42:20Bonus - Typescript - Bootstrap project and copy files
- 5:47:19Bonus - Typescript - Refactor base files
- 6:04:16Bonus - Typescript - Refactor Home and Components
- 6:14:55Bonus - Typescript - Refactor Movie and Components
- 6:25:52Bonus - Login - Short about TMDB login and rating system
- 6:29:25Bonus - Login - Global Context
- 6:34:34Bonus - Login - Login Component
- 6:50:49Bonus - Login - Login Component - Styles
- 6:53:47Bonus - Login - Login from Header
- 7:00:27Bonus - Login - Rate Component
- 7:04:35Bonus - Login - Rating from MovieInfo
Show the creator's full description
This is a full premium course. Learn React.js from the ground up with fundamentals to more intermediate and advanced topics. You will learn by building a real app!
💻 Starter files: https://github.com/weibenfalk/react-rmdb-v3-starter-files
Course from Thomas Weibenfalk. Check out his channel: https://www.youtube.com/channel/UCnnnWy4UTYN258FfVGeXBbg
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 ...
❤️ Try interactive React courses we love, right in your browser: https://scrimba.com/freeCodeCamp-React (Made possible by a grant from our friends at Scrimba)
⭐️ 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
Description and video by freeCodeCamp.org. This page is an independent companion view; the video is embedded from YouTube.