003. Helper de conexión a API REST

En este capítulo vamos a continuar con la estructura del proyecto que comenzamos a crear en el capítulo anterior. Vamos a desarrollar algunos componentes y auxiliares que nos servirán a lo largo del curso, y también agregar estilos. Recordemos que el esquema que habíamos creado era el siguiente:

Esquema

  • spa
    • index.html
    • app
      • App.js
      • index.js
      • assets
        • favicon.png
        • loader.svg
        • style.css
      • components
      • helpers

Vamos a trabajar en el archivo style.css, que va a tener la siguiente sintaxis.

/* Reseteo de estilos */
html {
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 16px;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

body {
  margin: 0;
  overflow-x: hidden;
}

a {
  color: #01579b;
  transition: color 0.3s ease;
}

a:hover {
  color: #00b00f;
}

h1 {
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
}

En este capítulo trabajaremos dentro de la carpeta helpers. Para este proyecto tendremos dos helpers, vamos a crear un archivo llamado wp-api.js, el cual guardará todas las variables que nos permiten consultar hacia un dominio de WordPress. En este archivo vamos a crear un objeto con todas las variables que nos van a ayudar a solicitar la información. Va a haber archivos de configuración donde esos datos duros van a estar en este archivo, digamos que es como el archivo de conexión a la API de WordPress.

Veamos la sintaxis del archivo wp-api.js.

const NAME = "sutilweb",
  DOMAIN = `https://${NAME}.eu`,
  SITE = `${DOMAIN}/wp-json/`,
  API_WP = `${SITE}/wp/v2`,
  POSTS = `${API_WP}/posts?_embed`,
  POST = `${API_WP}/posts`,
  SEARCH = `${API_WP}/search?_embed&search=`;

export default {
  NAME
  DOMAIN,
  SITE,
  API_WP,
  POSTS,
  POST,
  SEARCH,
};

Y nos vamos a nuestro archivo App.js, e importamos las constantes que hemos creado, con lo cual la sintaxis quedará de la siguiente manera.

import api from "./helpers/wp-api.js";

export function App() {
  document.getElementById(
    "root"
  ).innerHTML = `<h1>Bienvenidos a mi primer SPA con Vanilla JS</h1>`;
  console.log(api);
}

Archivos

Los archivos los puedes descargar desde el siguiente enlace:

spaDescarga