https://github.com/mosnad-web01/abdulaziz--react-hooks-simple-data-fetching-lab

https://github.com/mosnad-web01/abdulaziz--react-hooks-simple-data-fetching-lab

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/mosnad-web01/abdulaziz--react-hooks-simple-data-fetching-lab
• Owner: Mosnad-Web01
• Created: 2024-09-09T19:43:12.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2024-09-09T19:44:01.000Z (4 months ago)
• Last Synced: 2024-11-14T16:47:59.675Z (2 months ago)
• Language: JavaScript
• Size: 172 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Simple Data Fetching Lab

## Learning Goals

- Use the `useEffect` hook to fetch data from an API and set state

## Deliverables

This lab is missing the `App` component that `index.js` is looking for. To pass

the tests in this lab:

- Create an `App` component from scratch

- Use the `useEffect` hook in the `App` component. Inside the callback for

  `useEffect`, send a `fetch` request to

  `https://dog.ceo/api/breeds/image/random`, a free API that returns a random

  image of a dog.

- Display a `
` tag with the text of "Loading..." when the component is first

  rendered

- After receiving a response from the API, show the dog image in an `` tag,

  with the `alt` attribute set to "A Random Dog".

## Resources

- [React `fetch` with `useEffect` Example][react ajax]

[react ajax]: https://reactjs.org/docs/faq-ajax.html#example-using-ajax-results-to-set-local-state