No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Componentes en Astro

10/25
Recursos

Aportes 8

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

📝El sistema de maquetado de Astro es muy parecido a Vue o Svelte, y con el tema de los estilos también.
Por ejemplo, los estilos que viven dentro de un componente son por defecto locales, es decir, no afectan a otros componentes de tu sitio. Si bien siempre es recomendable usar estilos locales para la mayoría de los casos, eventualmente puedes encontrar una razón válida para escribir CSS global. Puedes desactivar el CSS con alcance local predeterminado con el atributo <style is:global>.

<style is:global>
  /* Global, entregada tal como está al navegador.
     Se aplica a todas las etiquetas <h1> de tu sitio web. */
  h1 { color: red; }
</style>

También puedes mezclar reglas de CSS globales y locales en la misma etiqueta <style> usando el selector :global(). Esto se convierte en un patrón poderoso para aplicar estilos CSS a los elementos hijos de tu componente.

<style>
  /* Con alcance solo a este componente */
  h1 { color: red; }
  /* Mixta: se aplica solo a los elementos `h1` hijos. */
  article :global(h1) {
    color: blue;
  }
</style>
<h1>Title</h1>
<article><slot /></article>

👀RECUERDA ⚠️:

Los estilos locales deben usarse con la mayor frecuencia posible. Los estilos globales deben usarse solo cuando sea necesario.

Al profesor se le olvidó enseñarnos a importar y colocar los componentes de forma manual. Imports: `import Header from '../components/Header.astro';` `import Hero from '../components/Hero.astro';` Components: `<Header title="AstroBuild.tips" />` `<Hero />`

Me salió esto:

lo solucioné colocando !important

h1 {
		font-size: 3rem !important;
		font-weight: 800 !important;
		margin: 0;
	}

No se si sea lo más óptimo pero me sirvió para continuar a la siguiente clase. Si alguien tiene una mejor solución me compenta. Gracias de antemano

Si no pueden visualizar el componente header, recuerden agregar la siguiente linea: De donde tomamos el titulo originalmente `<Header title="AstroBuild.tips"/>` Si sigue sin poder visualizarse es posible que no se importara el componente de manera automatica, pero no pasa nada, vayamos a la parte superior de nuestro index (donde colocamos el js) e importemos el componente con la siguiente linea: `import Header from "../components/Header.astro";`

Desarrollo de Componentes

ⴵ Repositorio: Coffeeroasters

Del sitio documentado en el Figma, podemos decir de manera preliminar el siguiente orden de elementos visuales:
.

.
De manera genérica, podemos asumir que todo es un componente. Sin embargo, en desarrollo esa asunción es equivocada puesto que la diferencia entre un componente y una sección de nuestro sitio es la utilidad o interacción.
.

ℹ️ Definición
Un componente es una funcionalidad independiente, cuya función principal radica en la interactividad visual por interfaz de nuestros usuarios o audiencias finales.

.
Con ello en mente, tendríamos que un componente a partir de nuestro desarrollo serían:

  • Menu navigation. Del cual. albergará un menú como navegación para asistir en dicha utilidad con el usuario.
  • Button. Del cual, en este apartado será un CTA (Call-To-Action).

.

✨ Concepto clave
Un componente se puede replicar y utilizar según una jerarquía o composición.

.
Cabe aclarar que nuestro Hero, no es un componente puesto que es en sí mismo una sección narrativa de nuestro sitio y servirá para disponer ciertos titulares según sea la intención del producto web.
.

Creación de Tema con Tailwind

⬢ Commit - feat: ✨added initial template components

⬢ Commit - feat: ✨added initial styles components

.

✨ Concepto clave
Una herramienta se nombra con su contexto para denotar tecnologías, en su lugar simplemente mencionarlas, es decir, Tailwind CSS se refiere que dicha herramienta es para estilos de CSS; así como ReactJS.

.
Para trabajar con componentes en Tailwind, tenemos 3 opciones para desarrollarlos: locales, utilidades en línea o en plugins. Cada método presentará o armonizará con alguna regla que se acuerde durante desarrollo.
.
En mi caso, presento a los desarrollo de estilos en local cuando el componente no presenta una variación o jerarquía de estilos, segú nuestro sistema de diseño.
.
Por ejemplo:
.

.
De aquí,mencionamos que, por BEM, tendríamos un componente con 1 modificador, por lo que:

  • button sería nuestro diseño base o por default
  • button--disabled sería nuestro modificador dado por atributo disabled

.
En el caso del hover, no se suele desarrollar como un modificador sino como un adicionable a nuestro componente base y seguido por sus diferentes variaciones.
.
./src/components/Button.astro

---
const { text = 'Click me' } = Astro.props
---

<button>
    <span>{text}</span>
</button>

<style>
    button {
        @apply min-w-[161px] max-w-[196px];
        @apply py-1 px-2;
        @apply font-fraunces text-body-large font-bold text-white;
        @apply rounded-lg bg-jade-500 hover:bg-jade-600;
    }
</style>

.

.
Al hablar de componentes por composición, tenemos nuestro Menu Navigation, el cual estará conformado por Items Navigation, los cuales serán cruciales para la navegación del sitio.
.
De aquí mencionamos, que por BEM, tendríamos un componente que contiene a otro componente. Sin embargo, no presenta una complejidad para manterlo en separado de este mismo, es decir, no posee un estado.
.

✨ Concepto clave
Un estado es una característica independizada por los componentes web, dichos estados poseen vínculos dependientes según sea la regla de negocio o de diseño que se le requiera.

.
./src/components/MenuNavigation.astro

<nav class='menu-navigation'>
    <a class='menu-navigation__item--active' href='#'>Home</a>
    <a class='menu-navigation__item' href='#'>About us</a>
    <a class='menu-navigation__item' href='#'>Create your plan</a>
</nav>

Para su orden futura en nuestro tema de diseño, nuestros componentes tendrán sus estilos como componentes para emplear la herramienta PostCSS de Tailwind.
.
./src/styles/components/header.cjs

const plugin = require('tailwindcss/plugin')

module.exports = plugin(function ({ addComponents }) {
    addComponents({
        '.menu-navigation': {
            '@apply flex gap-2': {},

            '&__item': {
                '@apply py-0.5 px-0.25': {},
                '@apply text-gray hover:text-dark-blue': {},
                '@apply hover:border-jade-500 hover:border-b-2 hover:border-solid':
                    {},

                '&--active': {
                    '@apply py-0.5 px-0.25': {},
                    '@apply border-jade-500 border-b-2 border-solid': {},
                },
            },
        },
    })
})

Finalmente, nuestro Hero, como se mencionó, será una sección que poseerá un CTA como Button. Significando en una jerarquía con BEM, de la siguiente forma:

---
import Default from '@layouts/default.astro'
import MenuNavigation from '@components/MenuNavigation.astro'
import Button from '@components/Button.astro'
---

<Default>
    <header>
        <img src='/images/logo.svg' alt='Coffeeroasters Logo' />
        <MenuNavigation />
    </header>
    <main>
        <section class='hero bg-image-hero'>
            <h1 class='hero__title'>Great coffee made simple.</h1>
            <p class='hero__description'>Start your mornings with the world's best coffees. Try our expertly curated artisan coffees from our best roasters delivered directly to your door, at your schedule.</p>
            <Button text='Create your plan' />
        </section>
    </main>
</Default>

.

ⴵ Repositorio: Coffeeroasters

⬢ Commit - feat: ✨added initial template components

⬢ Commit - feat: ✨added initial styles components

cuando subieron este curso jeje llegue aqui por google jeje

import Header from "../components/Header.astro"; import Hero from "../components/Hero.astro"; para que reconozca el llamado de \<Hero />

Componentes en Astro

En el desarrollo de aplicaciones web, generalmente adjudicamos a pequeñas piezas interactivas una gran importancia de desarrollo, comúnmente llamadas como componentes.
.

ℹ️ Definición
Un componente es una funcionalidad independiente, cuya función principal radica en la interactividad visual por interfaz de nuestros usuarios o audiencias finales.

.
Cuando desarrollamos una vista de nuestro sitio o aplicación, tenemos que tomar a consideración de 2 aspectos importantes:

  • Definición de estilos por jerarquía, composición o locales.
  • Creación de componentes independientes o secciones visuales.

.
Ambos, nos permiten dividir nuestra visión en funcionalidades, interacciones o aspectos visuales para organizar nuestros entregables en desarrollo.
.

Definición de estilos

Al definir estilos, podemos emplear metodologías de construcción basados en reglas como BEM (Bloque-Elementos-Modificar) y/o Atomic Design. Con ello, ganamos versatilidad, visión y escalabilidad para agregar, modificar o mezclar complejidades en desarrollo.
.
Al abstraer nuestros estilos, tenemos la elección de 3 estilos de diseños:

  • Estilos basados en jerarquía, se refieren a estilos cuya definición están delimitados por las variaciones que tendrá nuestro recurso(s) visual(es).
  • Estilos basados por composición, se refieren a estilos delimitados por piezas clave, o anatomía, que tendrá nuestro recurso visual.
  • Estilos locales, se refieren a estilos limitados por el mismo componente con ciertas variaciones como modificadores.

.

Creación de componentes

Recordemos que un componente será una parte fundamental en la navegación o interacción de nuestro producto web. En ocasiones, un componente generará complejidades para su construcción por su implicación en la redacción vs la utilidad.
.
En redacción, un componente será considerado como una sección en la narrativa de nuestro producto, sirviendo de contexto (promociones, realce de vocablos, etc.). Así mismo, un componente en utilidad, implicará una interacción nuclear como CTA (Call-To-Action), sin alterar la narrativa de nuestro producto.
.
Un componente por utilidad, lo podemos agrupar por el nivel de complejidad o dependencia de entradas, significado en su distribución de nuestro proyecto (componentes base y componentes wrappers, por ejemplo).
.

Estructura de Componentes Astro

Un componente de Astro se compone de dos partes principales: una sección de script y la estructura del componente.

---
// Component Script (JavaScript/TypeScript)
---
<!-- Component Template (HTML + JS Expressions) -->

Astro usa un delimitador para identificar código (—) . Si alguna vez ha escrito Markdown, es posible que ya esté familiarizado con un concepto similar llamado Frontmatter.

En esta sección, podemos incluir:

  • Anexo de otros componentes de Astro y de otros Frameworks/librerías de JavaScript.
  • Obtener contenido de una API o driver para conexión de base de datos.

.

✨ Concepto clave
La sección de script deberá garantizar desarrollo mínimo elemental del componente, porque para mayor desarrollo ser recomienda el uso de otros Frameworks como NextJS para React o NuxtJS para Vue, etc.

.
Para la estructura del componente, Astro nos permite representar de manera directa en HTML. Sin embargo, la sintaxis de la plantilla de componentes de Astro también admite expresiones de JavaScript, etiquetas Astro <style> y <script>, componentes importados y directivas especiales de Astro, etc.
.

✨ Concepto clave
Los datos y valores definidos en el script del componente se pueden usar en la plantilla del componente para producir HTML creado dinámicamente.

.