Skip to content

Latest commit

 

History

History
 
 

chapter-07

readme.md

Chapter 7 : Enhancing Components

Before we can enhance our applications with 3rd party JavaScript libraries or backend data requests, we must first understand how to work with the component lifecycle: a series of methods that can be invoked every time we mount or update a component.

Samples

Mounting Lifecycle

  1. getFakeMembers (demo, code, bin)
  2. getFakeMembers Lifecycle (demo, code, bin)
  3. Clock (demo, source)

Color Organizer

  1. Color Organizer - Updating Lifecycle (demo, source)

Updating Lifecycle

  1. Hidden Messages - Mounting Methods ❌ (demo, code, bin)
  2. componentWillReceiveProps (demo, code, bin)

Children

  1. Display Component (demo, code, bin)
  2. Filtering Components (demo, code, bin)
  3. Filtering Components - Different Ages (demo, code, bin)

JavaScript Library Integration

  1. Fetching Data (demo, code, bin)
  2. Fetch with componentWillMount (demo, code, bin)
  3. D3 Timeline v1 (demo, code, bin)
  4. D3 Ski Milestones (demo, code, bin)

Higher Order Components

  1. People List (demo, code, bin)
  2. Data Component HOC (demo, code, bin)
  3. Country Dropdown (demo, code, bin)
  4. Expandable HOC (demo, code, bin)
  5. Pop-up With Expandable (demo, code, bin)

Managing State Outside of React

  1. Clock without React State (demo, code, bin)
  2. Flux (bin only)