React Anti-Patterns : Build Efficient and Maintainable React Applications with Test-Driven Development and Refactoring

React Anti-Patterns Build Efficient and Maintainable React Applications with Test-Driven Development and Refactoring

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,...

Descripción completa

Detalles Bibliográficos
Otros Autores: Qiu, Juntao, author (author)
Formato: Libro electrónico
Idioma:Inglés
Publicado: Birmingham, England : Packt Publishing Ltd 2024.
Edición:First edition
Materias:
Web applications > Development.
Application software > Development.
Ver en Biblioteca Universitat Ramon Llull:https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009792869806719
Tabla de Contenidos:
  • 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.

Ejemplares similares