React Anti-Patterns : Build Efficient and Maintainable React Applications with Test-Driven Development and Refactoring / Juntao Qiu.

Format:

Book

Author/Creator:

Qiu, Juntao, author.

Language:

English

Subjects (All):

Web applications--Development.

Web applications.

Application software--Development.

Application software.

Physical Description:

1 online resource (324 pages)

Edition:

First edition.

Place of Publication:

Birmingham, England : Packt Publishing Ltd., 2024.

Biography/History:

Qiu Juntao: Juntao is an accomplished software developer with over 15 years of industry experience dedicated to helping others write better code. With a strong passion for crafting maintainable and high-quality code, he has become a trusted resource in the industry. As an author, Juntao has shared his expertise through influential books like "Test-Driven Development with React"(2021) and "Maintainable React"(2022). With a genuine desire to empower developers and enable them to reach their full potential, he strives to impact the industry positively. By leveraging his extensive experience and passion for writing better code, he supports individuals in honing their skills and achieving success in their software development endeavours.

Summary:

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.

Contents:

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

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

Chapter 3: Organizing Your React Application

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

Chapter 4: Designing Your React Components

Exploring the single responsibility principle

Don't repeat yourself

Using composition

Combining component design principles

Part 2: Embracing Testing Techniques.

Chapter 5: Testing in React

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

Chapter 6: Exploring Common Refactoring Techniques

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

Chapter 7: Introducing Test-Driven Development with React

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

Part 3: Unveiling Business Logic and Design Patterns

Chapter 8: Exploring Data Management in React

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

Chapter 9: Applying Design Principles in React

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

Chapter 10: Diving Deep into Composition Patterns

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

Part 4: Engaging in Practical Implementation

Chapter 11: Introducing Layered Architecture in React

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

Chapter 12: Implementing an End-To-End Project

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

Chapter 13: Recapping Anti-Pattern Principles

Revisiting common anti-patterns

Long props list/big component

Business leakage

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

Recapping techniques and practices

Writing user acceptance tests

TDD

Refactoring and common code smells

Additional resources

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

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

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

-jsdom

learning-the-end-to-end-tests

introducing-cypress

intercept-the-network-request

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

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.

Notes:

Includes index.

Description based on print version record.

ISBN:

9781805123620

1805123629

OCLC:

1414110048