Работа с переменными и константами

Объявление и использование переменных

В MDX (Markdown + JSX) переменные можно объявлять с помощью стандартного синтаксиса JavaScript, используя let, const или var. На практике чаще всего применяются const и let, так как они обеспечивают более предсказуемое управление состоянием. Переменные объявляются в блоках JSX внутри MDX или в отдельном скриптовом блоке.

export const siteTitle = "Документация по MDX";

let counter = 0;
function increment() {
  counter += 1;
}

const используется для значений, которые не будут изменяться.
let подходит для переменных, которые необходимо обновлять в процессе выполнения кода.
var объявляет переменную в функциональной области видимости, но его использование в современных проектах MDX не рекомендуется из-за потенциальных конфликтов и неожиданных эффектов области видимости.

Экспорт переменных

MDX поддерживает экспорт переменных и функций, что позволяет использовать их в других компонентах или страницах. Экспорт осуществляется через ключевое слово export:

export const apiEndpoint = "https://api.example.com/data";

export function formatDate(date) {
  return new Date(date).toLocaleDateString();
}

Экспортированные переменные могут быть импортированы в другие MDX-файлы или React-компоненты, интегрированные с MDX. Это обеспечивает модульность и переиспользуемость кода.

Инлайновое использование переменных в тексте

Одним из ключевых преимуществ MDX является возможность внедрять значения переменных прямо в текст Markdown через JSX-выражения:

Сегодняшняя дата: {formatDate(new Date())}

Название сайта: {siteTitle}

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

Управление состоянием

Переменные в MDX могут использоваться совместно с React-хуками, такими как useState, для создания интерактивного контента. Это позволяет динамически изменять содержимое страницы:

import { useState } from "react";

const [count, setCount] = useState(0);

<button onCl ick={() => setCount(count + 1)}>
  Кликнули {count} раз
</button>

Переменные состояния обновляются при каждом изменении через функцию setCount.
Значение переменной состояния ререндерится автоматически в том месте, где оно используется.

Константы для конфигурации

Константы в MDX часто применяются для хранения конфигурационных данных, таких как URL-адреса API, настройки компонентов или ключи для аутентификации:

export const config = {
  apiUrl: "https://api.example.com",
  theme: "dark",
  itemsPerPage: 10
};

Использование таких констант позволяет централизовать конфигурацию и облегчает поддержку проекта.

Особенности области видимости

Переменные и константы, объявленные внутри MDX, имеют область видимости в пределах текущего файла. Для того чтобы они стали доступны глобально или в других файлах, необходимо использовать export.

Локальные переменные доступны только внутри блока MDX, где они объявлены.
Экспортированные переменные могут быть импортированы и использованы в любом месте проекта, поддерживающем MDX и React.

Динамическая генерация контента

Переменные позволяют создавать динамический контент без необходимости вручную изменять Markdown:

const features = ["Переменные", "Константы", "Хуки"];

<ul>
  {features.map((feature, index) => (
    <li key={index}>{feature}</li>
  ))}
</ul>

map позволяет перебрать массив и отобразить каждый элемент как JSX.
Динамическое отображение упрощает обновление документации при изменении данных.

Взаимодействие с другими компонентами

Переменные и константы могут быть переданы как свойства (props) другим React-компонентам внутри MDX:

<MyButton label={siteTitle} count={counter} />

label и count получают значения переменных из текущего MDX-файла.
Любые изменения переменных автоматически отражаются при ререндере компонентов.