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 Purchase of the print or Kindle book includes a free PDF eBook 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 Introducing React Anti-Patterns Understanding React Essentials Organizing Your React Application Designing your React Components Testing in React Exploring Common Refactoring Techniques Introducing Test-Driven Development with React Exploring Data Management in React Applying Design Principles in React Diving Deep into Composition Patterns Introducing Layered Architecture in React Implementing an End-To-End Project Recapping Anti-Pattern Principles

lgrsnf/react-anti-patterns-maintainable-applications.pdf

zlib/no-category/Juntao Qiu/React Anti-Patterns: Build efficient and maintainable React applications with test-driven development and refactoring_28534582.pdf

United Kingdom and Ireland, United Kingdom

Packt Publishing, Birmingham, UK, 2024

Cover
Title Page
Copyright and Credit
Dedicated
Contributors
Table of Contents
Preface
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
SRP
Dependency Inversion Principle
DRY
ACL
Using composition
Recapping techniques and practices
Writing user acceptance tests
TDD
Refactoring and common code smells
Additional resources
Summary
Index
Other Book You May Enjoy
what-will-be-coverd
technical-requirements
understanding-why-build-ui-is-difficult
understanding-the-state-management
exploring-the-unhappy-paths
errors-in-another-component
downstream-systems-are-down
unexpected-user-behavior
introducing-our-approach
X5e903e8c2c5f4e10df439b61bb9d4f414c942ec
OLE_LINK3
X40f74e6f0d0f69d9b64a71918d2ea63f898c2bc
Xdeb99c6863078c95d4d2e459d016fcf3e6f63aa
summary-1
react-essentials
understanding-components-in-react
creating-reusable-components
thinking-in-components
manage-states-in-react
OLE_LINK1
the-rendering-process
common-hooks-in-react
usestate
useeffect
usecallback
the-react-context-api
summary
front-end-applications-are-complex
open-up-a-feature-folder
common-structures-in-react-applications
feature-based-strucutre
benefits
drawbacks
component-based-structure
benefits-1
drawbacks-1
atomic-design-structure
benefits-2
drawbacks-2
mvvm-structure
benefits-3
drawbacks-3
keep-orgnaising-your-project-structure
first-attempt
one-more-layer
inside-a-component
X8f4764dbed6e7346a7182f0988737a84cf4db49
OLE_LINK1
naming-files-with-kebab-case
the-sturcture-we-have-now
OLE_LINK2
summary
single-responsibility-principle
dont-repeat-yourself
using-composition
exploring-a-more-complicated-case
summary
technical-requirements
understanding-why-we-need-tests
learning-different-types-of-tests
testing-individual-units-with-jest
writing-your-first-test
note---behavior-driven-development
grouping-tests
testing-react-component
learning-the-integrationg-tests
note---jsdom
learning-the-end-to-end-tests
introducing-cypress
intercept-the-network-request
summary
technical-requirements
understanding-refactoring
the-common-mistakes
adding-tests-before-you-make-any-changes
renaming-variable
extracting-variable
replacing-loop-with-pipeline
extracting-function
introducing-parameter-object
decomposing-conditional
moving-function
summary
technical-requirements
a-brief-history
the-red-green-refactor-loop
X4c5128f4195e94221b4f32ca5d6853d3b95e060
unit-test-driven-development
acceptance-test-driven-development-atdd
behavior-driven-development-bdd
tdd-in-react-a-user-centric-approach
introducing-the-core-step-of-tdd-tasking
the-importance-of-tasking
how-to-do-tasking
X48ff3dd176aac4090ecb9adef68b1ecd67693a9
features-overview
breaking-down-the-requirements
the-bottom-up-style
the-top-down-style
implementing-the-application-headline
implementing-the-menu-list
making-the-shoppingcart-to-work
adding-item-to-shopping-cart
refactoring-the-code
summary
technical-requirements
understanding-businesss-logic-leaks
introducing-anti-corruption-layer
using-fallback-or-default-value
exploring-the-prop-drilling-issue
using-context-to-resolve-the-drilling
summary
technical-requirements
Xde367f09bf52b3a1702b822defd45444f80877c
the-evolution-of-title
identifing-the-core-functionality
break-down-the-avatar-component
embracing-dependency-inversion-principle
analytics-button
understainding-cqrs-in-react
X2544f715b0c1908ad58f26e6850c8f857ddf5c6
using-the-reducer-function
summary
technical-requirements
X52dd79e4237ffa2212b50762a2f370a76b2bbe2
briefing-on-higher-order-functions
introducing-higher-order-components
Xbddcf4339de1da669fbfd0e14d7a521ba07cead
exploring-react-hooks
unveiling-remote-data-fetching
refactoring-for-elegance-and-reusability
implementing-a-dropdown-list
implementing-keyboard-navigation
diving-deeper-with-additional-states
X1bdc4029b2d9bbe26e6ddb4f774cde8d4600680
introducing-headless-component-pattern
advantages-of-headless-component
drawbacks-of-headless-component
libraries-and-further-exploration
summary
technical-requirements
single-component-application
OLE_LINK1
multiple-component-application
state-management-with-hooks
business-models-emerged
layered-frontend-application
enhancing-code-oven
X5e43f9dcdc6635489a9e5e7a5c22404295bbe27
transitioning-to-a-class-based-model
OLE_LINK2
the-benefits-of-a-class-based-model
implementing-the-shoppingcart-component
applying-discounts-to-items
OLE_LINK3
exploring-the-strategy-pattern
delving-into-layered-architecture
advantages-of-layered-architecture
summary
technical-requirements
getting-a-openweathermap-api-key
preparing-the-project-codebase
unveiling-the-requirements
crafting-our-initial-acceptance-test
implementing-city-search-feature
introducing-openweathermap-api
stubbing-the-search-results
enhancing-the-search-result-list
implementing-anti-corruption-layer
implementing-add-to-favorite
modeling-the-weather
refactoring-the-current-implementation
Xffdd06bd74512476f5f07e92bd64ef8a288075b
refactoring-the-weather-list
Xed3cedd6a6d1db9c7b228444bda33a95d95c692
summary
OLE_LINK1
common-anti-patterns
props-drilling
long-props-list-big-component
business-leakage
complicated-logic-in-views
lack-of-tests-at-each-level
code-duplications
X6a3cba3f89ae088f1d19a5c098667a1c42995f6
higher-order-components-hocs
render-props
headless-components
data-modelling
layered-architecture
OLE_LINK2
context-as-interface
foundational-principles
single-responsibility-principle-srp
dependency-inversion-principle
dont-repeat-yourself-dry
anti-corruption-layer-acl
using-composition
techniques
writing-user-acceptance-tests-uat
test-driven-development-tdd
refactorings-common-code-smells
looking-forward
books
X48caa7cec0ad1bc237a68ca19de660accffdbe1
Xa5446e76fb69dce3639c37e3b293e89b6360557
X56bf3a656309a192b94eb11de87619c3660521d
X49b567575723728f9e96cb429606fc54dfd416d
summary

2024-05-10