> ## Documentation Index
> Fetch the complete documentation index at: https://omer-914cc1c6.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, 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.

<div id="creating-a-custom-snippet">
  ## Crear un snippet personalizado
</div>

**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.

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

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.

```typescript snippets/my-snippet.mdx theme={null}
¡Hola mundo! Este es mi contenido que quiero reutilizar en todas las páginas. 
```

2. Importa el fragmento en tu archivo de destino.

```typescript destination-file.mdx theme={null}
---
title: Mi título
description: Mi descripción
---

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

## Encabezado

Lorem ipsum 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 snippets/my-snippet.mdx theme={null}
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.

```typescript destination-file.mdx theme={null}
---
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 snippet:

```typescript snippets/path/to/custom-variables.mdx theme={null}
export const myName = 'my name';

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

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

```typescript destination-file.mdx theme={null}
---
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}.
```

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

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

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

<Note>
  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.
</Note>

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

```typescript destination-file.mdx theme={null}
---
title: Mi título
description: Mi descripción
---

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

<MyJSXSnippet />
```