Olá, tentando crescer com JavaScript

Estoy haciendo pinitos iniciales con JS y con React para empezar.

Quiero mostrar un miniscript con un apirest y luego se me vino la idea de poner en el mismo pantallazo, tres apirest diferentes, incluso de servicios diferentes pero, no me ha funcionado y quiero saber si es porque las apirest funcionan de uno a uno, o es por otra cosas...

si pegas tu código o pones una captura de pantalla de la consola de desarrolladores, seria mas fácil ayudarle.

Pongo el código al rato pero Gatitos Aleatorios https://lucfreelance.github.io/trozosderealidad/src/gatito-aleatorio/2.html funciona bien.

Lo que hice fue triplicar el código e indexarlo y no resultó, por lo que pensé que un requerimiento de una apirest podía ser que no se pudieran ejecutar varias a la vez. Al rato pongo el trozo de código de ese index...

Se alarga un poquito...

Pongo gatitos.html + gatitos.css + gatitos.js

Es lo mismo con las variaciones para

patitos.html + patitos.css + patitos.js

y para

perritos.hrml + perritos.css + perritos.js

Lo que me parece es un conflicto por lanzar tres apirest en la misma vista, es eso @m16u31

---index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mascotitas aleatorias</title>
</head>
<body>
<header>
<h1>Mascotitas aleatorias</h1>
<h2>Todos los gatos 😺 patos 🦆 perros 🐶 aleatorios que quieras!</h2>
<p>Los patos son mascota (a veces) y por eso los pusimos aquí.</p>
</header>
<nav>
<ul>
<li><a href="../gatitos.html">Gatitos</a></li>
<li><a href="../perritos.html">Perritos</a></li>
<li><a href="../patitos.html">Patitos</a></li>
</ul>
</nav>
</body>
</html>
---
---gatitos.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gatitos Aleatorios</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header>
<h1>Gatitos aleatorios</h1>
</header>
<div class="container">
<img id="img-cat" alt="Gatitos aleatorios">
<button type="button" id="btn-button">Dame otro gatito</button>
</div>
<script src="./main.js"></script>
</body>
</html>
---
---gatitos.js
const URL = 'https://api.thecatapi.com/v1/images/search'


//mostrar una imagen con boton

async function mycat (){
const res = await fetch(URL);
const data = await res.json();
const img =
document.getElementById('img-cat');
img.src = data[0].url;
}
const myButton = document.getElementById('btn-button')
myButton.onclick = mycat;
---
---gatitos.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%;
}
header{
display: flex;
justify-content: center;
}
h1{
font-size: 4rem;
}
.container{
display: flex;
flex-direction: column;
justify-content: center;
place-items: center;
padding: 20px;
}
img {
width: auto;
height: 500px;
border-radius: 30px;
}
button{
width: 100%;
min-width: 300px;
padding: 10px;
margin-top: 40px;
font-size: 16px;
border-radius: 15px;
background: #66BB6A;
cursor: pointer;
transition:all;
border: 5px solid #187a1d ;
}
button:hover{
border: 5px solid rgb(228, 164, 94);
background-color: rgb(227, 141, 67);

}
@Media screen and (min-width: 1024px) {
button{
width: 20%;
}

}
---

No entiendo bien el problema.

¿Podrias explicarlo un poco mejor?

Era más bien una pregunta conceptual. Como dije estoy iniciando en react y lancé una apirest de gatitos a un home como se ve al inicio,

Lo que quise fue poner tres vistazos de tres apirest diferentes en la misma misma vista como lo muestra la imagen, pero los codigos son similares contando las modificaciones a las fuentes.

Pero como el tema no da para mucho si no se entiende mejor dejar así que por lo que se ve, la lógica de react no es como cuando hacías paginas en html...

ultracobra disse:

Era más bien una pregunta conceptual. Como dije estoy iniciando en react y lancé una apirest de gatitos a un home como se ve al inicio,

Lo que quise fue poner tres vistazos de tres apirest diferentes en la misma misma vista como lo muestra la imagen, pero los codigos son similares contando las modificaciones a las fuentes.

Pero como el tema no da para mucho si no se entiende mejor dejar así que por lo que se ve, la lógica de react no es como cuando hacías paginas en html...

Clique para expandir...

Ponlo en un componente, como input el url de la api rest de animales y asi solo llamas al componente 3 veces una para gatos, otra para perros y otra para patos.

moiseseccam disse:

Ponlo en un componente, como input el url de la api rest de animales y asi solo llamas al componente 3 veces una para gatos, otra para perros y otra para patos.

Clique para expandir...

Gracias por la sugerencia, aún me cuesta interpretarlo. Si conoces de trozos de código para hacer mejores apiREST aquí estamos...