Preface
- Do we need another book on this topic?
- Who is this book for?
- How the book is structured
- References
Chapter 0 — React Clean Code: Embracing Elegance in Code
- Introduction: Why Clean Code Matters in React
- What Does “Clean Code” Really Mean?
- Symptom 1: The Long File
- Symptom 2: Hard to Test
- Symptom 3: Hard to Change
- Symptom 4: Ignoring Fundamental Principles
- What Clean Code Looks Like
- React-Specific Cleanup Techniques
- Summary: The First Step Toward Clean React Code
- References
Chapter 1/2 – Navigating the Growth of Your React Application
- Frontend Projects Are More Complex Than They Look
- How to Split Your Project
- Summary and Key Takeaways
Chapter 1 – A Brief Introduction to Test-Driven Development
- What Is Test-Driven Development?
- Where Beginners Get Stuck
- Writing the First Test
- Adding One More Test
- Summary
Chapter 2 – Todo Application: Building Core Features with TDD
- Starting the Todo Application
- Rendering a Single Todo Item
- Rendering Multiple Todo Items
- Using a Better Data Structure
- Adding a New Todo Item
- Improvements and Final Version
- A Note on File Organization
- Summary
Chapter 3 – Refactor: Separation of Concerns
- What Is Separation of Concerns?
- Why Separation of Concerns Matters
- Step 1: Extract a Component
- Step 2: Update the Todo Component
- Why This Refactoring Works
- Summary
Chapter 4 – Adding a New Feature: Mark Item As Done
- Write the Test First
- Tasking the Feature
- Step 1: Update the Type
- Step 2: Handle the Click
- Step 3: Filter Completed Items
- Recap: What We Just Achieved
- Summary
Chapter 5 – Refactor: Split Logic Into a Custom Hook
- Why Refactor Again?
- Step 1: Rename the Component
- Step 2: Extract a List Component
- Step 3: Simplify
TodoInputand Moveuuid - Step 4: Introduce a Custom Hook
- Why This Matters
- What We’ve Learned
- Summary
- Wrapping Up
Chapter 6 – Composition Foundation
- The Children / Slots Pattern
- Why Not Just Use Props?
- Adding More Slots
- What We’ve Learned
- Summary
Chapter 7 - Refactor - AddressContainer
- Why Render Props?
- Using Render Prop to Decouple Logic and View
- Rendering With Custom Logic
- Summary
- What’s Next
Chapter 8 - Composition Example 1: The Avatar Component
- The Tooltip Prop
- Breaking the Dependency Chain
- Summary
Chapter 9 - Composition Example 2 - InlineEdit
- The InlineEdit component
- The validate prop
- Option 1: Add an
invalidViewprop - Option 2: Extend
editViewwith error state - Summary
Chapter 10 - The Refactor of StackView Component
- The StackView Component
- Tests
- Optional Header and Footer Component
- New Requirement - the User Profile
- Break It Down and Reassemble It Back
- Summary
Chapter 11 – Business Logic Leaking
- Where Should Business Logic Go?
- React is The View
- What is Business Logic?
- Signs of Logic Leakage
- A Word About Habits
- Summary
Chapter 12 – Fix the Leakage: Data Modeling
- The Address Input Example
- Current Implementation
- Refactor Step 1: Separation of Concerns
- Refactor Step 2: Custom Hook
- Step 3: Model the Data
- Why It Matters
- Summary
Chapter 13 - Project Simulation: Direct To Boot
- Start with a Test
- A Disabled Button by Default
- Avoiding Fragile Mocks
- Enable Button When Order is Ready
- Polling Until Ready
- Refactor with Custom Hook
- Summary
Chapter 14 – Feature: Notify the Store
- Refactor: Treat Test Code as First-Class Code
- Clean Up the Component Logic
- Extracting a Custom Hook
- Summary
Chapter 15 - Error Handling
- Why This Needs a New State
- Common Mistake: Overloading Booleans
- Updating the User Message
- Refactoring: Breaking Up Conditional UI
- Section Abstraction
- Summary
Chapter 16 - What You’ve Learned
- What’s Next?
- What You’ve Learned
- Stay Connected
Appendix 10 Refactorings to Boost your Clean Code Efficiency
- The most common 10 refactorings
- Code smells
- Common Refactorings
- The Problem - ROT13
- The implementation
- Summary