{"id":1651,"date":"2024-08-02T10:55:10","date_gmt":"2024-08-02T08:55:10","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1651"},"modified":"2024-08-02T10:55:11","modified_gmt":"2024-08-02T08:55:11","slug":"002-estructura-de-proyecto-assets-helpers-y-components","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/18-single-page-application-spa\/002-estructura-de-proyecto-assets-helpers-y-components\/","title":{"rendered":"002. Estructura de Proyecto (assets, helpers y components)"},"content":{"rendered":"\n<p>Las <strong>SPA<\/strong> son un <strong>estilo<\/strong>, una <strong>forma<\/strong>, un <strong>paradigma de programar<\/strong>, como tal, no necesitamos m\u00e1s teor\u00eda, y podemos comenzar a hacer una <strong>SPA<\/strong>. Lo que vamos a necesitar para crear nuestras <strong>SPAs<\/strong> es:<\/p>\n\n\n\n<!--more-->\n\n\n\n<ul class=\"wp-block-list\">\n<li>Saber manipular muy bien el <strong>DOM<\/strong>, teniendo claros los conceptos de <strong>gram\u00e1tica<\/strong> y <strong>estructura del lenguaje<\/strong>.<\/li>\n\n\n\n<li>Dominar la <strong>programaci\u00f3n as\u00edncrona<\/strong> y las peticiones con <strong>AJAX<\/strong>, <strong>FETCH<\/strong>, <strong>Axios<\/strong>.<\/li>\n\n\n\n<li>Entender lo que es un <strong>API REST<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p>La teor\u00eda, como vemos, es un c\u00famulo de todos los conocimientos que hemos ido viendo en cap\u00edtulos anteriores de este curso.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Nota<\/strong>: a nuestros <strong>SPAs<\/strong> les importan poco en qu\u00e9 est\u00e9 programado o como est\u00e1 hecho el <strong>backend<\/strong> mientras este le exponga la informaci\u00f3n en una <strong>API<\/strong> (normalmente en formato <strong>JSON<\/strong>), las <strong>SPA<\/strong> pueden trabajar por s\u00ed solas.<\/p>\n<\/blockquote>\n\n\n\n<p>Vamos a trabajar un ejercicio en el que vamos a hacer una <strong>SPA<\/strong> que consuma los datos de la informaci\u00f3n de un sitio hecho en <strong>WordPress<\/strong>. Vamos a crear un Home t\u00edpico de <strong>WordPress<\/strong> donde venga una tarjeta por cada uno de los art\u00edculos que estemos consumiendo, y cuando demos clic a esa tarjeta, accederemos al contenido de dicho <strong>art\u00edculo<\/strong> o <strong>post<\/strong>, pero lo vamos a hacer con la t\u00e9cnica de la <strong>SPA<\/strong>.<\/p>\n\n\n\n<p>En este cap\u00edtulo vamos a ver como vamos a crear la <strong>estructura de carpetas<\/strong> de nuestro <strong>SPA<\/strong>, como vamos a desarrollar los <strong>componentes<\/strong>, los <strong>c\u00f3digos auxiliares<\/strong>, y cuando pasemos de este Home al contenido de los art\u00edculos, vamos a cambiar la <strong>URL<\/strong> con la ayuda del <strong>hash<\/strong> (<strong><em>#<\/em><\/strong>) para que, si un usuario quiere guardar esa <strong>URL<\/strong> en sus favoritos, pueda hacerlo sin problema.<\/p>\n\n\n\n<p>En nuestro <strong>servidor web<\/strong> crearemos una carpeta denominada <em>spa<\/em>, donde incluiremos todos los archivos y carpetas. El primer archivo que crearemos ser\u00e1 el t\u00edpico <em>index.html<\/em>, que ser\u00e1 el archivo que cargar\u00e1 de contenido nuestra <strong>SPA<\/strong>. Dentro de la carpeta <em>spa<\/em> crearemos otra carpeta denominada <em>app<\/em>, donde va a estar concentrada toda la aplicaci\u00f3n de nuestro proyecto. Esta carpeta a su vez tendr\u00e1 otras subcarpetas que van a ayudar a poder de manera organizada categorizar los diferentes archivos que va a tener nuestra SPA.<\/p>\n\n\n\n<p>Dentro de nuestra carpeta <em>app<\/em> crearemos una subcarpeta denominada <em>assets<\/em>, donde vamos a introducir cualquier recurso que necesitemos para trabajar con nuestra aplicaci\u00f3n, como son <strong>im\u00e1genes<\/strong>, <strong>vectores<\/strong>, <strong>hojas de estilo en cascada<\/strong>. Esto en otras herramientas los ponen como la carpeta <em>public<\/em>. Adicionalmente a esta carpeta <em>assets<\/em>, crearemos otra denominada <em>components<\/em>, Tambi\u00e9n, dentro de nuestra carpeta <em>app<\/em>, crearemos una carpeta denominada <em>helpers<\/em> (auxiliares), que son todos esos c\u00f3digos que no son componentes visuales, pero que son fragmentos de c\u00f3digo que nos ayudan a resolver algo en particular.<\/p>\n\n\n\n<p>En la carpeta <em>assets<\/em> vamos a crear un archivo <em>favicon <\/em>para el <em>favicon.png<\/em> de nuestra <strong>SPA<\/strong>, y un archivo vectorial llamado <em>loader.svg<\/em>. Tambi\u00e9n vamos a incluir los estilos <strong>CSS<\/strong>, creando un archivo <em>style.css<\/em>. Por el momento, las carpetas <em>components<\/em> y <em>helpers<\/em> quedar\u00e1n vac\u00edas.<\/p>\n\n\n\n<p>En la carpeta <em>app<\/em> vamos a crear dos archivos importantes, que son <em>App.js<\/em>. El archivo est\u00e1 escrito con <strong>UpperCamelCase<\/strong>, como si fuera un <strong>clase<\/strong>, porque en <strong>React<\/strong> est\u00e1 escrito de esta manera, y otro archivo denominado <em>index.js<\/em>, que es el archivo principal <strong>Javascript<\/strong>, que va a desencadenar toda la programaci\u00f3n de la <strong>SPA<\/strong>, y no se crea con <strong>UpperCamelCase<\/strong> porque es un archivo normal, no es un <strong>componente<\/strong>. <em>App.js<\/em> no se mete en la carpeta <em>components<\/em> porque \u00e9ste representa el componente padre de los componentes de nuestra aplicaci\u00f3n, y por norma, el componente padre (<em>App.js<\/em>) m\u00e1s el <em>index.js<\/em> se ponen en la carpeta padre (<em>app<\/em>) de nuestra aplicaci\u00f3n.<\/p>\n\n\n\n<p>El archivo <em>index.js<\/em> es el que desembocar\u00e1 la invocaci\u00f3n hacia los otros <strong>componentes<\/strong>, manejaremos la <strong>delegaci\u00f3n de los eventos<\/strong>. En <em>App.js<\/em> mandaremos a llamar a todos los <strong>componentes<\/strong> que necesitemos para pintar la interfaz de usuario.<\/p>\n\n\n\n<p>Veamos la sintaxis de nuestro archivo <em>index.html<\/em>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&nbsp; &lt;head&gt;\n&nbsp; &nbsp; &lt;meta charset=\"UTF-8\" \/&gt;\n&nbsp; &nbsp; &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n&nbsp; &nbsp; &lt;title&gt;Vanilla JS SPA&lt;\/title&gt;\n&nbsp; &nbsp; &lt;link rel=\"stylesheet\" href=\"app\/assets\/style.css\" \/&gt;\n&nbsp; &nbsp; &lt;link rel=\"icon\" href=\"app\/assets\/favicon.png\" \/&gt;\n&nbsp; &lt;\/head&gt;\n\n&nbsp; &lt;body&gt;\n&nbsp; &nbsp; &lt;main id=\"root\"&gt;&lt;\/main&gt;\n&nbsp; &nbsp; &lt;script src=\"app\/index.js\" type=\"module\"&gt;&lt;\/script&gt;\n&nbsp; &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p>Vamos a crear un primer <strong>componente<\/strong> en <em>App.js<\/em>, que es donde se va a cargar la aplicaci\u00f3n, y que tendr\u00e1 la siguiente sintaxis.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">export function App() {\n&nbsp; document.getElementById(\n&nbsp; &nbsp; \"root\"\n&nbsp; ).innerHTML = `&lt;h1&gt;Bienvenidos a mi primer SPA con Vanilla Javascript&lt;\/h1&gt;`;\n}<\/pre>\n\n\n\n<p>Y nuestro archivo <em>index.js<\/em> importar\u00e1 la funci\u00f3n que hemos creado en <em>App.js<\/em>. Tendr\u00e1 la siguiente sintaxis<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import { App } from \".\/App.js\";\n\nconst d = document;\n\nd.addEventListener(\"DOMContentLoaded\", App);<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Esquema<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>spa\n<ul class=\"wp-block-list\">\n<li>index.html<\/li>\n\n\n\n<li>app\n<ul class=\"wp-block-list\">\n<li>App.js<\/li>\n\n\n\n<li>index.js<\/li>\n\n\n\n<li>assets\n<ul class=\"wp-block-list\">\n<li>favicon.png<\/li>\n\n\n\n<li>loader.svg<\/li>\n\n\n\n<li>style.css<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>components<\/li>\n\n\n\n<li>helpers<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Las SPA son un estilo, una forma, un paradigma de programar, como tal, no necesitamos m\u00e1s teor\u00eda, y podemos comenzar [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1646,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1651","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":"Las SPA son un estilo, una forma, un paradigma de programar, como tal, no necesitamos m\u00e1s teor\u00eda, y podemos comenzar [&hellip;]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1651","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=1651"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1651\/revisions"}],"predecessor-version":[{"id":1653,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1651\/revisions\/1653"}],"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=1651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}