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

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

#Что такое MDX

MDX — это сочетание синтаксиса Markdown и JSX, которое позволяет писать и использовать React-компоненты непосредственно в Markdown-документах.

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

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

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

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

#Фрагменты MDX

В 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>
  );
};

Отобразится так:

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

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

В директории docs фрагменты 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