"scripts": {
"dev": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
start cambiamos por dev en scrript
yarn dev ejecuta toda la aplicaciòn , primero nos fijamos en instalar yarn -
En src creamos una carpeta img y colocamos las imagenes
import imageAlexTech from "./img/logo claro.png";
import './App.css';
import { useState } from "react";
function App() {
const [characters , setCharacters] = useState(null);
// const reqApi = lo volvemos asincrono() =>{
// console.log("Clicking");
// }
const reqApi = async () =>{
const api = await fetch("https://rickandmortyapi.com/api/character");
const characterApi = await api.json();
// console.log(characterApi);
setCharacters(characterApi.results);
// console.log(api);
// console.log(characterApi);
}
console.log(characters);
return (
<div className="App">
<header className="App-header">
<h1 className="title">ALEX TECHNOLOGY API</h1>
<img src={imageAlexTech} alt='alex javier brito muñoz' className='img-home'/>
<button onClick={reqApi} className="btn-search">BUSCAR</button>
Buscar personajes
</header>
</div>
);
}
export default App;
En src creamos una carpeta componeent creamos un archivo Character.js.
Character.js
export default function Characters(){
return(
<div>
<h1>Desde characters JS</h1>
</div>
)
}
Aplicando ternarios
Characters.js
export default function Characters(props){
console.log(props);
return(
<div>
<h1>Desde characters JS</h1>
</div>
)
}
App.js
<h1 className="title">ALEX TECHNOLOGY API</h1>
<Characters characters={characters}/>
Cuando el use state characters este lleno contenga algo componentes de caracters , cuando no : 2 puntos carga el fragment carga img y button y encapsulamos en un fragment.
<header className="App-header">
<h1 className="title">ALEX TECHNOLOGY API</h1>
{characters ? (
<Characters characters={characters} />
) : (
<>
<img src={imageAlexTech} alt='alex javier brito muñoz' className='img-home'/>
<button onClick={reqApi} className="btn-search">BUSCAR</button>
</>
)}
</header>
Recorreindo datos que vienen de la API
<div className="characters">
<h1>Personajes</h1>
<span className="back-home">Volver a Home</span>
<div className="container-characters">
{characters.map((character ,index)=>(
<div className="character-container" key={index}>
<p>{character.name}</p>
</div>
))}
</div>
</div>
Poniendo estilos a bloques
<div className="characters">
<h1>Personajes</h1>
<span className="back-home">Volver a Home</span>
<div className="container-characters">
{characters.map((character ,index)=>(
<div className="character-container" key={index}>
{/* <p>{character.name}</p> */}
<div>
<img src={character.image} alt={character.name} />
</div>
<div>
<h3>{character.name}</h3>
<h6>
{character.status === "Alive" ? (
<>
<span className="alive"/>
Alive
</>
) : (
<>
<span className="dead"/>
Dead
</>
)}
</h6>
<p>
<span className="text-grey">Episodios:</span>
<span>{character.episode.length}</span>
</p>
</div>
</div>
))}
</div>
</div>
Detalles
<p>
<span className="text-grey">Episodios: </span>
<span>{character.episode.length}</span>
</p>
<p>
<span className="text-grey">Especie: </span>
<span>{character.species}</span>
</p>
Enlace volver a Home
App.js
export default function Characters(props){
const {characters , setCharacters} = props;
const resetCharacters = ()=>{
setCharacters(null);
<h1 className="title">ALEX TECHNOLOGY API</h1>
{characters ? (
<Characters characters={characters} setCharacters={setCharacters}/>
Character.js
export default function Characters(props){
const {characters , setCharacters} = props;
<h1>Personajes</h1>
<span className="back-home" onClick={resetCharacters}>Volver a Home</span>
))}
</div>
<span className="back-home" onClick={resetCharacters}>Volver a Home</span>
</div>
