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

Inhaltsverzeichnis des Buches

• 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
• Chapter 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
• Chapter 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
• Chapter 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
• Chapter 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
• Chapter 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
• Chapter 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
• Chapter 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
• Chapter 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
• Chapter 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
• Chapter 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
• Chapter 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
• Chapter 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
• Chapter 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