Fragmentos reutilizables

Fragmentos personalizados y reutilizables para mantener el contenido sincronizado

Uno de los principios fundamentales del desarrollo de software es DRY (Don’t Repeat Yourself, no repitas lo mismo), que también aplica a la documentación. Si te encuentras repitiendo el mismo contenido en varios lugares, crea un fragmento personalizado para mantenerlo sincronizado.

​

Crear un snippet personalizado

Condición previa: Debes crear tu archivo de snippet en el directorio snippets para que la importación funcione.

Cualquier página en el directorio snippets se tratará como un snippet y no se representará como una página independiente. Si deseas crear una página independiente a partir del snippet, importa el snippet en otro archivo y úsalo como un componente.

​

Exportación por defecto

1. Agrega contenido al archivo de snippet que quieras reutilizar. Opcionalmente, puedes agregar variables que se puedan completar mediante props cuando importes el snippet. En este ejemplo, nuestra variable es word.

snippets/my-snippet.mdx

¡Hola mundo! Este es mi contenido que quiero reutilizar en todas las páginas. 

2. Importa el fragmento en tu archivo de destino.

destination-file.mdx

---
title: Mi título
description: Mi descripción
---

import MySnippet from '/snippets/path/to/my-snippet.mdx';

## Encabezado

Lorem ipsum dolor sit amet.

<MySnippet/>

​

Exportar con variables

1. Opcionalmente, puedes añadir variables que se puedan completar mediante props al importar el fragmento. En este ejemplo, nuestra variable es word.

snippets/my-snippet.mdx

Mi palabra clave del día es {word}.

2. Importa el fragmento en tu archivo de destino con la variable. La propiedad se completará según tu especificación.

destination-file.mdx

---
title: Mi título
description: Mi descripción
---

import MySnippet from '/snippets/path/to/my-snippet.mdx';

## Encabezado

Lorem ipsum dolor sit amet.

<MySnippet word="bananas" />

​

Variables reutilizables

1. Exporta una variable desde tu archivo de snippet:

snippets/path/to/custom-variables.mdx

export const myName = 'my name';

export const myObject = { fruit: 'strawberries' };

2. Importa el fragmento desde el archivo de destino y usa la variable:

destination-file.mdx

---
title: Mi título
description: Mi descripción
---

import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';

Hola, mi nombre es {myName} y me gusta {myObject.fruit}.

​

Fragmentos de JSX

1. Exporta un componente JSX desde tu archivo de fragmentos. (Consulta Componentes de React para obtener más información):

snippets/my-jsx-snippet.jsx

export const MyJSXSnippet = () => {
  return (
    <div>
      <h1>¡Hola, mundo!</h1>
    </div>
  )
}

Importante: Al crear fragmentos de JSX, utiliza la sintaxis de función flecha (=>) en lugar de declaraciones de función. La palabra clave function no es compatible en este contexto.

2. Importa el fragmento desde tu archivo de destino y utiliza el componente:

destination-file.mdx

---
title: Mi título
description: Mi descripción
---

import { MyJSXSnippet } from '/snippets/my-jsx-snippet.jsx';

<MyJSXSnippet />