Ruta estáticas y dinámicas

Resumen

Final del curso de React en CourseIt. A partir de ahora, va a ser todo de forma autodidacta, viendo documentación y algún que otro video.
Si se fijan bien, hace un par de días no posteo este día 12. Esto es porque me dediqué a hacer el proyecto que sería "la frutilla del postre": Consumir la API de MeLi usando React.
Al final de la teoría, dejo repositorio y enlace para verlo deployeado (diría desplegado pero no me gusta jaj).
Vamos a ver rutas, que es lo más importante para demostrar que, con "un solo HTML", podemos hacer varias rutas.

Podrás ver la lista de los 100 días en este enlace.

Rutas estáticas

Para manejar múltiples rutas en una SPA vamos a usar la librería react-router-dom. Nos permite crear rutas estáticas y dinámicas, y poder navegar entre ellas sin la necesidad de tener que renderizar desde el lado del servidor múltiples HTML.

Para empezar a utilizar esta librería, la instalamos mediante el comando:

npm install react-router-dom

Para esto, previamente tienen que dar de baja el servidor. Esta instalación deben realizarla dentro de la carpeta del proyecto (en mi caso, first-app).
Luego, vamos a poder levartar de nuevo el servidor con npm run start.

Ahora sí, por primera vez, podemos trabajar en el resto de los archivos del proyecto.

Debemos entrar ahora al index.js de la carpeta src. Vamos a realizar un par de imports:

// Importamos de BrowserRouter: Router y Route
import { BrowserRouter as Router, Route } from "react-router-dom";

Router la única función que tiene es contener todas las rutas. Route es para definir cada una de las rutas que queremos crear, recibe dos props: el primero es path, que va indicar como va a ser la url; la segunda es component, que va a ser el componente que va a mostrar en esa URL. También hay otra prop que es exact, que nos va a ayudar a indicar que las rutas definidas en path no sean relativas, o sea, deben ser absolutas; sin esto, se van a conservar varias rutas a la vez.

Antes de continuar, vamos a probar dos rutas: "/" y "/equipo". La primera va a ser con el componente App, la segunda la vamos a crear y la llamaremos Team. Para esto, ya que van a ser los componentes principales, vamos a tener que crear una carpeta pages dentro de src y vamos a usar la misma metodología de la carpeta components. Crearemos una carpeta por página que queramos mostrar en cada URL. Los archivos ahora quedan así:

El código de cada uno quedan asi (ojo con las rutas! si usan VS Code les va a avisar si quieren cambiar las rutas de los imports, ustedes le dan que si para facilitar la tarea):

• index.js de carpeta src:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./pages/App/App";
import Team from "./pages/Team/Team";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter as Router, Route } from "react-router-dom";

ReactDOM.render(
    <Router>
        <Route exact path="/" component={App} />
        <Route exact path="/equipo" component={Team} />
    </Router>,
    document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

• App.js en src/pages/App:

import React from "react";
import Blog from "../../components/Blog/index.js";
import "./App.css";

function App() {
    return (
        <div>
            <Blog
                title="Titulo muy copado"
                content="Parrafo muy copado en Dev.to"
            />
            <Blog
                title="Otro titulo by El Javo"
                content="Parrafo hecho gracias a Course.It"
            />
        </div>
    );
}

export default App;

• Team.js en src/pages/Team:

import React from "react";

function Team() {
    return (
        <div>
            <p>Soy equipo</p>
            <p>dasdasd</p>
            <p>Hola</p>
        </div>
    );
}

export default Team;

Hay otro componente que nos va a ayudar a que el usuario pueda acceder a cada URL, que se llama Link.

En App.js, vamos a querer agregar un link hacia /equipo. Lo hacemos mediante un import:

import { Link } from "react-router-dom";

y agregamos dentro del return de la función el componente Link:

<Link to="/equipo">Ir a equipo</Link> // Similar a la etiqueta 'a' de HTML

De la misma forma, hacemos un enlace que desde Equipo vaya a la página principal.

Rutas dinámicas (y hook useParams)

Si te quedaste pensando: ¿Cómo hago para routear algo como MercadoLibre que tiene un millón de productos?. Bueno, la solución está en las rutas dinámicas.
Una ruta dinámica es una ruta que tiene una "variable" dentro de su URL. Esto sería algo así: /comunidad/:id. Ejemplos:

/comunidad/1    ---> Te lleva a la comunidad de FrontendCafé
/comunidad/2    ---> Te lleva a la comunidad de CourseIt

...

/comunidad/N    ---> Te lleva a la comunidad de Elon Musk

Al momento de declarar la ruta, vamos a tener que indicarle con dos puntos (:) que va a ser la parte dinámica de la ruta (variable). Y a la página que apunta a esa ruta, debe tener la capacidad de poder levantar ese valor y leerlo (para tener el mmismo estilo de página con distinta información).

Ejemplo: Declaramos un componente Route para crear una ruta /productos/algo. Luego debemos editar el componente Product que fijamos en Route y usar el hook useParams. useParams lo usamos para poder levantar los datos variables de las URL.

// Dentro del index.js de la carpeta src

<Route path="/productos/:id" component={Product} />
// :id es la parte dinámica de la ruta

// dentro de index.js de Product

import React from "react";
import { useParams } from "react-router-dom";

function Product() {
    const { id } = useParams();
    // useParams nos devuelve un objeto con todas las variables que
    //tiene la URL. O sea, desestructuramos el objeto, usando id.
    return <p>El id del producto es: {id}</p>;
}

export default Product;

Esto sería todo! Vimos lo básico de React y ahora nos queda explorar otras librerías de JavaScript.
Ahora, les muestro la SPA que logré codear usando React y consumiendo la API de MeLi. Cuenta con un inicio donde podés elegir el país en donde buscarías los productos. Habiendo elegido esto, verás una nueva pantalla (en una ruta distinta), donde un aburrido mensaje te va a indicar que coloques algo en el buscador.
Ahora, hay cosas por arreglar que por cuestión de tiempo no pude resolver (laburo + finales de facultad):

• Mostrar artículos sin tener que haber puesto algo en el buscador.
• Diseño de las cards.
• Refactorizar código (es muy posible que tenga algo mal, soy un Jr :P ).
• Filtros de búsqueda.
• Si apreto Enter, me acepta la búsqueda del artículo.
• Etcéteras.

En fin, acá van los enlaces:

Repositorio: GitHub - tiendappi-ml
Live: Deployeado en Vercel

Pueden clonar el repositorio y resolver estas cuestiones, pero el objetivo principal era lograr esto. Cuando tenga más tiempo, retomaré el proyecto (y seguro que lo publique acá).

En los próximos días, realizaré proyectos personales, usando algún complemento para React: Tailwind CSS, Firebase y algún otro, tal vez Next.js (a este framework le podría dedicar un par de días).

Pronto mostraré avances de mi Portfolio pero en una sección a parte.

Día 12/100