Cursos Empresas Blog Live Conf Eventos Precios

0:009:00

Recursos

Resumen

¿Cómo estructuramos la aplicación Pugstagram?

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.

components/
  Header.svelte
  Main.svelte
  Sidebar.svelte
  Timeline.svelte

¿Cómo configuramos la aplicación Svelte?

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 components
import Header from '../components/Header.svelte';
import Main from '../components/Main.svelte';
import Sidebar from '../components/Sidebar.svelte';
import Timeline from '../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:

<div class="header">Header</div>

Main.svelte:

<div class="main-container">
    <slot></slot>
</div>

Sidebar.svelte:

<div class="sidebar">Sidebar</div>

Timeline.svelte:

<div class="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 importar
import Header from '../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.

Estructuración de Proyectos Svelte: Componentes y Configuración Básica

Curso de Svelte

Clase 16 / 26

Ver clases

Estructuración de Proyectos Svelte: Componentes y Configuración Básica

Curso de Svelte

Clase 16 de 26

Clase 16 / 26

Estructuración de Proyectos Svelte: Componentes y Configuración Básica

Curso de Svelte

Clase 16 / 26

Ver clases

<script> // Importamos los componentes desde la carpeta components import Header from '../components/Header.svelte'; import Main from '../components/Main.svelte'; import Sidebar from '../components/Sidebar.svelte'; import Timeline from '../components/Timeline.svelte'; </script> // Renderizamos los componentes importados <Header /> <Main> <Timeline /> <Sidebar /> </Main>

Comentarios

Cesar Galindo#1144752

Para crear varios archivos desde la consola puede utilzar el siguiente comando

touch {Header,Main,Timeline,Sidebar}.svelte

Arantxa Giovanna Rosas Del Valle#1157464

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:

https://marketplace.visualstudio.com/items?itemName=jakob101.RelativePath

Arantxa Giovanna Rosas Del Valle#1157426

Con Emmet puedes generar la estructura de forma sencilla con:

Header+Main&gt;Timeline+Sidebar

Wilson Fernando Antury Torres#1184046

<slot /> : Le indica al componente que aceptará componentes hijos.

ROGER VEGA#2474585

Se puede automatizar la creación de componentes con un script como el siguiente:

#!/bin/bash

for componentName in "$@" 
do
    echo "creating file $componentName.svelte"
    touch "$componentName.svelte"
    printf "<script>\n\n</script>\n\n<style>\n\n</style>\n\n<div class=\"$componentName\">\n\n</div>" > "$componentName.svelte"
done

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.

#!/bin/bash

for componentName in "$@" 
do
    echo "creating file $componentName.svelte"
    touch "$componentName.svelte"
    printf "<script>\n\n</script>\n\n<style>\n\n</style>\n\n<div class=\"$componentName\">\n\n</div>" > "$componentName.svelte"
done

...
  resolve: {
    extensions: ["*", ".mjs", ".js", ".svelte"],
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@Components": path.resolve(__dirname, "./src/components")
    }
  },
...

<script>
  import { onMount } from "svelte";

  const API_URL = "https://us-central1-pugstagram-co.cloudfunctions.net/data";

  let data = {};
  <!--let user = {};-->

  onMount(async () => {
    const response = await fetch(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>

<script>
  import { onMount } from "svelte";

  const API_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>

Comentarios

Cesar Galindo#1144752

Para crear varios archivos desde la consola puede utilzar el siguiente comando

touch {Header,Main,Timeline,Sidebar}.svelte

Arantxa Giovanna Rosas Del Valle#1157464

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:

https://marketplace.visualstudio.com/items?itemName=jakob101.RelativePath

Arantxa Giovanna Rosas Del Valle#1157426

Con Emmet puedes generar la estructura de forma sencilla con:

Header+Main&gt;Timeline+Sidebar

Wilson Fernando Antury Torres#1184046

<slot /> : Le indica al componente que aceptará componentes hijos.

ROGER VEGA#2474585

Se puede automatizar la creación de componentes con un script como el siguiente:

#!/bin/bash

for componentName in "$@" 
do
    echo "creating file $componentName.svelte"
    touch "$componentName.svelte"
    printf "<script>\n\n</script>\n\n<style>\n\n</style>\n\n<div class=\"$componentName\">\n\n</div>" > "$componentName.svelte"
done

Lo guardan, le agregan permisos de ejecución y lo agregan a la variable PATH

#!/bin/bash

for componentName in "$@" 
do
    echo "creating file $componentName.svelte"
    touch "$componentName.svelte"
    printf "<script>\n\n</script>\n\n<style>\n\n</style>\n\n<div class=\"$componentName\">\n\n</div>" > "$componentName.svelte"
done

...
  resolve: {
    extensions: ["*", ".mjs", ".js", ".svelte"],
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@Components": path.resolve(__dirname, "./src/components")
    }
  },
...

<script>
  import { onMount } from "svelte";

  const API_URL = "https://us-central1-pugstagram-co.cloudfunctions.net/data";

  let data = {};
  <!--let user = {};-->

  onMount(async () => {
    const response = await fetch(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>

<script>
  import { onMount } from "svelte";

  const API_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>

Comentarios (16)16 comentarios

Cesar Galindo

Hace 7 años

María José Ledesma

¡Gracias por el aporte! ¡Nunca pares de aprender! (Y practicar) ✨🦄

Jhon Carlos Colorado Angulo

Gracias.

Arantxa Giovanna Rosas Del Valle

Joel Bello

Que agradable sujeta

Header+Main>Timeline+Sidebar

Wilson Fernando Antury Torres

ROGER VEGA

Hace 6 años

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 Componente1 Componente2

como resultado se crean dos archivos llamados Componente1.svelte y Componente2.svelte, cada uno con la siguiente estructura:

<script>

</script>

<style>

</style>

<div class="nombreDelComponente">

</div>

Emmanuel Rodríguez

Para los gustosos de Emmet, les comparto el enlace de la documentación :

div.main>{Header}

Yo recomiendo utilizar un alias en webpack, a partir de la indexación de su archivo webpack, para manejar una indexación que utilizamos mucho:

Javier Romero

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.

John Cardenas

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.

Johan Stivens Suarez Galindo

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

Alvaro Rafael Guete Puello

Hace un mes

Una duda con la estructura mencionada en los recursos de la clase, si el Header y el Timeline están separados en App, ¿de qué forma compartirán los datos de los likes y el usuario entre ellos?

Kenneth Angulo L

Hace 2 meses

Estaba pasando saliba con el 'saide bar' o algo asi.

Pero 'dedugido' ??? En serio ??

Asbel Jose Herrera Morales

Hace 4 años

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

No se si te refieres a esta parte:

target: document.getElementById("main"),

Alli el codigo buscara especificamente el elemento de html que contenga el idenditificador 'main', bien se le podria usar cualquier otro nombre para identificarlo.

Y dentro del desarrollo, cuando usamos: <Main>

<TimeLine />

<Sidebar />

</Main>

Recordar que estamos trabajando con javascript, no HTML, asi que nos estamos refiriendo especificamente a un componente de svelte llamado Main. no se correspondenunca con una etiqueta de HTML.

Estoy siguiendo la clase pero usando svelte 5. Para cargar los hijos de Main usamos esta forma:

<script>

let { children } = $props();

</script>

<div class="Main">

</div>

Seba Cardoso

Hace 4 meses

Gracias

Fernando Alejandro Yerena Ramos

¿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.

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.

Luis Lira

¡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.

De nuevo, muchas gracias. 😊🍍🍍 Necesitaré dar un repaso a las bases.

Julian David Alzate Cuervo

Hace 5 años

Oscar es de mis profesores favoritos en Platzi

Francisco Imanol Suarez

Si tienen el siguiente error

Unexpected end of JSON input while parsing near '...^2.1.0","electron-rel'

Ejecuten el comando npm cache clean --force y luego npm install esto funciono para mi

Recursos

Resumen

Estructuración de Proyectos Svelte: Componentes y Configuración Básica

Estructuración de Proyectos Svelte: Componentes y Configuración Básica

Estructuración de Proyectos Svelte: Componentes y Configuración Básica

Progreso del curso

Introducción

Elementos básicos de Svelte

Configuración del proyecto

Desarrollo de la aplicación

Deployment

Estructuración de Proyectos Svelte: Componentes y Configuración Básica

Estructuración de Proyectos Svelte: Componentes y Configuración Básica

Recursos

Resumen

¿Cómo estructuramos la aplicación Pugstagram?

¿Qué componentes identificamos en Pugstagram?

¿Cómo creamos la estructura en el editor de código?

¿Cómo configuramos la aplicación Svelte?

¿Cómo creamos y configuramos los componentes?

¿Cómo solucionamos errores al compilar?

Comentarios

Recursos

Resumen

¿Cómo estructuramos la aplicación Pugstagram?

¿Qué componentes identificamos en Pugstagram?

¿Cómo creamos la estructura en el editor de código?

¿Cómo configuramos la aplicación Svelte?

¿Cómo creamos y configuramos los componentes?

¿Cómo solucionamos errores al compilar?

Comentarios