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.

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

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 />`

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: 鉁╝dded initial template components

猬 Commit - feat: 鉁╝dded 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: 鉁╝dded initial template components

猬 Commit - feat: 鉁╝dded 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 />
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";`

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.

.