Para poder realizar este taller ud debe:

1. Tener instalado node.js en su máquina

Un esquema (layout) recurrente en las aplicaciones web es la presencia de un banner, un menú de navegación, una parte central donde se renderiza la mayoría del contenido y un footer.

La parte correspondiente al contenido cambia dependiendo de la ruta a donde navegue el usuario o a la opción del menú que haya seleccionado.

Para implementar este esquema usaremos la librería React Router, la cual instalamos con el siguiente comando: npm install react-router-dom --save.

Tomaremos como referencia el ejemplo que desarrollamos en el tutorial del hook de efecto. Este será entonces el componente principal (app.js):

import { BrowserRouter, Routes, Route } from "react-router-dom";
import "./App.css";
import Detail from "./components/detail";
import Mascotas from "./components/mascotas";
import NavBar from "./components/navbar";

function App() {
 return (
   <div className="App">
     <NavBar></NavBar>
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Mascotas />} />
         <Route path="/mascotas" element={<Mascotas />} />
         <Route path="/mascotas/:mascotaId" element={<Detail />} />
       </Routes>
     </BrowserRouter>
   </div>
 );
}

export default App;

La modificación que hemos incluido acá es el uso de un componente denominado NavBar, el cual corresponde a la barra de navegación. Luego usamos el componente BrowserRouter que será el encargado de manejar la navegación. Dentro del componente Routes incluimos las rutas de la aplicación:

• Cuando el usuario navega a la ruta por defecto (path="/") o cuando navega a la ruta /mascotas, se mostrará el componente Mascotas.
• Cuando el usuario navega a la ruta /mascotas/8, por ejemplo, se mostrará el componente Detail.

El componente NavBar tiene el siguiente contenido:

import Container from "react-bootstrap/Container";
import Navbar from "react-bootstrap/Navbar";

function NavBar() {
 return (
   <>
     <Navbar bg="dark" variant="dark">
       <Container>
         <Navbar.Brand href="/mascotas">Adóptame</Navbar.Brand>
       </Container>
     </Navbar>
   </>
 );
}

export default NavBar;

Acá usamos un componente de Bootstrap para mostrar una barra de navegación.

Este es el contenido del componente Mascotas:

import Mascota from "./mascota";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";

const { useEffect, useState } = require("react");

function Mascotas() {
 const [mascotas, setMascotas] = useState([]);
 useEffect(() => {
   const URL =
     "https://gist.githubusercontent.com/josejbocanegra/829a853c6c68880477697acd0490cecc/raw/99c31372b4d419a855e53f0e891246f313a71b20/mascotas.json";
   fetch(URL)
     .then((data) => data.json())
     .then((data) => {
       setMascotas(data);
     });
 }, []);

 return (
   <div className="container">
     <h2 className="mt-2">Listado de mascotas</h2>
     <hr></hr>
     <Row>
       {mascotas.map((mascota) => (
         <Col key={mascota.id}>
           <Mascota mascota={mascota} />
         </Col>
       ))}
     </Row>
   </div>
 );
}

export default Mascotas;

Este es el contenido del componente mascota:

import Card from "react-bootstrap/Card";
import { Link } from "react-router-dom";

function Mascota(props) {
 return (
   <Card style={{ width: "18rem", height: "24rem" }} className="mb-3">
     <Card.Img
       style={{ height: "14rem" }}
       variant="top"
       src={props.mascota.foto}
       alt={props.mascota.descripcion}
     />
     <Card.Body>
       <Card.Title>
         <Link to={"/mascotas/" + props.mascota.id}>
           {props.mascota.nombre}
         </Link>
       </Card.Title>
       <Card.Text>{props.mascota.descripcion}</Card.Text>
     </Card.Body>
   </Card>
 );
}

export default Mascota;

Acá podemos observar que en el nombre de la mascota hemos agregado un nuevo componente denominado Link, que navegará a la ruta /mascotas/ más el id de la mascota. Cuando se usa Link la navegación actualizará solo una parte de la página y no la página completa.

Este es el contenido del componente Detail:

import { useParams } from "react-router-dom";
export default function Detail() {
 const params = useParams();
 return (
   <div>
     <h1>I am {params.mascotaId}</h1>
   </div>
 );
}

En este componente usamos el hook useParams que captura los parámetros de la url. El componente mostrará entonces el valor del parámetro mascotaId.

Reto:

Modifique el componente Detail para mostrar los detalles de una mascota así: