{"id":1663,"date":"2024-08-02T10:59:56","date_gmt":"2024-08-02T08:59:56","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1663"},"modified":"2024-08-02T10:59:57","modified_gmt":"2024-08-02T08:59:57","slug":"005-primeros-componentes-de-ui","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/18-single-page-application-spa\/005-primeros-componentes-de-ui\/","title":{"rendered":"005. Primeros Componentes de UI"},"content":{"rendered":"\n

En este cap\u00edtulo vamos a crear componentes<\/strong>, veremos diferentes t\u00e9cnicas. Todas las t\u00e9cnicas que estuvimos viendo en los cap\u00edtulos del DOM<\/strong> (crear documentos<\/strong> y fragmentos<\/strong>, templates HTML<\/strong>, o incluso la t\u00e9cnica del InnerHTML<\/strong>). Para ello crearemos un componente que ser\u00e1 el t\u00edtulo<\/strong>. Crearemos una postcard<\/strong> donde iremos metiendo la informaci\u00f3n de los art\u00edculos de WordPress<\/strong> que estemos recibiendo del sitio que estamos consultando.<\/p>\n\n\n\n\n\n\n\n

Para ello, dentro de la carpeta components<\/em> crearemos un archivo denominado Title.js<\/em>, que mostrar\u00e1 el t\u00edtulo de nuestra aplicaci\u00f3n. otro que se denomine Loader.js<\/em>, que representar\u00e1 el cargador<\/strong>, de manera que cuando hagamos una petici\u00f3n, este va a ser el cargador que se mostrar\u00e1 hasta que se cargue el contenido, este desaparecer\u00e1 cuando se cargue el contenido, y otro componente denominado PostCard.js<\/em>, que ser\u00e1 la tarjeta que nos traer\u00e1 toda la informaci\u00f3n de cada uno de los posts<\/strong>.<\/p>\n\n\n\n

Las sintaxis de cada uno de ellos ser\u00e1n las siguientes:<\/p>\n\n\n\n

Sintaxis del componente Title.js<\/em>.<\/p>\n\n\n\n

import api from \"..\/helpers\/wp-api.js\";\n\nexport function Title() {\n  const $h1 = document.createElement(\"h1\");\n  $h1.innerHTML = `\n    <a href=\"${api.DOMAIN}\" target=\"_blank\" rel=\"noopener\">\n    ${api.NAME.toUpperCase()}\n    <\/a>\n    `;\n\n  return $h1;\n}<\/pre>\n\n\n\n
Sintaxis del componente Loader.js<\/em>.<\/p>\n\n\n\n
export function Loader() {\n  const $loader = document.createElement(\"img\");\n  $loader.src = \"app\/assets\/loader.svg\";\n  $loader.alt = \"Cargando...\";\n  $loader.classList.add(\"loader\");\n\n  return $loader;\n}<\/pre>\n\n\n\n
Sintaxis nueva de App.js<\/em>.<\/p>\n\n\n\n
import api from \".\/helpers\/wp-api.js\";\nimport { ajax } from \".\/helpers\/ajax.js\";\nimport { Title } from \".\/components\/Title.js\";\nimport { Loader} from \".\/components\/Loader.js\";\n\nexport function App() {\n  const d = document,\n    $root = d.getElementById(\"root\");\n\n  $root.appendChild(Title());\n  $root.appendChild(Loader());\n}<\/pre>\n\n\n\n
Tambi\u00e9n modificaremos la hoja de estilos<\/strong>, incluyendo m\u00e1s contenido a la misma. La sintaxis de style.css<\/em> quedar\u00e1 de la siguiente manera.<\/p>\n\n\n\n
\/* Reseteo de estilos *\/\nhtml {\n  box-sizing: border-box;\n  font-family: sans-serif;\n  font-size: 16px;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: inherit;\n}\n\nbody {\n  margin: 0;\n  overflow-x: hidden;\n}\n\na {\n  color: #01579b;\n  transition: color 0.3s ease;\n}\n\na:hover {\n  color: #00b00f;\n}\n\nh1 {\n  text-align: center;\n}\n\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\n.error {\n  padding: 1rem;\n  font-size: 150%;\n  font-weight: bold;\n  text-align: center;\n  color: #fff;\n  background-color: #dc3545;\n}\n\n.loader {\n  margin: 1rem auto;\n  display: block;\n  width: 4rem;\n  height: 4rem;\n}<\/pre>\n\n\n\n
Archivos<\/h2>\n\n\n\n
Estos son los archivos que hemos generado hasta ahora.<\/p>\n\n\n\n
spa-2<\/a>Descarga<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
En este cap\u00edtulo vamos a crear componentes, veremos diferentes t\u00e9cnicas. Todas las t\u00e9cnicas que estuvimos viendo en los cap\u00edtulos del DOM (crear…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1646,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1663","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"En este cap\u00edtulo vamos a crear componentes, veremos diferentes t\u00e9cnicas. Todas las t\u00e9cnicas que estuvimos viendo en los cap\u00edtulos del DOM (crear...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1663"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1663\/revisions"}],"predecessor-version":[{"id":1666,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1663\/revisions\/1666"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1646"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}