JSON-файлы

JSON-файлы в React-приложениях можно импортировать напрямую, как обычные JavaScript-модули. Сборщики (Webpack и Vite) по умолчанию поддерживают такой импорт: содержимое JSON автоматически парсится и становится доступным как обычный объект или массив в коде.

Как импортировать JSON

Предположим, у вас есть файл src/config/settings.json:

{
  "apiUrl": "https://api.example.com",
  "features": ["darkMode", "notifications"],
  "version": "1.2.0"
}

Вы можете импортировать его в компоненте или модуле:

import settings from './config/settings.json';

function App() {
  console.log(settings.apiUrl); // "https://api.example.com"
  return <div>Версия: {settings.version}</div>;
}

Переменная settings — это уже готовый JavaScript-объект, не строка. Никакого дополнительного парсинга (JSON.parse) не требуется.

Преимущества импорта JSON

  • Типобезопасность: при использовании TypeScript типы можно автоматически выводить или задавать через декларации.
  • Статический анализ: сборщик видит зависимость, и если файл удалён или переименован, вы получите ошибку на этапе сборки.
  • Tree-shaking: если вы используете только часть данных, современные сборщики могут исключить неиспользуемые поля (в ограниченных случаях).
  • Кэширование и хеширование: как и другие ресурсы, JSON-файлы получают хеш в имени при сборке, что обеспечивает корректное кэширование.

Когда использовать

  • Конфигурации, которые известны на этапе сборки (не секреты!),
  • Статические данные: списки, переводы, моки для разработки,
  • Метаданные компонентов или страниц.

Важные ограничения

  • Не храните секреты (API-ключи, пароли) в JSON-файлах — они попадут в клиентский бандл и будут видны любому.
  • Динамические данные (например, ответы от сервера) должны загружаться через fetch, а не через импорт.
  • Путь при импорте должен быть статическим: import data from ./data/${name}.json`` не сработает, так как сборщик не может определить имя файла во время сборки.

Импорт JSON — простой и надёжный способ включить структурированные статические данные в ваше React-приложение.