Learning React

Overview

Learning React (2020, Second Edition) by Alex Banks and Eve Porcello is a hands-on introduction to building web applications with React. The book covers the modern React ecosystem including hooks, context API, React Router, and GraphQL integration.

The authors take a project-based approach, building applications progressively while introducing concepts as they become relevant. The second edition has been fully updated for React 16.8+ with hooks.

---

Key Takeaways

1. React uses a declarative paradigm. You describe what the UI should look like, and React handles the DOM updates efficiently.

2. Components are the building blocks. Everything in React is a component — compose them to build complex UIs from small pieces.

3. Hooks simplify state and side effects. useState, useEffect, useReducer, and custom hooks replace class lifecycle methods.

4. JSX is syntactic sugar for React.createElement. Understanding the transformation helps debug rendering issues.

5. State management scales from local to global. Start with component state, escalate to context, then to external libraries.

6. React's unidirectional data flow simplifies debugging. Data flows down through props; events flow up through callbacks.

7. Server-side rendering improves performance and SEO. Next.js and Gatsby extend React for production applications.

8. React Testing Library encourages testing by user behavior. Test what the user sees, not implementation details.

9. GraphQL complements React's component model. Co-locate data requirements with the components that need them.

10. The React ecosystem evolves rapidly. Focus on core principles to avoid being caught by breaking changes.

---

Who Should Read

| Reader Type | Why | |---|---| | New React developers | Comprehensive introduction with hands-on exercises | | Frontend developers switching frameworks | Understands React's mental model and patterns | | Web developers modernizing their skills | Covers modern JavaScript and component architecture |

---

Who Should Skip

• Seasoned React developers — too basic
• Beginners without JavaScript fundamentals
• Those seeking TypeScript or Next.js deep dives

---

Related Books

| Book | Author | Connection | |---|---|---| | JavaScript: The Good Parts | Douglas Crockford | JavaScript fundamentals for React developers | | CSS: The Definitive Guide | Eric Meyer | Styling React components effectively | | Learning GraphQL | Eve Porcello & Alex Banks | GraphQL integration with React |

---

Final Verdict

A solid, well-structured introduction to React. The hands-on projects reinforce concepts effectively. Not as deep as the official React docs but provides a more structured learning path.

Rating: 7.5/10 — A good on-ramp to React for developers with JavaScript experience.

React's Core Mental Model

React is a declarative, component-based library for building user interfaces. The key insight: describe what the UI should look like for any given state, and React handles the DOM updates efficiently.

graph TD
    subgraph React_Flow["React Data Flow"]
        S["State (data)"] --> R["React Component"]
        R --> V["Virtual DOM"]
        V --> D["Real DOM (minimal updates)"]
    end

    subgraph Unidirectional["Unidirectional Flow"]
        P["Props (parent)"] --> C["Component"]
        C --> E["Events (child)"]
        E --> P
    end

---

Components and JSX

Components are the building blocks of React. JSX is syntactic sugar for React.createElement calls.

| Rendering Type | When to Use | |---------------|-------------| | Conditional Rendering | Show/hide based on state | | List Rendering | Display arrays of data | | Composition | Build complex UIs from small components |

---

Hooks

Hooks replace class lifecycle methods with functional primitives.

flowchart LR
    subgraph Core_Hooks["Core Hooks"]
        US["useState<br/>Local state"]
        UE["useEffect<br/>Side effects"]
        UC["useContext<br/>Access context"]
        UR["useReducer<br/>Complex state"]
        UM["useMemo<br/>Memoization"]
        UC2["useCallback<br/>Callback memo"]
        UR2["useRef<br/>DOM references"]
    end

    subgraph Patterns["Common Patterns"]
        CP["Custom Hooks<br/>Extract logic"]
        CC["Context + useReducer<br/>Global state"]
    end

    Core_Hooks --> Patterns

---

State Management

State management scales through tiers:

graph TD
    subgraph State_Layers["State Management Tiers"]
        T1["Tier 1: Component State<br/>useState, useReducer"]
        T2["Tier 2: Lifted State<br/>Props drilling"]
        T3["Tier 3: Context API<br/>Global state without libraries"]
        T4["Tier 4: External Libraries<br/>Redux, Zustand, Jotai"]
    end

    T1 --> T2 --> T3 --> T4

---

React Router

Client-side routing enables single-page applications:

| Route Type | Purpose | |-----------|---------| | Static routes | Fixed URL paths | | Dynamic routes | URL parameters | | Nested routes | Layout inheritance | | Protected routes | Authentication gates |

---

GraphQL with Apollo

graph LR
    subgraph Apollo["Apollo Client in React"]
        C["React Component"]
        Q["useQuery Hook"]
        M["useMutation Hook"]
        AP["Apollo Client"]
        S["GraphQL Server"]
    end

    C --> Q
    C --> M
    Q --> AP --> S
    M --> AP --> S

---

Testing React

| Test Type | Tool | What It Tests | |-----------|------|--------------| | Component rendering | React Testing Library | What users see | | User interactions | fireEvent / userEvent | Button clicks, form input | | State changes | render + act | Hook and state behavior | | Integration | MSW + Testing Library | Full component flows |

---

Reading Guide

| Chapter | Topic | Est. Time | Priority | |---------|-------|-----------|----------| | 1-3 | React fundamentals | 2h | Essential | | 4-5 | Hooks deep dive | 3h | Essential | | 6 | State management | 1.5h | Essential | | 7 | React Router | 1h | Important | | 8 | GraphQL | 1.5h | Optional | | 9-10 | Testing and deployment | 1h | Important |

Strengths

• Hands-on approach. The book uses practical projects to teach concepts, which reinforces learning through doing.
• Modern React coverage. Covers hooks, Context API, and functional components — not outdated class-based patterns.
• Clear progression. Starts simple and builds complexity incrementally without overwhelming the reader.
• GraphQL integration. A practical chapter on Apollo Client and GraphQL is included, which is rare in React introductory books.
• Exercise-driven. Each chapter includes exercises that test understanding.

---

Weaknesses

• Lacks TypeScript coverage. In 2020, a React book without TypeScript is missing the mainstream development approach.
• Shallow on advanced topics. React Router, performance optimization, and testing are covered briefly.
• Too basic for experienced developers. The pace is too slow for developers who already understand modern JavaScript.
• Some code examples feel contrived. The project examples are simplified to the point of being unrealistic.

---

Criticism

The "Official Docs Are Better" Critique

Many readers note that the official React documentation, especially the new React docs at react.dev, provides a better learning experience with more up-to-date guidance and interactive examples.

The "Outdated Patterns" Critique

The book covers React Router v5, but React Router v6 introduced significant changes. Readers following the book will need to adapt.

---

Comparison with Similar Books

| Book | vs. Learning React | |------|-------------------| | The Road to React (Wieruch) | Deeper, more modern, free online | | Fullstack React (Accomazzo et al.) | More comprehensive, includes TypeScript | | React Docs (Official) | More current, interactive examples |

---

Historical Context

Published in 2020, the second edition of Learning React arrived when hooks were becoming standard but before the React ecosystem fully embraced TypeScript. It captured a transitional moment in React's evolution.

---

Final Assessment

| Dimension | Rating | Notes | |-----------|--------|-------| | Depth | 6/10 | Good for beginners, shallow for intermediates | | Breadth | 7/10 | Covers major topics at surface level | | Readability | 8/10 | Clear and accessible prose | | Practical Utility | 7/10 | Hands-on exercises reinforce learning | | Lasting Value | 5/10 | Ecosystem evolves quickly | | Overall | 6.5/10 | Solid but surpassed by official docs |