No tienes acceso a esta clase

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

Componentes en React: header

18/25
Recursos

Aportes 8

Preguntas 4

Ordenar por:

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

Para instalar automáticamente React en Astro:

npx astro add react

Astro instalará y configurará automáticamente React y todas sus dependencias, también se encargará de modificar los archivos de configuración automáticamente.

Astro Islands

El término Island se refiere a un componente de interfaz de usuario interactivo en una página estática. En la cual, pueden existir varias islas que puede ser desarrollada en diferentes Frameworks o librerías populares de JavaScript (React, Svelte, Vue, etc.), mezcladas en la misma página.
.

✨Concepto clave
El patrón de arquitectura de la se construyen las Islands se conoce como hidratación parcial o selectiva.

.

Funcionamiento de Astro

Si bien, Astro compila código para generar las páginas de nuestro sitio web, Astro no dispone de dicho código del lado del cliente, delegando dicha responsabilidad a un módulo de servidor para renderizar el contenido automáticamente, anticipando y eliminando JavaScript del build final.
.

✨Concepto clave
Con este mecanismo, Astro mantiene todos los sitios web rápidos de forma predeterminada para mejorar el rendimiento y SEO.

.
Sin embargo, Astro entiende que algunas veces, por interacción y anatomía de la Isla que renderiza, es necesario emplear y dejar un mínimo de JavaScript para convertir la página en un SPA o Single-Page-Application. De ello, Astro nos delega la elección mediante su declaración client .
.

Beneficio de las Islas

El beneficio principal de construir Astro con Islas es el rendimiento, minimizando el producto final para que sea rápido en la carga sin JavaScript que lo sature.
.
Por su parte, las Islas nos permiten desarrollar Frameworks o librerías populares que nos permitan heredar o integrar para no recrear la rueda un Sistema de Diseño.
.
Por último, con la directiva client , le indicamos a Astro exactamente cómo y cuándo renderizar cada componente.

Una pregunta Por alguna razón no me reconoce vsc las etiquetas como \<Header /> \<Base /> inclusive en index.astro no me reconoce la etiqueta \<Card /> Por lo que no se me importa el principio de \[...slug].astro el Header y la Base Alguien sabrá cuál puede ser el problema? Me falta algún pluggin o componente ? ![](https://static.platzi.com/media/user_upload/image-3aec7044-a510-43b9-b2f5-39393c48a0de.jpg)

React Integration

📌 Enlaces importante
@astrojs/react

Es importante tener todas las extensiones sin espacios: ```js content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'] ``` cuando lo estaba usando con espacios solo me estaba tomando la primera extension (astro): ```js content: ['./src/**/*.{astro, html, js, jsx, md, mdx, svelte, ts, tsx, vue}'] ```
si bien lo que hace Oscar esta muy bueno, yo recomiendo siempre que se pueda usar la exportación en la misma función: `export const Header = ({ ``title`` }: Props) => {` No hacer una exportación default: `export default Header;` a la hora de importarlo le puedes agregar cualquier nombre y en trabajos con otros equipos si se le coloca el nombre diferente puede ocasionar confusiones, hacerlo sin default obliga a usar el nombre "real" `import { Header } from "../../components/Header";`
Creo que sería bueno actualizar este curso ya que en la versión 4 de Astro existen muchos cambios.
Primero instalamos React en Astro con el siguiente comando: `npx astro add react` Y le aceptamos las configuraciones por defecto de React. Luego creamos el componente de React para el Header dentro de la carpeta \_Components\_: `src/components/` `┗━▶︎ Header.tsx <- Es un archivo .tsx por que estamos usando TypeScript` Dentro de `Header.tsx` creamos el componente de la siguiente manera: ```js import React from "react"; interface Props { title: string; } const Header = ({ title }: Props) => { return (
<h1 className="mb=4"> {title}
); }; export default Header; ``` Ahora lo importante, para poder renderizar este *Header* en todos los *Posts* deberíamos insertar el componente dentro del *Layout*: ```js --- import { getCollection } from "astro:content"; import Base from "../../layouts/Base.astro"; import Header from "../../components/Header"; export async function getStaticPaths() { const posts = await getCollection("tips"); return posts.map((post) => ({ params: { slug: post.slug }, props: post, })); } const post = Astro.props; const { Content } = await post.render(); --- <Base title="AstroBuild.tips"> // Inserto el componente dentro del Layout para poder verlo en todos los posts <Header title="AstroBuild.tips" /> <Content /> </Base> ```