Что такое переменные окружения в React?

Что такое переменные окружения в React?

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

Как они работают в React?

В проектах, созданных с помощью Create React App (CRA), переменные окружения задаются в файлах .env в корне проекта. Чтобы переменная была доступна в коде, её имя должно начинаться с префикса REACT_APP_. Например:

REACT_APP_API_URL=https://api.example.com
REACT_APP_API_KEY=your-secret-key

После этого в коде React можно обратиться к ним через process.env.REACT_APP_API_URL. CRA автоматически подставляет эти значения на этапе сборки, заменяя их на реальные строки.

Пример использования

import React from 'react';

function App() {
  const apiUrl = process.env.REACT_APP_API_URL;
  return <div>API URL: {apiUrl}</div>;
}

export default App;

В режиме разработки переменные загружаются из файла .env.development, а в продакшне — из .env.production. Это позволяет легко переключаться между средами.

Где это применяется?

• Хранение URL бэкенда для разных сред.
• Управление ключами для аналитики или карт.
• Включение/отключение фич через флаги (например, REACT_APP_FEATURE_NEW_UI=true).

Вывод

Переменные окружения — это стандартный способ конфигурации React-приложений, который повышает безопасность и гибкость. Используйте их для отделения настроек от кода, особенно при работе с разными средами развертывания.