React with Test Driven Development

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: Methodology

Lecture 3: Development Tools

Lecture 4: Create Project

Lecture 5: Project Source Code

Lecture 6: Resources

Chapter 2: Sign Up

Lecture 1: First Component

Lecture 2: Layout – Sign Up Form

Lecture 3: Form Interactions

Lecture 4: Api Request – Sign Up

Lecture 5: Mock Service Worker Update

Lecture 6: Mocking & Mock Service Worker (MSW)

Lecture 7: Proxy

Lecture 8: Styling

Lecture 9: Progress Indicator

Lecture 10: Layout – Sign Up Success

Lecture 11: Refactor – Test Lifecycle & Async Await

Chapter 3: Validation

Lecture 1: Displaying Validation Errors

Lecture 2: Enable Button After Validation Error

Lecture 3: Mock Service Worker – Override Handler

Lecture 4: Component – Input

Lecture 5: Styling Input

Lecture 6: Displaying Errors for Remaining Inputs

Lecture 7: Client-side Validation

Lecture 8: Hiding Errors

Chapter 4: Internationalization – i18n

Lecture 1: Internationalization – i18n

Lecture 2: Language Selection

Lecture 3: Component – LanguageSelector

Lecture 4: Validation Translation

Lecture 5: Accept Language Header in Api Request

Lecture 6: Refactor – Api Request Module

Chapter 5: Routing

Lecture 1: Client-side Routing

Lecture 2: Layout – NavBar

Lecture 3: Styling NavBar

Lecture 4: React Router Version Warning

Lecture 5: React Router

Lecture 6: Component Lifecycle

Lecture 7: Route for AccountActivationPage

Lecture 8: Api Request – Account Activation

Lecture 9: Dependency List of useEffect

Lecture 10: Progress Indicator – Account Activation

Lecture 11: Component – Alert & Spinner

Lecture 12: Async/Await in useEffect

Lecture 13: Higher Order Component – HoC

Lecture 14: Hooks

Chapter 6: User List and User Page

Lecture 1: Component – UserList

Lecture 2: Pagination in Test Module

Lecture 3: Next & Previous Page

Lecture 4: Link to UserPage

Lecture 5: Component – UserListItem

Lecture 6: Key in Loop

Lecture 7: Translation

Lecture 8: Progress Indicator – Load User List

Lecture 9: Layout & Api Request for UserPage

Lecture 10: Progress Indicator – Load User

Lecture 11: Layout – User Not Found

Chapter 7: Login

Lecture 1: Layout – LoginPage

Lecture 2: Form Interactions

Lecture 3: Api Request – Login

Lecture 4: Authentication Error

Lecture 5: Translation

Lecture 6: Routing After Successful Authentication

Lecture 7: Component – ButtonWithProgress

Chapter 8: Client State Management

Lecture 1: Layout – NavBar After Login – Lifting State Up

Lecture 2: Component – NavBar

Lecture 3: Prop Drilling

Lecture 4: Context

Lecture 5: Refactor – Context & Test Setup

Lecture 6: Redux

Lecture 7: Use Redux in NavBar

Lecture 8: Use Redux in LoginPage

Lecture 9: Refactor – Redux

Lecture 10: Storing State in LocalStorage

Lecture 11: LocalStorage Abstraction

Lecture 12: LocalStorage Encryption

Lecture 13: Storing Credentials

Chapter 9: Authenticated Requests

Lecture 1: Layout – User Update

Lecture 2: Api Request – User Update

Lecture 3: Update Success

Lecture 4: Cancel Update

Lecture 5: Fix – Reload User After Navigation

Lecture 6: Authentication Aware UserList

Lecture 7: Logout

Lecture 8: Layout – User Delete Button

Lecture 9: Component – Modal

Lecture 10: User Delete Cancel

Lecture 11: User Delete Confirm

Lecture 12: Global State After Deleting User

Lecture 13: Redux – Action Creator