Pure React

  1. Introduction
    1. What We’ll Cover
    2. Why Just React?
    3. How This Book Works
      1. How Much Time Will This Take?
      2. Build Small Things and Throw Them Away
      3. Don’t Build a Prototype
      4. So What Should You Build?
      5. Learning With Small Projects
    4. Environment Setup
      1. Prerequisites
      2. Project Directory
    5. Debugging Crash Course
      1. Keep the Console Open!
      2. React Dev Tools
  2. Hello World
    1. How the Code Works
  3. JSX: What and Why
    1. What Is JSX?
      1. JSX Is Compiled to JavaScript
      2. But… Separation of Concerns!
      3. Unseparated Concerns
  4. Working With JSX
    1. Composing Components
      1. Wrap JSX with Parentheses
      2. Return a Single Element
      3. Wrap With a Tag
      4. Fragments
      5. Fragment Syntax
      6. JavaScript in JSX
    2. “If” in JSX
      1. Comments in JSX
      2. Capitalize Component Names
      3. Close Every Element
    3. Exercises
  5. Example: Tweet Component
    1. Rewriting an Existing App
    2. Build the Tweet Component
    3. The let and const Keywords
    4. Add the Buttons and the Time
  6. Props
    1. Passing Props
    2. Receiving Props
      1. Modifying Props
    3. Communicating With Parent Components
  7. Example: Tweet With Props
    1. ES6: Template Strings
    2. What Exactly Should Be Passed as a Prop?
    3. Guidelines for Naming Props
  8. PropTypes
    1. Documentation and Debugging In One
      1. How to Write PropTypes
      2. The Catch
    2. How Do I Validate Thee, Let Me Count the Ways
    3. Example: Tweet with PropTypes
      1. How Explicit Should You Be?
    4. PropTypes as Documentation
    5. Exercises
  9. Children
    1. Different Types of Children
    2. Dealing with the Children
    3. PropTypes for Children
      1. Versus Transclusion in AngularJS
    4. Customizing Children Before Rendering
    5. Exercises
  10. Example: GitHub File List
    1. Break It Into Components
    2. Name the Components
    3. Can You Reuse Anything?
    4. What Data Does Each Component Need?
    5. Top-Down or Bottom-Up?
    6. Keep it Working
    7. FileList
    8. The “key” Prop
      1. FileListItem
    9. Exercises
  11. State in Classes
    1. Example: A Counter
      1. Exercise: Reset Button
    2. setState Is Asynchronous
      1. Functional setState
    3. Shallow vs Deep Merge
    4. Cleaner Syntax for Class Components
    5. Handling Events
    6. Exercises
  12. The Component Lifecycle
    1. Phases
    2. Mounting
    3. Rendering
    4. Unmounting
    5. Error Handling
  13. API Requests in React
    1. Choose an HTTP Library
      1. Axios
      2. Fetch
    2. Fetch Data and Display It
      1. Reddit Trivia
    3. Exercises
  14. State in Functions
    1. Introducing Hooks
      1. But I just learned classes!
    2. The useState Hook
    3. The “Magic” of Hooks
      1. The Call Order Matters
      2. Step-by-step Example of Multiple useState Calls
    4. Rules of Hooks
    5. Update State Based on Previous State
    6. State as an Array
    7. State as an Object
    8. Exercises
  15. Thinking About State
    1. What to Put in State
    2. Thinking Declaratively
      1. How to Develop “Declarative” Thinking
    3. Where to Keep State
    4. “Kinds” of Components
  16. Input Controls
    1. Controlled Inputs
    2. Uncontrolled Inputs
      1. Refs
    3. Exercises
  17. The useReducer Hook
    1. What’s a Reducer?
      1. Ok, but, what about useReducer?
    2. A More Complex Example
      1. Remove an Item
    3. So… is Redux Dead?
    4. Exercises
  18. The useEffect Hook
    1. Limit When an Effect Runs
      1. Focusing an Input Automatically
    2. Only Run on Mount and Unmount
      1. Unmount and Cleanup
    3. Fetch Data With useEffect
    4. Re-fetch When Data Changes
    5. Making Visible DOM Changes
    6. Exercises
  19. The Context API
    1. Before: A Prop Drilling Example
    2. The “Slots” Pattern
    3. Using the React Context API
      1. Provider and Consumer are a Pair
      2. Context Holds No State
      3. The Default Value
    4. The “Render Props” Pattern
      1. Provider Accepts One Value
    5. Advanced Context Patterns
      1. Turn the Consumer into a Higher-Order Component
      2. Hold State in the Provider
    6. The useContext Hook
      1. Pass Actions Down Through Context
  20. Example: Shopping Site
    1. Break Into Components
    2. Start Building
    3. Arrow Function onClick
    4. Is It Bad to Create Functions During Render?
    5. Optimizing Components
    6. Create ItemPage
      1. Who Owns the Data?
    7. Create the Item Component
      1. Updating State Immutably
      2. Back to the Code
    8. Create the CartPage Component
      1. Group and Count the Items
      2. Pass the Grouped Items to CartPage
      3. Modifying the Cart
      4. Refactoring Item
    9. Exercises
  21. Where To Go From Here
    1. API Calls and CRUD Operations
    2. Testing
    3. Webpack
    4. ES6
    5. Routing
    6. Redux
    7. TypeScript
    8. On Boilerplate Projects
    9. Thank You
  1. Cover