005. Primeros Componentes de UI

En este capítulo vamos a crear componentes, veremos diferentes técnicas. Todas las técnicas que estuvimos viendo en los capítulos del DOM (crear documentos y fragmentos, templates HTML, o incluso la técnica del InnerHTML). Para ello crearemos un componente que será el título. Crearemos una postcard donde iremos metiendo la información de los artículos de WordPress que estemos recibiendo del sitio que estamos consultando.

Para ello, dentro de la carpeta components crearemos un archivo denominado Title.js, que mostrará el título de nuestra aplicación. otro que se denomine Loader.js, que representará el cargador, de manera que cuando hagamos una petición, este va a ser el cargador que se mostrará hasta que se cargue el contenido, este desaparecerá cuando se cargue el contenido, y otro componente denominado PostCard.js, que será la tarjeta que nos traerá toda la información de cada uno de los posts.

Las sintaxis de cada uno de ellos serán las siguientes:

Sintaxis del componente Title.js.

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

export function Title() {
  const $h1 = document.createElement("h1");
  $h1.innerHTML = `
    <a href="${api.DOMAIN}" target="_blank" rel="noopener">
    ${api.NAME.toUpperCase()}
    </a>
    `;

  return $h1;
}

Sintaxis del componente Loader.js.

export function Loader() {
  const $loader = document.createElement("img");
  $loader.src = "app/assets/loader.svg";
  $loader.alt = "Cargando...";
  $loader.classList.add("loader");

  return $loader;
}

Sintaxis nueva de App.js.

import api from "./helpers/wp-api.js";
import { ajax } from "./helpers/ajax.js";
import { Title } from "./components/Title.js";
import { Loader} from "./components/Loader.js";

export function App() {
  const d = document,
    $root = d.getElementById("root");

  $root.appendChild(Title());
  $root.appendChild(Loader());
}

También modificaremos la hoja de estilos, incluyendo más contenido a la misma. La sintaxis de style.css quedará de la siguiente manera.

/* 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;
}

.error {
  padding: 1rem;
  font-size: 150%;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background-color: #dc3545;
}

.loader {
  margin: 1rem auto;
  display: block;
  width: 4rem;
  height: 4rem;
}

Archivos

Estos son los archivos que hemos generado hasta ahora.