Mastering Maintainable React

Course Curriculum

Chapter 1: To make the most of it, you are expected to Try to finish all the exercises in

Lecture 1: Introduction to Maintainable React

Lecture 2: The most valuable outcome from completing the course

Lecture 3: How to get the most out of this course

Chapter 2: Let's align on some fundamentals

Lecture 1: Introduction to basic ES6 features

Lecture 2: ES6 – variable declarations: var, let and const

Lecture 3: ES6 – play with objects and arrays

Lecture 4: Basic JavaScript ES6 features

Lecture 5: Introduction to the collection API (filter, map, reduce)

Lecture 6: Collection API examples

Lecture 7: Exercise – Try ES6 features in a sandbox

Lecture 8: A minimal guide to Typescript

Lecture 9: TypeScript 101

Lecture 10: React in 5 minutes

Lecture 11: Exercise – Practice writing a simple component

Chapter 3: Introduction to code smells

Lecture 1: Introduction to code smells

Lecture 2: Code smell – raw JS loop and collection APIs

Lecture 3: Code smells – a real-world scenario

Chapter 4: Refactorings – the cure for code smells

Lecture 1: Introduction of refactorings

Lecture 2: Top ten common refactorings explained

Lecture 3: Refactoring – Extract Function

Lecture 4: Refactoring – Boolean Parameter

Lecture 5: Refactoring – ES6 destructuring assignment

Lecture 6: Refactoring – Extract Component

Lecture 7: Refactoring – Move Component

Lecture 8: Demonstration of common Refactoring usages

Chapter 5: The best gift to developers – Tests

Lecture 1: Benefits of having tests

Lecture 2: How to write a test?

Lecture 3: Basic usage of Jest

Lecture 4: Mock and Stub in jest

Lecture 5: Test runner + test cases + code structure

Lecture 6: Exercise – try it yourself

Chapter 6: Test-Driven Development

Lecture 1: What is Test-Driven Development

Lecture 2: The first TDD journey – A project effort tracker

Lecture 3: The first TDD journey – Refactoring a bit further

Lecture 4: How to implement task tracking with TDD

Lecture 5: TDD with React component – implement a simple Header Component

Lecture 6: TDD with React Component – implement user interaction

Lecture 7: Exercise – fix the failed test and refactoring

Chapter 7: Clean code in React

Lecture 1: Common Design Principles

Lecture 2: Single Responsibility Principle

Lecture 3: Composable Design

Lecture 4: Layering application in React

Chapter 8: Set up the project locally

Lecture 1: Using create-react-app to create your application

Lecture 2: Walk through the project structure

Lecture 3: Additional resources

Chapter 9: Project – Todo list

Lecture 1: The project we'll build

Lecture 2: Feature – Add a Todo to a list

Lecture 3: Refactoring – Extract sub-components

Lecture 4: Feature – Complete an item when clicked

Lecture 5: Refactoring – Custom Hooks for Managing states

Lecture 6: Feature – Add summary information to Todo List

Lecture 7: Refactoring – Reduce duplication and extract more sub-components

Lecture 8: Feature – Search by keyword

Lecture 9: Feature – Enhance accessibility

Lecture 10: Exercise – It's your turn

Chapter 10: Project – Direct To Boot

Lecture 1: The brief of Direct To Boot

Lecture 2: Direct to boot – Feature introduction

Lecture 3: Network-relate status statechart

Lecture 4: Feature – the I'm here button – happy path

Lecture 5: Introduce mirage.js

Lecture 6: Feature – Error handling

Lecture 7: Refactoring – extract hooks

Lecture 8: Feature – I'm Here – retry

Lecture 9: Use react-query to simplify the network statuses check

Lecture 10: Fix all the tests with React-Query

Lecture 11: Feature – Notify the store

Lecture 12: Final refactoring

Lecture 13: Extra readings for this chapter

Chapter 11: Outro

Lecture 1: Summarise what we've covered in the course

Lecture 2: Thank and see you in the next section.