React – Beginner to Advanced (+ Redux & Ecommerce App)

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: What is React?

Lecture 3: Companies that use React

Chapter 2: Environment Setup

Lecture 1: Environmeny Setup

Lecture 2: Vscode setup

Chapter 3: JavaScript Refresher

Lecture 1: JavaScript Refersher – Introduction

Lecture 2: Variables – var, let and const

Lecture 3: Arrow functions

Lecture 4: Ternary operator

Lecture 5: Map and Filter

Lecture 6: Spread and Rest operator

Lecture 7: Destructuring

Lecture 8: ES6 Classes – Part 1

Lecture 9: ES6 Classes – Part 2

Lecture 10: Modules – Import and Exports

Lecture 11: Modules – Default Exports

Chapter 4: React Basics

Lecture 1: Create a React app

Lecture 2: Files and Folder Overview

Lecture 3: Hello World App

Lecture 4: Files Clean Up

Lecture 5: Components

Lecture 6: Shortcut For Creating a Component

Lecture 7: Creating a Custom Component

Lecture 8: Create a Custom Component – 2

Lecture 9: JSX

Lecture 10: Outputting Dynamic Values

Chapter 5: Styling

Lecture 1: Styling in React

Lecture 2: Scoping CSS Files

Lecture 3: Styling Summary

Chapter 6: React Basics – Part 2

Lecture 1: Props

Lecture 2: Setting Default Props

Lecture 3: Props Destructuring

Lecture 4: Children Props

Lecture 5: Rendering a List

Lecture 6: Handling Events

Chapter 7: Project – Profile App (Challenge)

Lecture 1: Profile App – Intro

Lecture 2: Instructions

Lecture 3: Profile App 1 – Create React App

Lecture 4: Profile App 2 – Create Files And Folder

Lecture 5: Profile App 3 – Installing React Icons

Lecture 6: Profile App 4 – Global Styles

Lecture 7: Profile App 5 – Profile List Jsx And Css

Lecture 8: Profile App 6 – Profile JSX

Lecture 9: Profile App 6 – Profile Css

Lecture 10: Profile App 7 – Add React Icon Context

Lecture 11: Profile App 8 – Card Component

Lecture 12: Profile App 9 – Create Pofiles Props

Lecture 13: Profile App 10 – Mapping Through Profiles

Chapter 8: React Basics Part 3

Lecture 1: What Are Hooks

Lecture 2: What Is State

Lecture 3: Hooks Folder Setup

Lecture 4: Css Utility Classes Overview

Lecture 5: Usestate – Comparative Programming 1

Lecture 6: Usestate – Comparative Programming 2

Lecture 7: Virtual Dom Vs Real Dom

Lecture 8: Counter App JS – Comparative Programming 1

Lecture 9: 54 Counter App Usestate – Comparative Programming 2

Lecture 10: Counter App – State Updater Function

Lecture 11: Counter App Usestate – When Not To Use Usestate

Lecture 12: Usestate In Array 1

Lecture 13: Usestate In Array 2

Lecture 14: Usestate In Object

Chapter 9: Conditionals

Lecture 1: Conditionals Intro

Lecture 2: Conditionals – If Else Statement

Lecture 3: Conditionals – Logical And Operator

Lecture 4: Conditionals – Ternary Operator

Lecture 5: Conditionals – Adding Css Classes Conditionally

Lecture 6: Conditionals – Conditionals With Props

Chapter 10: General React Project Setup

Lecture 1: General project setup

Chapter 11: Project – User Profile App

Lecture 1: User Profile App – Demo

Lecture 2: User Profile App – JSX

Lecture 3: User Profile App – CSS

Lecture 4: User Profile App – Logic 1

Lecture 5: User Profile App – Logic 2

Chapter 12: Project – Animated Login App

Lecture 1: Animated Login Form – Demo

Lecture 2: Animated Login Form – JSX

Lecture 3: Animated Login Form – CSS

Lecture 4: Animated Login Form – Register Component

Lecture 5: Animated Login Form – Reset Component

Lecture 6: Animated Login Form – Logic

Lecture 7: Animated Login Form – Refactoring Logic

Chapter 13: useEffect Hook

Lecture 1: UseEffect Hook – Intro

Lecture 2: UseEffect Hook – Basics

Lecture 3: UseEffect Hook – Cleanup

Chapter 14: useEffect Project – Jokes Generator

Lecture 1: Jokes Generator – Demo

Lecture 2: Jokes Generator – JSX