React Anti-Patterns: Build efficient and maintainable React applications with test-driven development and refactoring 9781805123972, 9781803233109, 9781803231341

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