React Essentials Build a Movie App in React JS from Thomas Weibenfalk

React Essentials Build a Movie App in React JS from Thomas Weibenfalk

Sale page

Build a beautiful Movie App

Do you love movies as much as I do? And are you tired of trying to find a tutorial that will teach you what you need to know about React?

I want to build stuff that actually interests me. That’s why the project is gonna be a Movie Application built with The Movie DB API. The finished project will be a beautiful and modern looking App that lets the user search for their favourite movies.

I’ve always also learned the most by actually creating a real project. Real cool things that can be used for something.

The “foo” and “bar” tutorials out there are nothing for me.

Hopefully it’s nothing for you either as you’re here.At the end of the course you will have a slick Movie Application that you can build upon. Use the base that you’ve build in this course to learn more yourself and implement new features.

What will you learn in this course?

Modern React
JSX
Hooks API
Stateful Functional Components
Props and State
Components
Custom Hooks
JSX Syntax
Fetching data from an API
Create React App
Bonus – Class Components
Bonus – Typescript
Bonus – Global Context
Deploy to Netlify
ES6+ Syntax
Persist state in sessionStorage

and lots more …

Course Curriculum

Introduction

video icon Welcome to the course! (0:47)

video icon The App that we’re building (2:29)
video icon The Movie DB API and API key (1:42)
video icon What is React? (5:39)
Project Setup

video icon CHOICE – Starter Files or create from scratch (3:27)

video icon Short about tooling (1:34)
video icon Bootstrap with Create React App (CRA) (3:20)
video icon Install Dependencies (5:06)
video icon Copy files from Starter Files (4:17)
video icon Setup .env file and API key (4:49)
React Basics

video icon React without JSX (6:46)

video icon Short about JSX (2:41)
video icon Crash course in Props and State (12:20)
Styled Components

video icon Short about Styled Components (3:10)
video icon Global Styles with Styled Components (9:38)

Header

video icon Header Component (13:07)
video icon Header Component – Styles (4:31)

Home Page

video icon Home Component – Scaffold (8:04)
video icon Short about built in React Hooks (5:09)
video icon Home Component – Fetch data with hooks (13:49)
video icon Custom Hook – useHomeFetch (7:04)
video icon HeroImage Component (11:33)
video icon HeroImage Component – Styles (9:01)
video icon Grid Component (5:42)
video icon Grid Component – Styles (3:37)
video icon Thumb Component (5:15)
video icon Thumb Component Styles (2:28)
video icon Spinner Component (4:35)
video icon SearchBar Component (15:50)
video icon SearchBar Component – Styles (4:22)
video icon SearchBar Component – Fetching logic (4:35)
video icon Button Component (3:50)
video icon Button Component – Styles (2:23)
video icon Button Component – Fetching logic (6:44)

Routing

video icon Short about React Router v6 (2:09)
video icon Set up routes (12:15)

Movie Page

video icon Movie Component – Scaffold (2:11)
video icon Movie Component – Fetch data with hooks (13:12)
video icon BreadCrumb Component (5:10)
video icon BreadCrumb Component – Styles (2:57)
video icon MovieInfo Component (10:55)
video icon MovieInfo Component – Styles (8:53)
video icon MovieInfoBar Component (5:51)
video icon MovieInfoBar Component – Styles (3:11)
video icon Actor Component (5:31)
video icon Actor Component – Styles (2:06)

PropTypes

video icon Short about PropTypes (3:22)
video icon Validate props with PropTypes (10:39)

Persisting state in sessionStorage

video icon Short about sessionStorage (2:14)
video icon sessionStorage – Home Page (9:02)
video icon sessionStorage – Movie Page (3:43)

Deploy

video icon Make a production build (2:40)
video icon Netlify – Drag and drop & Netlify CLI (4:30)
video icon Netlify – Continuous deployment (3:19)

BONUS – Classes

video icon Classes – SearchBar (8:15)
video icon Classes – Home Component (11:09)
video icon Classes – Movie Component (7:25)

BONUS – Typescript

video icon Short about Typescript (1:41)
video icon Typescript – Create project with CRA and install dependencies (4:59)
video icon Typescript – Refactor base files (16:57)
video icon Typescript – Refactor Home Page (10:39)
video icon Typescript – Refactor Movie Page (10:56)

BONUS – TMDB Login and rating

video icon Short about TMDB login and rating (3:33)
video icon Global Context (5:08)
video icon Login Component (16:15)
video icon Login Component – Styles (2:58)
video icon Login from Header (6:40)
video icon Rate Component (4:08)
video icon Rating in MovieInfo (5:51)

Choose a Pricing Option

Get immediately download React Essentials Build a Movie App in React JS from Thomas Weibenfalk