Skip to content

Latest commit

 

History

History
186 lines (141 loc) · 3.73 KB

lecture8.mdx

File metadata and controls

186 lines (141 loc) · 3.73 KB

import { Head, Appear } from "mdx-deck"; import Logo from "./assets/images/logos/rdc-icon.svg"; export { default as theme } from "./theme"; import { CodeSurfer } from "mdx-deck-code-surfer"; import ultramin from "prism-react-renderer/themes/ultramin";

Lecture 8

Review of data fetching and component lifecycle

Fetch

Send a network request to:

  • Get some information from another service
  • Give some information to another service

Fetch: Example

let response = await fetch("https://api.kanye.rest");
let responseJson = await response.json();

Fetch: Example, in React

What about "before" the component loads?

How might we load an initial quote into the page, before a user clicks "Get quote"?

Component Lifecycle

React has special method names that are called at certain points of a component's life

Where to load the initial quote?

Mounting and updating

  • componentDidMount: The React component has been placed into the page
  • componentDidUpdate: The newest render of the React component has been placed into the page

The initial quote

When do we update?

A demo of the concepts we just reviewed

Review

We had a PokedexEntry component:

<PokedexEntry name="ditto" />
<PokedexEntry name="abra" />

Review

We had our PokedexEntry component receiving props from App's state:

<PokedexEntry name={this.state.currentPokemon} />

Review

Attendance

https://bit.ly/RDAttendance