Starter Code

The Starter Code :

Solution Code

The Solution Code

Doggos Starter: https://codesandbox.io/s/useeffect-find-doggos-starter-572n9

Doggos Solution Code: https://codesandbox.io/s/useeffect-find-doggos-qusbx

Objectives

• explain what side effects are in React components
• demonstrate how to sync side effects with state and props using the effect hook
• fetch data from an API using the effect hook
• demonstrate how to clean up side effects in the effect hook

Step 1:

Talk about axios and add as dependency

Studio Ghibli API: https://ghibliapi.herokuapp.com/

Dog API: https://dog.ceo/dog-api/

Show students the Axios docs. Show how to add axios as a dependecy. Axios Docs

Step 2:

Set up App.js file

import React from "react";
import MovieList from "./components/MovieList";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Studio Ghibli API</h1>
      <MovieList />
    </div>
  );
}

export default App;