Done

src/App.css

@@ -40,3 +40,7 @@
 .read-the-docs {
   color: #888;
 }
+
+img{
+  width: 100px;
+}

src/App.jsx

@@ -1,13 +1,36 @@
 import './App.css';
+import useFetchCharacters from './hooks/useFecthCharacters';
+
 
 function App() {
   const urlPokemon = 'https://pokeapi.co/api/v2/pokemon/1';
   const urlRick = 'https://rickandmortyapi.com/api/character/1';
-
-  return (
-    <>
-    </>
-  );
-}
+
+const {character, error, isLoading} = useFetchCharacters(urlPokemon)
+const {character:rickCharacter, error:errorRick, isLoading:isLoadingRick} = useFetchCharacters(urlRick)
+
+
+  if (isLoading) {
+        return <div>Cargando...</div>;
+    }
+
+    if (error) {
+        return <div>Error: {error.message}</div>;
+    }
+
+
+    return (
+        <>
+            <h1>Personaje</h1>
+            <p>Nombre: {character.name}</p>
+            <img src={character.sprites.front_default} />
+            <h1>Personaje</h1>
+            <p>Nombre: {rickCharacter.name}</p>
+            <img src={rickCharacter.image} />
+        </>
+    );
+};
+
+
 
 export default App;

src/hooks/useFecthCharacters.jsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+const useFetchCharacters = (url) => {
+    const [character, setCharacter] = useState({});
+    const [error, setError] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        setIsLoading(true);
+        fetch(url)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then(data => {
+                setCharacter(data);
+                setIsLoading(false);
+            })
+            .catch(error => {
+                setError(error);
+                setIsLoading(false);
+            });
+    }, [url]);
+    console.log(character)
+
+    return { character, isLoading, error };
+};
+
+export default useFetchCharacters;