{"id":1671,"date":"2024-08-02T11:02:51","date_gmt":"2024-08-02T09:02:51","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1671"},"modified":"2024-08-02T11:02:52","modified_gmt":"2024-08-02T09:02:52","slug":"007-renderizado-dinamico","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/18-single-page-application-spa\/007-renderizado-dinamico\/","title":{"rendered":"007. Renderizado Din\u00e1mico"},"content":{"rendered":"\n

En el cap\u00edtulo anterior hab\u00edamos terminado de maquetar y programar la cabecera<\/strong> de nuestra SPA<\/strong>. En este cap\u00edtulo vamos a programar la parte que va fuera de la cabecera<\/strong>, que es donde vamos a tener los posts<\/strong> que traeremos del sitio WordPress<\/strong> sobre el que estemos consumiendo los datos.<\/p>\n\n\n\n\n\n\n\n

Crearemos un archivo denominado Posts.js<\/em>, dentro de la carpeta components<\/em> que traer\u00e1 todos los posts. Se trata de un componente funcional<\/strong>, de presentaci\u00f3n<\/strong>, es por ello que lo incluimos en dicha carpeta, y no en la de helpers<\/em>. Vamos a mandar a llamar al archivo posts.js<\/em> en el archivo App.js<\/em>.<\/p>\n\n\n\n

Tambi\u00e9n vamos a trabajar con el componente <\/strong>PostCard.js<\/em> que creamos en el cap\u00edtulo anterior, y que va a cobrar protagonismo en este cap\u00edtulo. Dicho archivo nos va a permitir imprimir una tarjeta por cada post que traigamos. Esta PostCard se va a generar en el DOM<\/strong> por cada post que haya recibido la petici\u00f3n. La sintaxis de nuestro archivo PostCard.js<\/em> va a tener el siguiente c\u00f3digo.<\/p>\n\n\n\n

Sintaxis de PostCard.js<\/em>.<\/p>\n\n\n\n

export function PostCard(props) {\n  let { date, slug, title, _embedded } = props;\n  let dateFormat = new Date(date).toLocaleDateString(),\n    urlPoster = _embedded[\"wp:featuredmedia\"]\n      ? _embedded[\"wp:featuredmedia\"][0].source_url\n      : \"app\/assets\/favicon.png\";\n\n  return `\n        <article class=\"post-card\">\n            <img src=\"${urlPoster}\" alt=\"${title.rendered}\" \/>\n            <h2>${title.rendered}<\/h2>\n            <p>\n                <time datetime=\"${dateFormat}\">${dateFormat}<\/time>\n                <a href=\"#\/${slug}\">Ver publicaci\u00f3n<\/a>\n            <\/p>\n        <\/article>\n    `;\n}<\/pre>\n\n\n\n
La sintaxis de nuestro archivo Posts.js<\/em> ser\u00eda el siguiente.<\/p>\n\n\n\n
export function Posts() {\n  const $posts = document.createElement(\"section\");\n  $posts.id = \"posts\";\n  $posts.classList.add(\"grid-fluid\");\n\n  return $posts;\n}<\/pre>\n\n\n\n
Asimismo hemos tenido que modificar el archivo App.js<\/em>, que queda con la siguiente sintaxis.<\/p>\n\n\n\n
import api from \".\/helpers\/wp-api.js\";\nimport { ajax } from \".\/helpers\/ajax.js\";\nimport { Header } from \".\/components\/Header.js\";\nimport { Loader } from \".\/components\/Loader.js\";\nimport { Posts } from \".\/components\/Posts.js\";\nimport { PostCard } from \".\/components\/PostCard.js\";\n\nexport function App() {\n  const d = document,\n    $root = d.getElementById(\"root\");\n\n  $root.appendChild(Header());\n  $root.appendChild(Posts());\n  $root.appendChild(Loader());\n\n  ajax({\n    url: api.POSTS,\n    cbSuccess: (posts) => {\n      console.log(posts);\n      let html = \"\";\n      posts.forEach((post) => {\n        html += PostCard(post);\n      });\n      d.querySelector(\".loader\").style.display = \"none\";\n      d.getElementById(\"posts\").innerHTML = html;\n    },\n  });\n}<\/pre>\n\n\n\n
Tambi\u00e9n vamos a modificar el archivo style.css<\/em>, que quedar\u00eda como sigue.<\/p>\n\n\n\n
html {\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.form-search {\n  margin: auto;\n  text-align: center;\n}\n\n.form-search input {\n  display: block;\n  margin: auto;\n  padding: 0.25rem;\n  border-radius: 0.25rem;\n  font-size: 1rem;\n}\n\n.grid-fluid {\n  margin: 1rem auto;\n  max-width: 90%;\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n}\n\n.header {\n  padding: 0.5rem;\n  position: sticky;\n  top: 0;\n  text-align: center;\n  background-color: #fff;\n}\n\n.header > * {\n  margin: 1rem auto;\n}\n\n.loader {\n  margin: 1rem auto;\n  display: block;\n  width: 4rem;\n  height: 4rem;\n}\n\n.post-card {\n  margin: 1rem auto;\n  padding: 1rem;\n  width: 80%;\n  background-color: #eceff1;\n}\n\n.post-card p {\n  display: flex;\n  justify-content: space-between;\n}<\/pre>\n\n\n\n
En este cap\u00edtulo comenzaremos a hacer peticiones as\u00edncronas<\/strong> para ver que recogemos la informaci\u00f3n, y poder pintar cada una de las tarjetas.<\/p>\n\n\n\n
Archivos<\/h2>\n\n\n\n
Los archivos que tenemos hasta este cap\u00edtulo son los siguientes:<\/p>\n\n\n\n
spa-4<\/a>Descarga<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
En el cap\u00edtulo anterior hab\u00edamos terminado de maquetar y programar la cabecera de nuestra SPA. En este cap\u00edtulo vamos a programar la…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1646,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1671","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 el cap\u00edtulo anterior hab\u00edamos terminado de maquetar y programar la cabecera de nuestra SPA. En este cap\u00edtulo vamos a programar la...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1671","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=1671"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1671\/revisions"}],"predecessor-version":[{"id":1674,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1671\/revisions\/1674"}],"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=1671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}