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.
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 & Refactoring
The 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 Development
Get Instant Notification of New Courses on our
Telegram channel.
The 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 Projects
The 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.
To make the most of it, you are expected to Try to finish all the exercises in
Introduction to Maintainable React
The most valuable outcome from completing the course
How to get the most out of this course
Let’s align on some fundamentals
Introduction to basic ES6 features
ES6 – variable declarations: var, let and const
ES6 – play with objects and arrays
Basic JavaScript ES6 features
Introduction to the collection API (filter, map, reduce)
Collection API examples
Exercise – Try ES6 features in a sandbox
A minimal guide to Typescript
TypeScript 101
React in 5 minutes
Quiz – A quick JS and TS quiz
Exercise – Practice writing a simple component
Introduction to code smells
Introduction to code smells
Code smell – raw JS loop and collection APIs
Code smells – a real-world scenario
Quiz – A quick code smells quiz
Refactorings – the cure for code smells
Introduction of refactorings
Top ten common refactorings explained
Refactoring – Extract Function
Refactoring – Boolean Parameter
Refactoring – ES6 destructuring assignment
Quiz – A quick refactorings quiz
Refactoring – Extract Component
Refactoring – Move Component
Demonstration of common Refactoring usages
The best gift to developers – Tests
Benefits of having tests
How to write a test?
Basic usage of Jest
Mock and Stub in jest
Quiz – mock and stub
Test runner + test cases + code structure
Exercise – try it yourself
Test-Driven Development
What is Test-Driven Development
The first TDD journey – A project effort tracker
The first TDD journey – Refactoring a bit further
How to implement task tracking with TDD
TDD with React component – implement a simple Header Component
TDD with React Component – implement user interaction
Exercise – fix the failed test and refactoring
Quiz – Test-Driven Development
Clean code in React
Common Design Principles
Single Responsibility Principle
Composable Design
Layering application in React
Quiz – Design principles
Set up the project locally
Using create-react-app to create your application
Walk through the project structure
Additional resources
Project – Todo list
The project we’ll build
Feature – Add a Todo to a list
Refactoring – Extract sub-components
Feature – Complete an item when clicked
Refactoring – Custom Hooks for Managing states
Feature – Add summary information to Todo List
Refactoring – Reduce duplication and extract more sub-components
Feature – Search by keyword
Feature – Enhance accessibility
Exercise – It’s your turn
Project – Direct To Boot
The brief of Direct To Boot
Direct to boot – Feature introduction
Network-relate status statechart
Feature – the I’m here button – happy path
Introduce mirage.js
Feature – Error handling
Refactoring – extract hooks
Feature – I’m Here – retry
Use react-query to simplify the network statuses check
Fix all the tests with React-Query
Feature – Notify the store
Final refactoring
Quiz – mocking network
Extra readings for this chapter
Outro
Summarise what we’ve covered in the course
Thank and see you in the next section.
