Preview React JS Masterclass: Zero To Job Ready With Projects

Back

Course Introduction & Resources

Course Introduction

Resources [Important]

React Basics & Setup

React Introduction

Environment Setup

Create React App

React Behind The Scene

React Boilerplate / 005

Components: Class & Function Based / 006

JSX: In-depth Introduction / 007

Practice: Basic Template Structure / 008

States and useState

Why We Need States? / 009

State Introduction: useState / 010

useState: Multiple Updates / 011

useState: Array State Value / 012

useState: Array setState Value / 013

Conditional Templates / 014

Quick Hook Advice / 015

Components & Props

Multiple Components & Fragments / 016

Props: In-depth Introduction / 017

Props: Children / 018

Prop Drilling / 019

Styling React Application

Global Level Styling / 020

Component Level Styling / 021

Inline Level Styling / 022

Dynamic Level Styling / 023

Module Level Styling / 024

User Input, Events & useRef

Forms & Input / 025

onChange Event / 026

Controlled Inputs / 027

onSubmit Event / 028

Add New Task / 029

useRef Hook / 030

useEffects, useCallback and Custom Hooks

JSON Server / 031

useEffect Hook / 032

React StrictMode

List Output / 035

onClick Event / 036

useCallback Hook / 037

Custom Hook (useFetch) / 038

Loading State / 039

Handling Errors (try/catch) / 040

Aborting Fetch Request / 041

Infinite Loops / 042

Project: TaskMate

TaskMate Demo

Project Structure

Components / 045

State: tasklist & setTasklist / 046

Function: Edit & Delete / 047

Warning: Undefined Value / 048

Update Button / 049

Local Storage: Store All Tasks / 050

Theme: Change Background / 051

Project Deployment

React Router

React Router Introduction / 053

React Router Setup / 054

Project Structure / 055

Navigation / 056

Route Parameters / 057

No Route Found / 058

Nested Routes / 059

Project Restructuring / 060

Tailwind CSS Crash Course

Introduction & Demo

Common Properties

Hover, Focus, and Other States

Responsive Design

Dark Mode

Custom Configuration / 206

Project Demo / 207

Header & Hero Section/ 208

Footer / 209

Responsive Screen & Component Tools / 210

Project: Cinemate

Cinemate Demo

Project Setup

Tailwind Introduction / 063

TMDB API: Documentation / 064

UI Design (Tailwing & Flowbite) / 065

Navigation Structure

Dark Mode Integration / 067

Movie List Structure / 068

API Fetch: Movie List / 069

Custom Hook: useFetch / 070

API Fetch: Movie Search / 071

Tailwind CSS Customization / 072

Page Not Found / 073

Individual Movie Information / 074

Scroll Restoration: Scroll To Top / 075

Dynamic Page Title / 076

Style Update / 077

Project Deployment / 078

Development Branch On Git & Github

Solved: Netlify Error / 079

Assignment: Shopping Cart

Assignment Statement & Demo / 080

Solution: Project Setup

Solution: Components / 082

Solution: Pages / 083

Assignment Deployment

Project: Shopping Cart With Context & Reducers

Global State Management

Project Structure / 086

Context / 087

Reducer / 088

Methods / 089

Project Deployment / 090

Project: Shopping Cart With Redux Toolkit

Redux Introduction

Project Structure / 091

Slice & Action / 092

Reducers: Add & Remove / 093

Redux Store State / 094

Project Deployment / 095

Project: Codebook

Codebook Demo / 097

Installations / 098

Project Structure / 099

Header Component - I / 100

Header Component - II / 101

Home Page / 102

Products Page / 103

API: Product List / 104

Rating Component / 105

Individual Product Component / 106

Dark Mode / 107

ScrollToTop Component / 108

Product Search / 109

Dynamic Title / 110

Filter: Context & Reducers / 111

Filter: Initial Product List / 112

Filter: Properties / 113

Clear Filter / 114

Dropdown Option / 115

User Account & Cart

React-Toastify / 119

API: Login/Register End Point / 120

Session Storage / 121

Toggle Dropdown (Hide) / 122

Cart Interface / 123

Cart: Context & Reducers / 124

Cart: Provider / 125

Add To Cart / 126

Condition Check: Already In Cart / 127

Out Of Stock Products / 128

Protected Routes / 129

Checkout Modal / 130

Undefined Value Warning / 131

Order Submit Function / 132

Order Page / 133

Dashboard: Condition 1 / 134

Dashboard: Condition 2 / 135

Auth Service: API End Points / 136

Data Service: API End Points / 137

Product Service: API End Points / 138

Page Not Found / 139

Dynamic Page Title / 140

Error Handling / 141

ENV / 142

Frontend Deployment / 143

Backend Deployment / 144

Update Environment Variables / 145

Solved: Netlify Errors / 147

Assignment: Word Counter

Statement & Demo / 157

Solution: WordCount / 158

React Testing Library & Jest

Testing Introduction / 148

React Testing Library & Jest / 149

Project Setup

Testing Structure / 151

Test: Component Rendering / 152

Test: Fire Events & User Events / 153

Queries, Type, Expect & More / 154

Test: API Async Loading / 155

Test: Page Component Wrapper / 156

Firebase Crash Course

Firebase Introduction

Webpack Setup / 252

Firebase Setup / 253

Firebase Connection / 254

Fetching Documents - I / 255

Fetching Documents- II / 256

Adding & Deleting Documents / 257

Snapshots / 258

Firestore Queries / 259

Ordering Data / 260

Updating Documents / 261

Fetching Individual Document / 262

Authentication - I / 263

Authentication - II / 264

Project: WriteNode

WriteNode Demo / 159

Project Structure / 160

Project Styling / 161

Homepage / 162

Firebase Setup / 163

Firebase Configuration / 164

Conditional Auth Header / 165

Create Blog Post / 167

Error: Object Fetch / 168

Toggle Update / 169

Dynamic Page Title

React Loading Skeleton

Project Deployment / 172

Bonus

Preview - React JS Masterclass: Zero To Job Ready With Projects