En esta clase, aprenderemos a organizar nuestra aplicación Pugstagram mediante una estructura clara y eficiente. Este es un aspecto crucial cuando buscamos desarrollar aplicaciones robustas y escalables. A través de una separación limpia de componentes, podemos gestionar el código de manera más eficiente y facilitar futuras actualizaciones.
¿Qué componentes identificamos en Pugstagram?
Al observar nuestra aplicación, podemos identificar varios componentes clave:
Header: Incluye el logo y un menú de navegación donde encontramos elementos como los "likes" y el perfil.
Main: El contenedor principal que alberga dos componentes hijos:
Timeline: Donde se muestran las fotos publicadas.
Sidebar: Un panel lateral que ofrece configuraciones adicionales de la cuenta.
Además, dentro del Main, tenemos subcomponentes como el perfil, un cajón de historias, carrusel de fotos y una sección de comentarios.
¿Cómo creamos la estructura en el editor de código?
Para empezar a construir nuestra aplicación, crearemos una carpeta llamada components, donde almacenaremos cada uno de estos componentes definidos. Este es un paso esencial para mantener una arquitectura ordenada y coherente.
Con los componentes identificados, es momento de integrarlos en nuestra aplicación Svelte. Utilizaremos la estructura de App.svelte para importar y preparar nuestros componentes, incluso antes de crearlos. Aquí te muestro cómo hacerlo:
<script>// Importamos los componentes desde la carpeta componentsimportHeaderfrom'../components/Header.svelte';importMainfrom'../components/Main.svelte';importSidebarfrom'../components/Sidebar.svelte';importTimelinefrom'../components/Timeline.svelte';</script>// Renderizamos los componentes importados<Header/><Main><Timeline/><Sidebar/></Main>
¿Cómo creamos y configuramos los componentes?
Con la estructura básica lista, procedemos a crear cada componente en la carpeta components. Asegúrate de seguir las convenciones de nombrado, utilizando mayúsculas para la inicial del componente.
Header.svelte:
<divclass="header">Header</div>
Main.svelte:
<divclass="main-container"><slot></slot></div>
Sidebar.svelte:
<divclass="sidebar">Sidebar</div>
Timeline.svelte:
<divclass="timeline">Timeline</div>
El uso de slot en Main.svelte permite que este componente reciba contenido anidado, como Timeline y Sidebar, facilitando una mayor flexibilidad en la construcción de la aplicación.
¿Cómo solucionamos errores al compilar?
Un error común al inicializar nuestra aplicación puede ser el no encontrar correctamente ciertos archivos debido a rutas mal configuradas. Verificar la consola del navegador nos brinda pistas sobre posibles errores, tales como faltas de acceso a directorios correctos. Para abordar esto, aseguramos que cada importación apunta al lugar correcto, y utilizamos ../ para navegar adecuadamente entre carpetas.
// Asegúrate de estar en el directorio correcto al importarimportHeaderfrom'../components/Header.svelte';
Con esta configuración, hemos logrado establecer una base sólida para nuestra aplicación, permitiéndonos incluso resolver errores de manera eficiente. ¡Sigue adelante con confianza! Exploraremos más funcionalidades en las próximas etapas.
Para crear varios archivos desde la consola puede utilzar el siguiente comando
touch {Header,Main,Timeline,Sidebar}.svelte
¡Gracias por el aporte!
¡Nunca pares de aprender! (Y practicar) ✨🦄
Gracias.
También les recomiendo la extensión Relative Path para vscode que permite buscar de forma sencilla los archivos para completar la ruta y no escribirla toda, aquí el enlace:
Lo guardan, le agregan permisos de ejecución y lo agregan a la variable PATH
La próxima vez que necesiten crear uno o varios componentes abren el terminal, ponen el nombre del archivo con el que guardaron este script, seguido de uno o varios nombres para los componentes que quieran crear.
Ejemplo:
Yo llame al archivo que contiene el script "newSvelteComponent", para crear dos componentes abro el terminal dentro de la carpeta components y ejecuto:
$ newSvelteComponent Componente1Componente2
como resultado se crean dos archivos llamados Componente1.svelte y Componente2.svelte, cada uno con la siguiente estructura:
pero no es fácil entender esos errores en consola y peor aun cuando están en ingles eso a uno lo estresa demasiado, ustedes que aconsejan compañeros aparte de leer el error, porque yo puedo leerlo pero y si no entiendo lo que dice, como me guío.
Puedes copiar el error y buscarlo en google. Te saldrán muchos resultados :)
PD: Trata de aprender inglés. En esta industria es casi obligatorio. Ánimo Javi.
Además de usar slots, también los puedes usar nombrados:
<SomeComponent><slot name="box"/></SomeComponent>
Y cuando lo quieres usar
<SomeComponent><div slot="box"><h2>Nunca pares de aprender</h2></div></SomeComponent/>
Esto es muy útil sobretodo cuando tu componente se usa en distintos lugares pero tiene variaciones que a lo mejor no puedes solucionar simplemente con props.
Aquí tienes más información: Named slots
¿Svelte no puede renderizar objetos anidados o por qué sucede este error?
Estuve avanzando en la App de Pugstagram antes de ver la solución del profesor. Este es código con el que empecé a probar.
<script>import{ onMount }from"svelte";constAPI_URL="https://us-central1-pugstagram-co.cloudfunctions.net/data";let data ={};<!--let user ={};-->onMount(async()=>{const response =awaitfetch(API_URL); data =await response.json();<!-- user = data.user;-->console.log(data.user.name);});</script><style>:global(body){margin:0;}.App{margin: auto;padding: 50px;width: max-content;}:global(h1){ font-family: sans-serif;}</style><div class="App"><!--<h1 class="App__Title">¡Hello,{user.name}!</h1>--><h1 class="App__Title">¡Hello,{data.user.name}!</h1></div>
Pero al correr el servidor tengo el siguiente error en el navegador. Webpack compila el proyecto sin problemas.
El console.logsi imprime el valor sin problema. Y si prueban con las líneas comentadas el problema no sucede. Pareciera ser solo con objetos anidados.
¡Hola!
El problema radica en el funcionamiento de JavaScript más allá de algo de Svelte. Lo que está pasando es lo siguiente, cuando intentas acceder a data.user cuando recién se monta el componente, data sólo es un objeto vacío y su propiedad user no existe.
Entonces, si pones data.user.name en el primer renderizado JS está intentando acceder a al valor de una propiedad que aún no existe.
Por esto dice que no puede acceder a la propiedad name de undefined. En el console log funciona porque para ese momento para propiedad user ya existe y esta trae dentro de si la propiedad name.
Espero que me haya dado a entender :D
Gracias @Luis_LiraC. Me queda más claro y tiene sentido.
De hecho probé imprimiendo data.user y efectivamente, primero imprime undefined y cuando recibe la respuesta del servidor imprime el [object, object].
Y con lo que mencionas pude corregirlo inicializando data con algunas propiedades.
<script>import{ onMount }from"svelte";constAPI_URL="https://us-central1-pugstagram-co.cloudfunctions.net/data";let data ={user:''};onMount(async()=>{...});</script><style>...</style><div class="App"><h1 class="App__Title">¡Hello,{data.user.name}!</h1></div>
De nuevo, muchas gracias. 😊🍍🍍
Necesitaré dar un repaso a las bases.
Lo que no entiendo es como svelte reconoce el main del html del main del div, ademas el main-container desaparece en tree de html
Oscar es de mis profesores favoritos en Platzi
Si tienen el siguiente error
Unexpected end ofJSON input while parsing near '...^2.1.0","electron-rel'
Ejecuten el comando npm cache clean --force y luego npm install esto funciono para mi
