На каком этапе используются environment variables в React-приложении?

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

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

На каком этапе они применяются?

В React-приложениях, созданных с помощью Create React App (CRA) или подобных инструментов, переменные окружения обрабатываются на этапе сборки (build time). Это означает, что они встраиваются в статические файлы JavaScript во время выполнения команды npm run build. После сборки изменить их без повторной сборки невозможно.

Как это работает?

Во время сборки CRA заменяет все вхождения process.env.REACT_APP_* на соответствующие значения из файла .env или из окружения системы. Например:

// .env файл
REACT_APP_API_URL=https://api.example.com

// В коде React
const apiUrl = process.env.REACT_APP_API_URL;
console.log(apiUrl); // 'https://api.example.com' после сборки

Важно: только переменные с префиксом REACT_APP_ будут доступны в коде. Это сделано для безопасности, чтобы случайно не раскрыть системные переменные.

Практический пример

Допустим, у вас есть приложение, которое должно работать с разными API в разработке и продакшне. Вы создаете файлы .env.development и .env.production:

// .env.development
REACT_APP_API_URL=http://localhost:3000/api

// .env.production
REACT_APP_API_URL=https://myapp.com/api

При запуске npm start (режим разработки) используется первый файл, при npm run build — второй. В коде вы просто обращаетесь к process.env.REACT_APP_API_URL.

Вывод

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