No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

MDX

14/25
Recursos

Aportes 10

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Si el VSCode no les reconoce la sintaxis de los archivos .mdx, instalen la siguiente extensi贸n para que puedan reconocer el formato de Markdown:
https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx

Para la instalaci贸n autom谩tica de MDX en Astro:

npx astro add mdx

Con esto, Astro autom谩ticamente instalar谩 y configurar谩 los archivos necesarios para que funcionen los archivos MDX, tambi茅n agregar谩 la configuraci贸n necesario en el archivo de configuraci贸n de Astro de forma autom谩tica.

Para usar plantillas o layouts dentro de un archivo .mdx usamos el frontmatter layout.
https://docs.astro.build/en/core-concepts/layouts/#markdownmdx-layouts

---
title: "Contact"
layout: "../layouts/Base.astro"
---
export const date = new Date('2025-08-08'); // JS

# Hola Mundo!

La hora de publicaci贸n de este blog es: {date}

```jsx
const date = new Date('2024-01-01')
	```

MDX

MDX permite usar JSX en su contenido markdown, que nos permite importar componentes, como gr谩ficos interactivos o alertas, e incrustarlos en nuestro contenido, haciendo que el escribir contenido en Markdown con componentes sea una maravilla.
.

馃搶 Referencia
Markdown for the component era | MDX

.

Astro y MDX

Para integrar MDX en alg煤n proyecto de Astro, de forma autom谩tica lanzamos el binario astro add mdx , configurando dicha herramienta como dependencia.
.
Para probar la integraci贸n, podemos generar una p谩gina con el formato .mdx :

export const title = 'My first MDX post'

# {title}

Frontmatter con MDX

La integraci贸n de Astro MDX incluye soporte para usar frontmatter en MDX de manera predeterminada.
.

鉁 Concepto clave
frontmatter es una abstracci贸n de la metadata vinculada al componente o p谩gina.

.
Para su empleo, anexamos el bloque de metadata y utilizado el objeto frontmatter:

---
layout: '../layouts/default.astro'
title: 'My first MDX post'
---

# {frontmatter.title}

Componentes con MDX

Despu茅s de instalar la integraci贸n MDX, es posible importar y usar tanto los componentes de Astro como los componentes de los Frameworks/Librer铆as populares como ReactJS o VueJS, donde 茅stos 煤ltimos necesitan incluir como propiedad client:directive .

---
layout: ../layouts/BaseLayout.astro
title: About me
---
import Button from '../components/Button.astro';
import ReactCounter from '../components/ReactCounter.jsx';

I live on **Mars** but feel free to <Button title="Contact me" />.

Here is my counter component, working in MDX:

<ReactCounter client:load />

Terms and Conditions

En caso o tal de que no les funcione cuando y les aparezca el error del ; , lo que hice fue instalar la ultima versi贸nde MDX con npx astro add mdx, que se encuentra en al documentaci贸n de astro. [@astrojs/mdx | Docs](https://docs.astro.build/es/guides/integrations-guide/mdx/)
## **Estructura de archivos en el directorio** `src` **de Astro** El directorio `src` en Astro contiene la estructura principal de tu proyecto. Aqu铆 se encuentran los archivos y carpetas que definen la organizaci贸n, el contenido y la l贸gica de tu sitio web. **A continuaci贸n, se describe el contenido de cada carpeta dentro de** `src`**:** **1.** `components`**:** * Contiene componentes reutilizables que se pueden usar en diferentes p谩ginas de tu sitio web. Cada componente debe estar en una carpeta individual con el nombre del componente. * Los archivos dentro de cada carpeta de componente pueden incluir: * `index.astro`: El archivo principal del componente que define su contenido y comportamiento. * `style.css`: Los estilos CSS espec铆ficos del componente. * `script.js`: El c贸digo JavaScript que define la l贸gica del componente. **2.** `layouts`**:** * Define las estructuras de p谩gina principales que se utilizan en tu sitio web. Cada layout debe estar en una carpeta individual con el nombre del layout. * Los archivos dentro de cada carpeta de layout pueden incluir: * `index.astro`: El archivo principal del layout que define su estructura HTML. * `style.css`: Los estilos CSS espec铆ficos del layout. **3.** `pages`**:** * Contiene las p谩ginas individuales de tu sitio web. Cada p谩gina debe estar en un archivo `.astro` individual con el nombre de la p谩gina. * Las p谩ginas pueden usar componentes y layouts para definir su contenido y estructura. **4.** `public`**:** * Contiene archivos est谩ticos que se sirven sin procesar por Astro. Estos pueden incluir im谩genes, archivos JavaScript, CSS o cualquier otro tipo de archivo que no requiera procesamiento. **5.** `static`**:** * Similar a `public`, pero estos archivos se copian sin modificaciones a la carpeta de salida durante la compilaci贸n. Se pueden usar para almacenar archivos que no necesitan ser procesados por Astro, como im谩genes o archivos de configuraci贸n. **6.** `styles`**:** * Contiene los estilos CSS globales para tu sitio web. **7.** `utils`**:** * Contiene archivos JavaScript que se pueden usar en diferentes partes de tu sitio web para compartir l贸gica o funcionalidades comunes. **L贸gica del sistema de archivos:** Astro utiliza un sistema de archivos basado en componentes para organizar el contenido de tu sitio web. Los componentes son unidades reutilizables de c贸digo que se pueden combinar para crear p谩ginas y layouts. **Las principales caracter铆sticas del sistema de archivos de Astro son:** * **Enrutamiento:** Astro usa la estructura de archivos para determinar la ruta de cada p谩gina. La ruta se define por el nombre del archivo `.astro` dentro de la carpeta `pages`. * **Componentes:** Los componentes se pueden usar para crear contenido modular y reutilizable. * **Layouts:** Los layouts definen la estructura general de las p谩ginas de tu sitio web. * **Procesamiento de archivos:** Astro procesa los archivos `.astro` para generar HTML, CSS y JavaScript. **Relaciones:** * **Pages:** * **Utilizan** componentes para definir su contenido. * **Utilizan** layouts para definir su estructura. * **Components:** * **Se pueden usar** en diferentes p谩ginas. * **No tienen** una relaci贸n directa con layouts. * **Layouts:** * **No tienen** contenido propio. * **Se utilizan** para definir la estructura de las p谩ginas que los **utilizan**. **En resumen:** * **Pages:** Definen el contenido de las p谩ginas. * **Components:** Definen unidades reutilizables de contenido. * **Layouts:** Definen la estructura general de las p谩ginas. **Ejemplo:** Imagina que tienes una p谩gina web con una p谩gina de inicio, una p谩gina de blog y una p谩gina de contacto. * La p谩gina de inicio podr铆a usar un layout principal que define el encabezado, el pie de p谩gina y la barra lateral. * La p谩gina de blog podr铆a usar el mismo layout principal, pero con un contenido diferente en el 谩rea principal. * La p谩gina de contacto podr铆a usar un layout diferente con un formulario de contacto. **Los componentes se pueden usar en cualquiera de estas p谩ginas para agregar contenido reutilizable, como un bot贸n de llamada a la acci贸n o un widget de redes sociales.**
No queria usar mdx, pero tuv茅 que para usar `import { Image } from "astro:assets";` lo cual hizo mucho m谩s r谩pida mi web
Hola, me ayudan con este error error Expected ";" but found ":" File: C:/Users/user/Desktop/portafolio/astro/astrobuild.tips/src/pages/contact.mdx:2:5 Code: 1 | --- \> 2 | title: "Contact" | ^ 3 | --- 5 | export const date = new Date('2024-05-07'); Stacktrace: Error: Transform failed with 1 error: C:/Users/user/Desktop/portafolio/astro/astrobuild.tips/src/pages/contact.mdx:2:5: ERROR: Expected ";" but found ":" at failureErrorWithLog (C:\Users\user\Desktop\portafolio\astro\astrobuild.tips\node\_modules\vite\node\_modules\esbuild\lib\main.js:1649:15) at C:\Users\user\Desktop\portafolio\astro\astrobuild.tips\node\_modules\vite\node\_modules\esbuild\lib\main.js:847:29 at responseCallbacks.\<computed> (C:\Users\user\Desktop\portafolio\astro\astrobuild.tips\node\_modules\vite\node\_modules\esbuild\lib\main.js:703:9) at handleIncomingPacket (C:\Users\user\Desktop\portafolio\astro\astrobuild.tips\node\_modules\vite\node\_modules\esbuild\lib\main.js:762:9) at Socket.readFromStdout (C:\Users\user\Desktop\portafolio\astro\astrobuild.tips\node\_modules\vite\node\_modules\esbuild\lib\main.js:679:7) at Socket.emit (node:events:517:28) at addChunk (node:internal/streams/readable:335:12) at readableAddChunk (node:internal/streams/readable:308:9) at Readable.push (node:internal/streams/readable:245:10) at Pipe.onStreamRead (node:internal/stream\_base\_commons:190:23) error Expected ";" but found ":" File: C:/Users/user/Desktop/portafolio/astro/astrobuild.tips/src/pages/contact.mdx:2:5 Code: 1 | --- \> 2 | title: "Contact" | ^ 3 | --- 5 | export const date = new Date('2024-05-07'); Stacktrace: Error: Transform failed with 1 error: C:/Users/user/Desktop/portafolio/astro/astrobuild.tips/src/pages/contact.mdx:2:5: ERROR: Expected ";" but found ":" at failureErrorWithLog (C:\Users\user\Desktop\portafolio\astro\astrobuild.tips\node\_modules\vite\node\_modules\esbuild\lib\main.js:1649:15) at C:\Users\user\Desktop\portafolio\astro\astrobuild.tips\node\_modules\vite\node\_modules\esbuild\lib\main.js:847:29 at responseCallbacks.\<computed> (C:\Users\user\Desktop\portafolio\astro\astrobuild.tips\node\_modules\vite\node\_modules\esbuild\lib\main.js:703:9) at handleIncomingPacket (C:\Users\user\Desktop\portafolio\astro\astrobuild.tips\node\_modules\vite\node\_modules\esbuild\lib\main.js:762:9) at Socket.readFromStdout (C:\Users\user\Desktop\portafolio\astro\astrobuild.tips\node\_modules\vite\node\_modules\esbuild\lib\main.js:679:7) at Socket.emit (node:events:517:28) at addChunk (node:internal/streams/readable:335:12) at readableAddChunk (node:internal/streams/readable:308:9) at Readable.push (node:internal/streams/readable:245:10) at Pipe.onStreamRead (node:internal/stream\_base\_commons:190:23) (x2)

Y yo me estoy preguntando鈥

Ser谩 la fecha que pone Oscar aleatoria o habr谩 algo detr谩s? Alguna update de Platzi? Alg煤n lanzamiento nuevo? 馃

Qu茅 opinan?鈽癸笍