GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — learning-react/chapter-07 at master · coolqa/learning-react

Expand file tree

/

chapter-07

/
Copy path

Directory actions

More options

More options

Directory actions

More options

More options

Latest commit

 

History

History
History
 
 
/

chapter-07

/
Copy path

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
01-mounting-lifecycle
01-mounting-lifecycle
 
 
02-updating-lifecycle
02-updating-lifecycle
 
 
03-children
03-children
 
 
04-library-integration
04-library-integration
 
 
05-higher-order-components
05-higher-order-components
 
 
06-managing-state-outside-react
06-managing-state-outside-react
 
 
color-organizer
color-organizer
 
 
mounting-lifecycle-clock
mounting-lifecycle-clock
 
 
readme.md
readme.md
 
 

readme.md

Outline

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)
You are visitor 01402520 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.