Mastering Maintainable React

Empowering Test-Driven Development and Refactoring Techniques

What you'll learn

Apply principles of maintainable code to write React components and files that are easy to modify and understand over time.

Use best practices for organizing and structuring React applications to promote maintainability and scalability.

Identify and avoid common code patterns and anti-patterns in React that can lead to unmaintainable code.

Refactor existing React code to improve maintainability and reduce technical debt, using techniques such as code smells identification and refactoring patterns.

Appreciate the importance of maintainable code and its impact on the long-term success of a React application, and work towards continuous improvement.

Requirements

This Maintainable React course assumes basic knowledge of JavaScript concepts, such as variables, functions, arrays, objects.

A section in the course ensures that participants have the necessary knowledge to fully understand and engage with the more advanced content.

Description

Maintainable React is a comprehensive course designed to teach you the best practices for writing clean, maintainable code in React. Whether a beginner or an experienced developer, this course will give you the tools and knowledge to write high-quality, maintainable React code. Join me and take your React skills to the next level!A few highlights of the course are:Clean Code & RefactoringThe course covers refactoring, a technique for improving the design and structure of existing code. This is an essential skill for developers, allowing them to maintain and improve their code over time.Test-Driven DevelopmentThe course covers TDD, a software development approach that emphasizes writing automated tests before writing code. This is a highly sought-after skill in the industry and can help students improve the quality and maintainability of their code.Features From Real ProjectsThe course includes real-world project examples, which will help students understand how to apply the concepts they are learning in a practical setting and help them get more confident with the material.The primary benefit of this course is that the code smells and refactorings presented are derived from real-world React projects. Since these techniques address actual problems, participants can immediately apply what they learn to their projects and experience the benefits firsthand.The Maintainable React course is heavily focused on hands-on coding. In addition to watching video demonstrations, participants will be expected to complete exercises to solidify their understanding of the material. It is essential that exercises are constructed as the course progresses, and participants are encouraged to apply the techniques learned in their projects to experience the benefits firsthand.

Overview

Section 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

Section 2: Let's align on some fundamentals

Lecture 4 Introduction to basic ES6 features

Lecture 5 ES6 - variable declarations: var, let and const

Lecture 6 ES6 - play with objects and arrays

Lecture 7 Basic JavaScript ES6 features

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

Lecture 9 Collection API examples

Lecture 10 Exercise - Try ES6 features in a sandbox

Lecture 11 A minimal guide to Typescript

Lecture 12 TypeScript 101

Lecture 13 React in 5 minutes

Lecture 14 Exercise - Practice writing a simple component

Section 3: Introduction to code smells

Lecture 15 Introduction to code smells

Lecture 16 Code smell - raw JS loop and collection APIs

Lecture 17 Code smells - a real-world scenario

Section 4: Refactorings - the cure for code smells

Lecture 18 Introduction of refactorings

Lecture 19 Top ten common refactorings explained

Lecture 20 Refactoring - Extract Function

Lecture 21 Refactoring - Boolean Parameter

Lecture 22 Refactoring - ES6 destructuring assignment

Lecture 23 Refactoring - Extract Component

Lecture 24 Refactoring - Move Component

Lecture 25 Demonstration of common Refactoring usages

Section 5: The best gift to developers - Tests

Lecture 26 Benefits of having tests

Lecture 27 How to write a test?

Lecture 28 Basic usage of Jest

Lecture 29 Mock and Stub in jest

Lecture 30 Test runner + test cases + code structure

Lecture 31 Exercise - try it yourself

Section 6: Test-Driven Development

Lecture 32 What is Test-Driven Development

Lecture 33 The first TDD journey - A project effort tracker

Lecture 34 The first TDD journey - Refactoring a bit further

Lecture 35 How to implement task tracking with TDD

Lecture 36 TDD with React component - implement a simple Header Component

Lecture 37 TDD with React Component - implement user interaction

Lecture 38 Exercise - fix the failed test and refactoring

Section 7: Clean code in React

Lecture 39 Common Design Principles

Lecture 40 Single Responsibility Principle

Lecture 41 Composable Design

Lecture 42 Layering application in React

Section 8: Set up the project locally

Lecture 43 Using create-react-app to create your application

Lecture 44 Walk through the project structure

Lecture 45 Additional resources

Section 9: Project - Todo list

Lecture 46 The project we'll build

Lecture 47 Feature - Add a Todo to a list

Lecture 48 Refactoring - Extract sub-components

Lecture 49 Feature - Complete an item when clicked

Lecture 50 Refactoring - Custom Hooks for Managing states

Lecture 51 Feature - Add summary information to Todo List

Lecture 52 Refactoring - Reduce duplication and extract more sub-components

Lecture 53 Feature - Search by keyword

Lecture 54 Feature - Enhance accessibility

Lecture 55 Exercise - It's your turn

Section 10: Project - Direct To Boot

Lecture 56 The brief of Direct To Boot

Lecture 57 Direct to boot - Feature introduction

Lecture 58 Network-relate status statechart

Lecture 59 Feature - the I'm here button - happy path

Lecture 60 Introduce mirage.js

Lecture 61 Feature - Error handling

Lecture 62 Refactoring - extract hooks

Lecture 63 Feature - I'm Here - retry

Lecture 64 Use react-query to simplify the network statuses check

Lecture 65 Fix all the tests with React-Query

Lecture 66 Feature - Notify the store

Lecture 67 Final refactoring

Lecture 68 Extra readings for this chapter

Section 11: Outro

Lecture 69 Summarise what we've covered in the course

Lecture 70 Thank and see you in the next section.

Beginner React developers looking to improve their skills,React developers looking to work on larger applications and write maintainable code