> ## Documentation Index
> Fetch the complete documentation index at: https://www.mintlify.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Fragmentos reutilizables
> Crea fragmentos de contenido reutilizables con variables para mantener la coherencia entre páginas y reducir la duplicación en tus archivos MDX.
Uno de los principios fundamentales del desarrollo de software es DRY (Don't Repeat Yourself), que también se aplica a la documentación. Si te encuentras repitiendo el mismo contenido en varios lugares, crea un fragmento personalizado para ese contenido. Los fragmentos incluyen contenido que puedes importar en otros archivos para reutilizarlo. Tú controlas dónde aparece el fragmento en una página. Si alguna vez necesitas actualizar el contenido, solo tendrás que editar el fragmento en lugar de cada archivo donde se use.
Actualmente, los fragmentos no son compatibles con el editor web. Para usar fragmentos, edita tus archivos MDX localmente con la CLI o envía las importaciones de fragmentos directamente a tu repositorio.
## Cómo funcionan los snippets
Los snippets son archivos `.mdx`, `.md` o `.jsx` que se importan en otro archivo. Puedes colocar los archivos de snippets en cualquier parte de tu proyecto.
Cuando importas un snippet en otro archivo, el snippet solo aparece donde lo importas y no se renderiza como una página independiente. Cualquier archivo en la carpeta `/snippets/` siempre se considera un snippet, incluso si no se importa en otro archivo.
## Crear snippets
Crea un archivo con el contenido que quieras reutilizar. Los snippets pueden contener todos los tipos de contenido compatibles con Mintlify y pueden importar otros snippets.
## Importar fragmentos en páginas
Importa fragmentos en las páginas usando una ruta absoluta o relativa.
* **Importaciones absolutas**: Comienzan con `/` para importaciones desde la raíz de tu proyecto.
* **Importaciones relativas**: Usa `./` o `../` para importar fragmentos en relación con la ubicación del archivo actual.
Las importaciones relativas habilitan la navegación en el IDE. Pulsa CMD y haz clic en el nombre de un fragmento en tu editor para ir directamente a su definición.
### Importar texto
1. Añade al archivo de fragmento el contenido que quieras reutilizar.
```mdx shared/my-snippet.mdx wrap theme={null}
Hello world! This is my content I want to reuse across pages.
```
2. Importa el snippet en tu archivo de destino utilizando una ruta absoluta o relativa.
```mdx Importación absoluta theme={null}
---
title: "Una página de ejemplo"
description: "Esta es una página de ejemplo que importa un snippet."
---
import MySnippet from "/shared/my-snippet.mdx";
El contenido del snippet aparece debajo de esta frase.
```
```mdx Importación relativa theme={null}
---
title: "Una página de ejemplo"
description: "Esta es una página de ejemplo que importa un snippet."
---
import MySnippet from "../shared/my-snippet.mdx";
El contenido del snippet aparece debajo de esta frase.
```
### Importar variables
Haz referencia a variables de un fragmento en una página.
1. Exporta variables desde un archivo de fragmento.
```mdx shared/custom-variables.mdx theme={null}
export const myName = "Ronan";
export const myObject = { fruit: "fresas" };
;
```
2. Importa el fragmento desde tu archivo de destino y usa la variable.
```mdx destination-file.mdx theme={null}
---
title: "Una página de ejemplo"
description: "Esta es una página de ejemplo que importa un fragmento con variables."
---
import { myName, myObject } from "/shared/custom-variables.mdx";
Hello, my name is {myName} and I like {myObject.fruit}.
```
### Importar fragmentos con variables
Usa variables para pasar datos a un fragmento cuando lo importes.
1. Añade variables a tu fragmento y pásales propiedades cuando lo importes. En este ejemplo, la variable es `{word}`.
```mdx shared/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 pasada reemplaza la variable en la definición del fragmento.
```mdx destination-file.mdx theme={null}
---
title: "Una página de ejemplo"
description: "Esta es una página de ejemplo que importa un fragmento con una variable."
---
import MySnippet from "/shared/my-snippet.mdx";
```
Las variables también se interpolan dentro de bloques de código delimitados. Esto resulta útil para fragmentos que incluyen comandos de instalación u otros ejemplos de código que varían según el nombre del paquete, la versión o el entorno.
````mdx shared/install-snippet.mdx theme={null}
export const InstallSnippet = ({ packageName }) => <>;
Instala el paquete:
```bash
npm install {packageName}
```
````
```mdx destination-file.mdx theme={null}
import InstallSnippet from "/shared/install-snippet.mdx";
```
### Importar componentes de React
1. Crea un fragmento con un componente JSX. Consulta [Componentes de React](/es/customize/react-components) para obtener más información.
```js components/my-jsx-snippet.jsx theme={null}
export const MyJSXSnippet = () => {
return (
¡Hola, mundo!
);
};
```
Al crear fragmentos de JSX, usa la sintaxis de funciones flecha (`=>`) en lugar de declaraciones de función. La palabra clave `function` no es compatible en los fragmentos.
2. Importa el fragmento.
```mdx destination-file.mdx theme={null}
---
title: "Una página de ejemplo"
description: "Esta es una página de ejemplo que importa un fragmento con un componente de React."
---
import { MyJSXSnippet } from "/components/my-jsx-snippet.jsx";
```
## Related topics
- [React](/es/customize/react-components.md)
- [Crear y editar páginas](/es/editor/pages.md)
- [Scripts personalizados](/es/customize/custom-scripts.md)