created an App component that fetches data to the url

src/components/App.js

@@ -1 +1,31 @@
-// create your App component here
+import React, { useState, useEffect } from 'react';
+
+const App = () => {
+  const [dogImage, setDogImage] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('https://dog.ceo/api/breeds/image/random')
+      .then(response => response.json())
+      .then(data => {
+        setDogImage(data.message);
+        setLoading(false);
+      })
+      .catch(error => {
+        console.error('Error fetching the dog image:', error);
+        setLoading(false);
+      });
+  }, []);
+
+  return (
+    <div>
+      {loading ? (
+        <p>Loading...</p>
+      ) : (
+        <img src={dogImage} alt="A Random Dog" />
+      )}
+    </div>
+  );
+};
+
+export default App;