Autoplay
Autocomplete
Speed
Previous Lecture
Complete and Continue
React Essentials | Build a Movie App with React JS [2021]
Introduction
Welcome to the course! (0:47)
The App that we're building (2:29)
The Movie DB API and API key (1:42)
What is React? (5:39)
Project Setup
CHOICE - Starter Files or create from scratch (3:27)
Short about tooling (1:34)
Bootstrap with Create React App (CRA) (3:20)
Install Dependencies (5:06)
Copy files from Starter Files (4:17)
Setup .env file and API key (4:49)
React Basics
React without JSX (6:46)
Short about JSX (2:41)
Crash course in Props and State (12:20)
Styled Components
Short about Styled Components (3:10)
Global Styles with Styled Components (9:38)
Header
Header Component (13:07)
Header Component - Styles (4:31)
Home Page
Home Component - Scaffold (8:04)
Short about built in React Hooks (5:09)
Home Component - Fetch data with hooks (13:49)
Custom Hook - useHomeFetch (7:04)
HeroImage Component (11:33)
HeroImage Component - Styles (9:01)
Grid Component (5:42)
Grid Component - Styles (3:37)
Thumb Component (5:15)
Thumb Component Styles (2:28)
Spinner Component (4:35)
SearchBar Component (15:50)
SearchBar Component - Styles (4:22)
SearchBar Component - Fetching logic (4:35)
Button Component (3:50)
Button Component - Styles (2:23)
Button Component - Fetching logic (6:44)
Routing
Short about React Router v6 (2:09)
Set up routes (12:15)
Movie Page
Movie Component - Scaffold (2:11)
Movie Component - Fetch data with hooks (13:12)
BreadCrumb Component (5:10)
BreadCrumb Component - Styles (2:57)
MovieInfo Component (10:55)
MovieInfo Component - Styles (8:53)
MovieInfoBar Component (5:51)
MovieInfoBar Component - Styles (3:11)
Actor Component (5:31)
Actor Component - Styles (2:06)
PropTypes
Short about PropTypes (3:22)
Validate props with PropTypes (10:39)
Persisting state in sessionStorage
Short about sessionStorage (2:14)
sessionStorage - Home Page (9:02)
sessionStorage - Movie Page (3:43)
Deploy
Make a production build (2:40)
Netlify - Drag and drop & Netlify CLI (4:30)
Netlify - Continuous deployment (3:19)
BONUS - Classes
Classes - SearchBar (8:15)
Classes - Home Component (11:09)
Classes - Movie Component (7:25)
BONUS - Typescript
Short about Typescript (1:41)
Typescript - Create project with CRA and install dependencies (4:59)
Typescript - Refactor base files (16:57)
Typescript - Refactor Home Page (10:39)
Typescript - Refactor Movie Page (10:56)
BONUS - TMDB Login and rating
Short about TMDB login and rating (3:33)
Global Context (5:08)
Login Component (16:15)
Login Component - Styles (2:58)
Login from Header (6:40)
Rate Component (4:08)
Rating in MovieInfo (5:51)
Short about React Router v6
Lecture content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock