The Modern React 18 Bootcamp - A Complete Developer Guide

Learn to built frontend React 18 applications using Redux Toolkit, TypeScript, Stripe and the Hooks

What you'll learn

Best practices for building a React 18 frontend application

Utilizing the Hooks & Redux Toolkit within a React project

Identifying when to use a state management solution

Handling user authentication and payments

Requirements

Basic JavaScript, HTML, and CSS is needed for this course

Description

In this course we will take you from a React 18 novice to a job ready engineer. This course is loaded with practical projects and examples so that you can truly understand and utilize React 18 in great depth!We will be building five projects, each one getting more and more complex. We will end this course by building an Netflix clone with features like payments and user authentication. By the end of this course, you should have multiple practical example to show off your knowledge!Here are a list of thing you will learn in this course:The difference between pure Vanilla JS and React 18How to utilize the all the different React hooksConditional rendering and mapping through a list of elementsFetching data from an external API and handling the success, loading and error statesHandling user authenticationBuilding a Postgres database to handle complex relationsUtilizing TypeScript for bug free codeAll the important ways to handle state (useState, useContext, useReducer, Redux Toolkit)Handling subscriptions payments with StripeScroll based pagination with the Observer Intersection APIOptimizing performance by preventing unnecessary re-renders I really hope you enjoy this course and learn a ton from it!

Overview

Section 1: Introduction

Lecture 1 A Little Setup

Section 2: Why We Care About React?

Lecture 2 What is React

Lecture 3 Building an App With Vanilla JS

Lecture 4 Discussing the Annoyances We Faced

Lecture 5 Building the Same App With ReactJS

Section 3: The Fundamentals of React

Lecture 6 Creating a React App

Lecture 7 Exploring the Files and Folders

Lecture 8 State and Event Handling

Section 4: Diving Deeper into React

Lecture 9 Project Intro

Lecture 10 Class vs ClassName

Lecture 11 Building the JSX Structure

Lecture 12 Listing Out Everything We Need to Work On

Lecture 13 Two Way Binding

Lecture 14 Defining an Array State

Lecture 15 Iterating Through the List to Render Elements

Lecture 16 The Key Prop

Lecture 17 Computing the Quantity

Lecture 18 Conditionally Render JSX Elements

Lecture 19 Deleting an Item

Lecture 20 Two Way Binding a List Item

Lecture 21 The useEffect Hook

Section 5: Built it Yourself

Lecture 22 Project Introduction

Lecture 23 Building the JSX Structure

Lecture 24 Two Way Binding

Lecture 25 A Cleaner and DRYer Way of Two Way Binding

Lecture 26 Input Validation and Conditional Styling

Lecture 27 Storing Store List and Map Through List to Render Elements

Lecture 28 Installing Dependencies

Lecture 29 Computing a New State

Section 6: Components for Maintainability and Reusability

Lecture 30 Project Introduction

Lecture 31 Building the JSX Structure for the Home Page

Lecture 32 Dividing Our JSX into Components

Lecture 33 Passing Props to Components

Section 7: Page Routing and Navigation

Lecture 34 Understanding Routing

Lecture 35 How React Renders Content to the Browser (CSR vs SSR)

Lecture 36 Installing react-router-dom

Lecture 37 Defining Our Routing Rules

Lecture 38 Adding Another Page to Our App

Lecture 39 Nested Routes for Common Elements

Lecture 40 Link Based Navigation

Lecture 41 Defining Dynamic Routes

Lecture 42 The useParams Hook for Extracting the Params

Lecture 43 The useNavigate Hook for Programmatic Navigation

Section 8: Fetching Data From an API

Lecture 44 Where Will the Data Come From

Lecture 45 Fetching Data From an API With Our React App

Lecture 46 Iterating Through the Fetched Data

Lecture 47 Encapsulating the Fetch Logic in a Custom Hook

Lecture 48 Handling a Loading State

Lecture 49 Handling an Error State

Lecture 50 Querying for Data by Keyword

Lecture 51 A Quick Fix

Lecture 52 Another Custom Hook

Lecture 53 Traversing and Rendering the Data

Lecture 54 The Children Prop

Lecture 55 Building the Recipe Info Component

Lecture 56 Potentials Issues With the State We Defined

Lecture 57 The useReducer Hook

Section 9: Advanced Navigation Topics

Lecture 58 Adding Query Params

Lecture 59 Handling Error State with an Error Message

Lecture 60 A 404 Error Page

Lecture 61 More Nested Pages

Lecture 62 Passing Data to an Outlet With useOutletContext

Lecture 63 Wrapping Things Up

Lecture 64 Deploying the Application

Lecture 65 Viewing Our Deployment

Section 10: Other React Hooks

Lecture 66 React Has Many Hooks

Lecture 67 The useRef Hook

Lecture 68 Building a Mini Project With useState

Lecture 69 Improving Performance With useRef

Lecture 70 Referencing Elements with useRef

Lecture 71 The useMemo Hook

Lecture 72 Memo and Props

Lecture 73 The useCallback Hook

Section 11: React with TypeScript

Lecture 74 An Intro to TypeScript

Lecture 75 Creating a TypeScript React App

Lecture 76 A Quick TypeScript Lesson

Lecture 77 Exploring the Starter Code

Lecture 78 State with TypeScript

Lecture 79 Props with TypeScript

Lecture 80 Params with TypeScript

Lecture 81 Installing Packages with TypeScript

Section 12: Tailwind Integration with React

Lecture 82 Major Project Introduction

Lecture 83 Creating a TypeScript React App

Lecture 84 Tailwind Integration

Lecture 85 Building the NavBar

Lecture 86 Building the Home Page

Lecture 87 Building the Login Page

Lecture 88 Building the Plans Page

Lecture 89 Building the Browse Page

Lecture 90 Building the Watch Page

Section 13: Building a RESTful API to Consume Data From

Lecture 91 Implementing Page Navigation

Lecture 92 How Will We Get the Data?

Lecture 93 Building an Express Server

Lecture 94 Create a Movies List GET Endpoint

Lecture 95 useReducer with TypeScript

Lecture 96 Fetching the Data From the Hook

Lecture 97 Consuming the Data in Our Browse Page

Lecture 98 Fixing the Card Styles

Lecture 99 Conditionally Adding a NavBar Background

Lecture 100 Navigating to the Watch Page

Lecture 101 Creating a Movie GET Endpoint

Lecture 102 Fetching and Rendering the Data From React

Section 14: Scroll Based Pagination

Lecture 103 Introduction to Pagination

Lecture 104 Types of Pagination

Lecture 105 Offsets and Limits

Lecture 106 Returning Paginated Data From the Server

Lecture 107 Intersection Obersever API to Detecting the Visibility of an Element

Lecture 108 Appending the Data Instead of Replacing

Lecture 109 Adding a Loading State

Lecture 110 Prevent Refetching When Client Has All the Data

Section 15: Storing Our Data in a Database

Lecture 111 Introduction to Database Solutions

Lecture 112 Spinning Up a Postgres Database

Lecture 113 Raw SQL vs ORM

Lecture 114 Defining Our Schema & Connecting to the DB

Lecture 115 Writing and Executing a Seed Script

Lecture 116 Refactoring Our Endpoints to Fetch Data With Prisma

Section 16: Authentication to Manage Users

Lecture 117 Introduction to Authentication

Lecture 118 Refactoring Common Endpoints to Separate Files

Lecture 119 Validating the User Inputs

Lecture 120 Validating That the User Doesn't Already Exist

Lecture 121 Three Different Ways to Store a Password

Lecture 122 Hashing and Saving the Password

Lecture 123 Saving the User

Lecture 124 Forming and Returning a JSON Web Token

Lecture 125 The Sign In Endpoint

Lecture 126 The Me Endpoint

Section 17: Handling Form States

Lecture 127 Back to the Client

Lecture 128 Fixing the Form Card

Lecture 129 The React Hook Form Library

Lecture 130 Setting Up the Form With the useForm Hook

Lecture 131 Managing State and Two Way Binding

Lecture 132 Validating the Form Input Values

Lecture 133 Handling Error States

Section 18: Global State With Redux Toolkit

Lecture 134 Bring Things Together

Lecture 135 Creating a useAuth Hook

Lecture 136 Making the HTTP Requests

Lecture 137 Handling Auth Errors

Lecture 138 Navigating to the Browse Page Upon Successful Authentication

Lecture 139 Storing the JWT in the Browser's Cookie

Lecture 140 Introduction to Redux Toolkit

Lecture 141 Defining Our Global State

Lecture 142 Persisting the Authentication State

Lecture 143 Defining Private Routes

Lecture 144 Adding the Logout Logic

Section 19: Processing Payment Subscriptions with Stripe

Lecture 145 Time to Make Some Money

Lecture 146 Adding Products to Stripe

Lecture 147 Connecting Our Server to Stripe

Lecture 148 Defining the Products Endpoint

Lecture 149 The usePlans Hook

Lecture 150 Rendering the Plans

Lecture 151 Defining a Session Endpoint

Lecture 152 Purchasing a Subscription From the Client

Lecture 153 Walking Through All User Flows

Lecture 154 Show the Plans Page Only if You Are Authenticated

Lecture 155 A Check Auth Middleware

Lecture 156 Creating a My Subscription Endpoint

Lecture 157 Redirect Users that Have Plans to the Manage Plans Page

Lecture 158 Manage Page Redirection

Lecture 159 Add Permission Logic to the Movie List Endpoint

Lecture 160 Redirect User to the Plan Page if They Don't Have a Subscription

Lecture 161 Premium Plan Permissions

Beginner Web Developers that want to dive in to React 18