> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-add-i-to-quickstart-8818.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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”), que también aplica a la documentación. Si te encuentras repitiendo el mismo contenido en varios lugares, crea un fragmento personalizado para mantener tu contenido sincronizado.

<div id="creating-a-custom-snippet">
  ## Creación de un fragmento personalizado
</div>

**Condición previa**: Debes crear el archivo del fragmento en el directorio `snippets` para que la importación funcione.

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

<div id="default-export">
  ### Exportación predeterminada
</div>

1. Agrega contenido al archivo del fragmento que quieras reutilizar. Opcionalmente, puedes agregar variables que puedan completarse mediante props
   cuando importes el fragmento. En este ejemplo, nuestra variable es word.

```typescript fragmentos/mi-fragmento.mdx
¡Hola, mundo! Este es el contenido que quiero reutilizar en varias páginas. 
```

2. Importa el fragmento en tu archivo de destino.

```typescript archivo-destino.mdx
---
title: Mi título
description: Mi descripción
---

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

## Encabezado

Lorem impsum dolor sit amet.

<MySnippet/>

```

<div id="exporting-with-variables">
  ### Exportar con variables
</div>

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

```typescript fragmentos/mi-fragmento.mdx
Mi palabra 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.

```typescript archivo-destino.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" />

```

<div id="reusable-variables">
  ### Variables reutilizables
</div>

1. Exporta una variable desde tu archivo de fragmentos:

```typescript snippets/path/to/custom-variables.mdx
export const myName = 'mi nombre';

export const myObject = { fruit: 'fresas' };
```

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

```typescript archivo-destino.mdx
---
title: Mi título
description: Mi descripción
---

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

Hola, me llamo {myName} y me gusta {myObject.fruit}.
```

<div id="jsx-snippets">
  ### Fragmentos JSX
</div>

1. Exporta un componente JSX desde tu archivo de fragmento. (Consulta [Componentes de React](/es/react-components) para obtener más información):

```js icon=square-js snippets/my-jsx-snippet.jsx
export const MyJSXSnippet = () => {
  return (
    <div>
      <h1>¡Hola, mundo!</h1>
    </div>
  )
}
```

<Note>
  Importante: Al crear fragmentos JSX, usa la sintaxis de funciones flecha (`=>`) en lugar de declaraciones de función. La palabra clave `function` no está admitida en este contexto.
</Note>

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

```typescript archivo-de-destino.mdx
---
title: Mi título
description: Mi descripción
---

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

<MyJSXSnippet />
```