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

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