Learning React Modern Patterns for Developing React Apps (Eve Porcello, Alex Banks)（Z-Library）

# Learning React: Modern Patterns for Developing React Apps ## 【One-Line Pitch】 A hands-on, practical guide for web developers who know JavaScript, CSS, and HTML but are new to React—teaching modern patterns, functional programming concepts, and component-based architecture through real examples like building a recipes app and a color management tool. ## 【Book Arc】 - **Opening (~0%–6%)**: Introduces the book's scope and prerequisites, then dives into essential JavaScript fundamentals—ES6 features like arrow functions, destructuring, object literal enhancement, and async/await—that form the foundation for React development. - **Early (~6%–19%)**: Covers functional programming concepts in JavaScript, including array methods (filter, map, reduce), function composition, and immutability, then transitions into React's core model with `React.createElement` and understanding how React elements are structured. - **Early (~19%–28%)**: Explores JSX syntax in depth—how expressions work inside curly braces, mapping arrays to JSX elements, and building a complete recipes application with data-driven components. - **Early (~28%–34%)**: Addresses tooling and modularity, explaining webpack's role in bundling, code splitting, minification, and hot module replacement, plus how to structure components across separate files using imports and exports. - **Middle (~34%–47%)**: Delves into state management with hooks—`useState` for component state, controlled vs. uncontrolled components, `useEffect` for side effects, and the nuances of dependency arrays and render cycles. - **Middle (~47%–end)**: Covers advanced patterns including context for shared state, custom hooks, performance optimization with `useMemo` and `useCallback`, and the React Profiler for measuring component performance. ## 【Key Takeaways】 - **JavaScript ES6+ is the prerequisite foundation** (Opening): Arrow functions, destructuring, and object literal enhancement appear throughout React code—master these before touching components. The book assumes you know JS but not React, so this refresher is essential. - **Functional programming principles shape React** (Early): Array methods like `filter`, `map`, and `reduce` are the "main weapons" for React developers. Immutability matters—prefer `filter` over `splice` for removing items to avoid mutating state. - **Function composition scales better than nested calls** (Early): Composing functions with a higher-order `compose` utility is more readable and maintainable than deeply nested function calls, especially when data flows through many transformations. - **JSX is JavaScript, not HTML** (Early): Expressions in curly braces get evaluated, arrays can be mapped directly to JSX elements, and you can build entire UIs by transforming data structures into component trees. - **Keep components pure and lift state up** (Middle): The Color component example shows how to keep components stateless and reusable—they notify parents of events rather than managing their own state, making the parent responsible for handling changes. - **Controlled components beat uncontrolled ones** (Middle): Managing form values through React state (controlled) rather than DOM refs (uncontrolled) enables robust validation and avoids imperative code, though uncontrolled components have niche uses like sharing form access outside React. - **`useEffect` handles side effects, not renders** (Middle): Effects run after render and handle things like console logs, localStorage, or focusing inputs. The dependency array is critical—JavaScript compares arrays by instance, not content, which can cause unexpected re-renders. - **Performance hooks should be used sparingly** (Middle): `useMemo` and `useCallback` are tools for specific performance problems, not defaults. The React Profiler helps identify when they're actually needed. ## 【Reading Tips】 - **Skim the JavaScript refresher if you're current on ES6+** (Opening–Early): Chapters 2–3 cover arrow functions, destructuring, and array methods—if you use these daily, jump ahead to the React-specific content around the 19% mark. - **Deep-read the recipes app example** (Early ~25%): This is the book's anchor project. Building it yourself will cement JSX, component composition, and data-driven rendering better than any other section. - **Pay special attention to the useEffect dependency array discussion** (Middle ~44%–47%): The array instance comparison gotcha is subtle and causes real bugs. The `useAnyKeyToRender` example is worth re-reading until it clicks. - **Build the color management app incrementally** (Middle ~34%–44%): This multi-chapter example progresses from simple state to context and custom hooks—code along rather than just reading to understand the paradigm shifts. - **Skip the webpack chapter if you use Create React App or Vite** (Early ~28%): The concepts (bundling, HMR) are good background, but the tooling details may be outdated for modern setups. ## 【Coverage Limits】 The excerpts cover roughly the first half of the book (through ~47%), focusing on JavaScript fundamentals, functional programming, JSX, components, state, and effects. Later content on routing, Next.js, Gatsby, and React's future is not covered in this guide. ##