React Anti-Patterns: Build efficient and maintainable React applications with test-driven development and refactoring

✍ Scribed by Juntao Qiu

• Publisher: Packt Publishing Pvt Ltd
• Year: 2023
• Tongue: English
• Leaves: 397
• Category: Library

✦ Synopsis

Master efficient coding practices, address common anti-patterns, and construct scalable React apps with practical insights and techniques

Key Features
Identify and address React anti-patterns while learning testing strategies and refactoring techniques for efficient codebases
Explore data modelling, design patterns, and state management in React
Enhance code quality, maintainability, and scalability in React applications

Book Description
Take your React development skills to the next level by examining common anti-patterns with expert insights and practical solutions, to refine your codebases into sophisticated and scalable creations. Through this easy-to-follow guide, React Anti-Patterns serves as a roadmap to elevating the efficiency and maintainability of your React projects.

You’ll begin by familiarizing yourself with the essential aspects of React before exploring strategies for structuring React applications and creating well-organized, modular, and easy-to-maintain codebases. From identifying and addressing common anti-patterns using refactoring techniques to harnessing the power of test-driven development (TDD), you’ll learn about the tools and techniques necessary to create reliable and robust tests. As you advance, you’ll get to grips with business logic and design patterns that offer solutions to prevalent challenges faced in React development. The book also offers insights into using composition patterns, such as code splitting and multiple entry points, to enhance the flexibility and modularity of your React applications, guiding you through end-to-end project implementation.

By the end of this React book, you’ll be able to overcome common challenges and pitfalls to transform your React projects into elegant, efficient, and maintainable codebases.

What you will learn
Formulate comprehensive testing strategies and leverage testing framework capabilities
Implement TDD practices to drive the development process and elevate code quality, especially in extensive React projects
Use design patterns effectively to create scalable and reusable React components
Apply established software design principles to craft resilient applications within React
Achieve modularity and loose coupling in React codebases by mastering the separation of concerns
Ensure clean code by adhering to software design best practices in React development

Who this book is for
This book is for React developers of all skill levels who share a passion for crafting efficient and maintainable codebases. Whether you're a beginner who wants to establish a solid foundation or an experienced developer looking to refine your skills, this guide offers invaluable insights, practical solutions, and real-world examples to enable you to excel at building scalable, elegant, and high-performing React applications.

✦ Table of Contents

React Anti-Patterns
Contributors
About the author
About the reviewers
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Conventions used
Get in touch
Share Your Thoughts
Download a free PDF copy of this book
Part 1:Introducing the Fundamentals
1
Introducing React Anti-Patterns
Technical requirements
Understanding the difficulty of building UIs
Understanding the state management
Exploring “unhappy paths”
Errors thrown from other components
Learning the unexpected user behavior
Exploring common anti-patterns in React
Props drilling
In-component data transformation
Complicated logic in views
Lack of tests
Duplicated code
Long component with too much responsibility
Unveiling our approach to demolishing anti-patterns
Summary
2
Understanding React Essentials
Technical requirements
Understanding static components in React
Creating components with props
Breaking down UIs into components
Managing internal state in React
Understanding the rendering process
Exploring common React Hooks
useState
useEffect
useCallback
The React Context API
Summary
3
Organizing Your React Application
Technical requirements
Understanding the problem of a less-structured project
Understanding the complications of frontend applications
Exploring common structures in React applications
Feature-based structure
Component-based structure
Atomic design structure
The MVVM structure
Keeping your project structure organized
Implementing the initial structure
Adding an extra layer to remove duplicates
Naming files
Exploring a more customized structure
Summary
4
Designing Your React Components
Technical requirements
Exploring the single responsibility principle
Don’t repeat yourself
Using composition
Combining component design principles
Summary
Part 2: Embracing Testing Techniques
5
Testing in React
Technical requirements
Understanding why we need tests
Learning about different types of tests
Testing individual units with Jest
Writing your first test
Grouping tests
Testing React components
Learning about integration tests
Learning about E2E tests using Cypress
Installing Cypress
Running our first E2E test
Intercepting the network request
Summary
6
Exploring Common Refactoring Techniques
Technical requirements
Understanding refactoring
The common mistakes of refactoring
Adding tests before refactoring
Using Rename Variable
Using Extract Variable
Using Replace Loop with Pipeline
Using Extract Function
Using Introduce Parameter Object
Using Decompose Conditional
Using Move Function
Summary
7
Introducing Test-Driven Development with React
Technical requirements
Understanding TDD
Different styles of TDD
Focusing on user value
Introducing tasking
Introducing the online pizza store application
Breaking down the application requirements
Implementing the application headline
Implementing the menu list
Creating the shopping cart
Adding items to the shopping cart
Refactoring the code
Summary
Part 3: Unveiling Business Logic and Design Patterns
8
Exploring Data Management in React
Technical requirements
Understanding business logic leaks
Introducing the ACL
Introducing a typical usage
Using the fallback or default value
Exploring the prop drilling issue
Using the Context API to resolve prop drilling
Summary
9
Applying Design Principles in React
Technical requirements
Revisiting the Single Responsibility Principle
Exploring the render props pattern
Using composition to apply the SRP
Embracing the Dependency Inversion Principle
Understanding how the DIP works
Applying the DIP in an analytics button
Understanding Command and Query Responsibility Segregation in React
Introducing useReducer
Using a reducer function in a context
Summary
10
Diving Deep into Composition Patterns
Technical requirements
Understanding composition through higher-order components
Reviewing higher-order functions
Introducing HOCs
Implementing an ExpandablePanel component
Exploring React Hooks
Unveiling remote data fetching
Refactoring for elegance and reusability
Developing a drop-down list component
Implementing keyboard navigation
Maintaining simplicity in the Dropdown component
Introducing the Headless Component pattern
The advantages and drawbacks of Headless Component pattern
Libraries and further learnings
Summary
Part 4: Engaging in Practical Implementation
11
Introducing Layered Architecture in React
Technical requirements
Understanding the evolution of a React application
Single-component applications
Multiple-component applications
State management with Hooks
Extracting business models
Layered frontend application
Enhancing the Code Oven application
Refactoring the MenuList through a custom Hook
Transitioning to a class-based model
Implementing the ShoppingCart component
Applying discounts to Items
Exploring the Strategy pattern
Delving into layered architecture
The layered structure of the application
Advantages of layered architecture
Summary
12
Implementing an End-To-End Project
Technical requirements
Getting the OpenWeatherMap API key
Preparing the project’s code base
Reviewing the requirements for the weather application
Crafting our initial acceptance test
Implementing a City Search feature
Introducing the OpenWeatherMap API
Stubbing the search results
Enhancing the search result list
Implementing an ACL
Implementing an Add to Favorite feature
Modeling the weather
Refactoring the current implementation
Enabling multiple cities in the favorite list
Refactoring the weather list
Fetching previous weather data when the application relaunches
Summary
13
Recapping Anti-Pattern Principles
Revisiting common anti-patterns
Props drilling
Long props list/big component
Business leakage
Complicated logic in views
Lack of tests (at each level)
Code duplications
Skimming through design patterns
Higher-order components
Render props
Headless components
Data modeling
Layered architecture
Context as an interface
Revisiting foundational design principles
Single Responsibility Principle
Dependency Inversion Principle
Don't Repeat Yourself
Anti-Corruption Layers
Using composition
Recapping techniques and practices
Writing user acceptance tests
Test-Driven Development
Refactoring and common code smells
Additional resources
Summary
Index
Why subscribe?
Other Book You May Enjoy
Packt is searching for authors like you
Share Your Thoughts
Download a free PDF copy of this book