#MDX и React-компоненты

Rspress поддерживает MDX, формат создания контента, который бесшовно объединяет Markdown с JSX. MDX позволяет использовать компоненты React напрямую в вашей документации, сочетая лаконичный синтаксис Markdown с экосистемой React. Он идеально подходит для создания интерактивной, компонентно-ориентированной технической документации.

#Что такое MDX

MDX объединяет синтаксис Markdown и JSX, поэтому вы можете писать контент Markdown и использовать компоненты React в одном файле.

Мы рекомендуем использовать .mdx для всех файлов документации. Это позволяет использовать в качестве контента обычный Markdown, но при этом импортировать и использовать встроенные компоненты, предоставляемые Rspress.

# Привет, мир!

import { PackageManagerTabs } from '@rspress/core/theme';

<PackageManagerTabs command="create rspress@latest" />

#Фрагменты MDX

Каждый файл .mdx компилируется в React-компонент, что означает, что его можно импортировать как обычный компонент и свободно рендерить внутри него React-компоненты. Например:

import MdxFragment from './_mdx-fragment.mdx';
import TsxComponent from './_tsx-component';

Тестирование использования MDX-фрагментов и React-компонентов.

<MdxFragment />

<TsxComponent />

Это **фрагмент mdx**.

import { useState } from 'react';

export default () => {
  const [count, setCount] = useState(0);
  return (
    <p>
      Это компонент из tsx{' '}
      <button onClick={() => setCount(count => count + 1)}>{count}</button>
    </p>
  );
};

Это отображается как:

В файлах .mdx вы можете использовать встроенные компоненты, предоставляемые Rspress, или устанавливать библиотеки компонентов React, чтобы обогатить вашу документацию.

#Соглашение о маршрутах

В директории документации MDX-фрагменты или React-компоненты должны быть исключены из маршрутизации с помощью route.exclude. Для удобства файлы, начинающиеся с _, исключаются по умолчанию через route.excludeConvention.

Также вы можете размещать компоненты в соседних директориях вне директории docs. Например:

docs
├── _button.mdx
└── index.mdx
components
└── button.tsx

import ButtonFragment from './_button.mdx';
import Button from '../../components/button';

<ButtonFragment />
<Button />

#### кнопка

Текст из MDX

const Button = () => <button>Кнопка из tsx</button>;
export default Button;

Это отображается так:

#Альтернативный способ: написание страниц на TSX

import { getCustomMDXComponent } from '@rspress/core/theme';

export default () => {
  const { p: P, code: Code } = getCustomMDXComponent();
  return (
    <P className="rp-doc">
      Это содержимое в tsx, но стили такие же, как в документации, например,
      <Code>@rspress/core</Code>. Однако этот текст с className="rp-not-doc"
      <Code className="rp-not-doc">@rspress/core</Code> не будет стилизоваться
    </P>
  );
};

Это отображается как:

#Требования к версиям React