Импорт функций и переменных JS

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

Как экспортировать и импортировать

В одном файле (например, utils.js) вы объявляете и экспортируете функции или переменные:

// utils.js
export const API_URL = 'https://api.example.com';
export function formatDate(date) {
  return date.toLocaleDateString();
}

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

import { API_URL, formatDate } from './utils';

function App() {
  return <div>Адрес API: {API_URL}</div>;
}

Виды экспорта

Именованный экспорт (export const x = ...) — позволяет экспортировать несколько значений из одного файла. Импортируется в фигурных скобках.
Экспорт по умолчанию (export default function ...) — один экспорт на файл. Импортируется без скобок:
```
// logger.js
export default function log(message) {
  console.log('[APP]', message);
}

// App.jsx
import log from './logger';
```

Отличие от импорта статических файлов

Когда вы импортируете JS-модуль:

Сборщик выполняет код файла (а не просто копирует его),
Значения становятся частью JavaScript-бандла,
Нет генерации хешей в именах — модуль встраивается в общий код,
Поддерживается tree-shaking: неиспользуемые именованные экспорты могут быть удалены из финальной сборки.

В отличие от изображений или JSON, вы не получаете строку с путём — вы получаете сами значения (функции, объекты, примитивы).

Практическое применение

Вынос логики в утилиты (formatDate, validateEmail),
Централизованное хранение констант (API_URL, THEME_COLORS),
Разделение компонентов и бизнес-логики,
Создание переиспользуемых хуков (useLocalStorage, useDebounce).

Импорт JS-модулей — это не «работа с файлами» в смысле ресурсов, а основа структуры кода. Он не требует специальной обработки сборщиком, кроме объединения и оптимизации модулей.