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

Movie API Project: Cinemate

Cinemate Demo

Project Setup

Tailwind Introduction/063

TMDB API: Documentation / 064

UI Design (Tailwind & 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

Context & Reducers Project: Shopping Cart

Global State Management

Project Structure / 086

Context / 087

Reducer / 088

Methods / 089

Project Deployment / 090

Redux Project: Shopping Cart

Redux Introduction

Project Structure/091

Slice & Action / 092

Reducers: Add & Remove / 093

Redux Store State/094

Project Deployment/095

E-Commerce 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

Blog 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