Curso de React | Aplicación REST con React

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Vamos a hacer una aplicación que muestre información de los personajes de Starwars. Para ello, utilizaremos la API de StarWars (swapi).

Pasos en la resolución:

1. Consultamos la API de Star Wars y mostramos los nombres de 10 personajes.

https://swapi.dev/api/people/

2. Además de mostrar los nombres de 10 personajes, mostraremos su rostro. Para cargar las imágenes utlizaremos la siguiente url, que recibirá como parámetro la id de la foto que queremos pintar.

https://starwars-visualguide.com/assets/img/characters/1.jpg

Para obtener la id del personaje (que necesitaremos para concatenar en la url de la imagen), debemos definir un método que reciba como parámetro de entrada la propiedad url del personaje y extraiga lo que hay entre la penúltima y la última barra de la url.

export const getIdFromUrl = (url) => url.substring(url.lastIndexOf('/', url.lastIndexOf('/') - 1) + 1, url.lastIndexOf('/'));

3. Al pulsar sobre la imagen de algunos de los personajes iremos a una nueva página en la que mostraremos la id del personaje que hemos pulsado.

4. En la nueva página, utilizaremos la id del personaje para hacer una nueva consulta y mostrar su información correspondiente.

5. En la página principal, añadiremos los enlaces de paginación.

Para los enlaces de paginación, podremos usar un código similar a esto:

export const getPaginationLinks = (elementsAmount, elementsPerPage) => {
    const pagesAmount = elementsAmount / elementsPerPage;
    const linksData = []
    for (let i = 0; i < pagesAmount; i++) {
        linksData.push(i);
    }
    return linksData;
};
Ver ejercicio resuelto

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.