Что такое именованный экспорт и экспорт по умолчанию?

// === Именованный экспорт ===
// math.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export class Vector {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

// Импорт — имена должны совпадать
import { PI, add, Vector } from "./math.js";

// Переименование при импорте
import { add as sum } from "./math.js";
sum(2, 3); // 5

// Импорт всего как объект
import * as math from "./math.js";
math.add(2, 3);
math.PI;

// === Экспорт по умолчанию ===
// logger.js
export default class Logger {
  log(msg) {
    console.log(`[LOG] ${msg}`);
  }
}

// Импорт — имя выбираешь сам
import Logger from "./logger.js";
import MyLogger from "./logger.js"; // тоже работает — имя любое

// api.js
export const BASE_URL = "https:// api.example.com";

export function get(path) { /* ... */ }

export function post(path, data) { /* ... */ }

export default class ApiClient {
  constructor(token) {
    this.token = token;
  }
}

// Импорт обоих типов
import ApiClient, { BASE_URL, get, post } from "./api.js";

// Способ 1: export при объявлении
export const name = "Alice";

export function greet() {}

// Способ 2: export списком в конце файла
const name = "Alice";

function greet() {}
export { name, greet };

// Способ 3: переименование при экспорте

function internalHelper() {}
export { internalHelper as helper };

// Способ 4: реэкспорт из другого модуля
export { add, subtract } from "./math.js";
export { default as Math } from "./math.js";

// ❌ default export — IDE не знает, что внутри, до импорта
import something from "./utils.js"; // что за something?

// ✅ named export — IDE подсказывает имена при вводе
import { formatDate, parseDate } from "./utils.js"; // всё ясно

// ❌ default export — каждый разработчик называет по-своему
import Button from "./Button.js";
import Btn from "./Button.js";
import MyButton from "./Button.js"; // хаос при поиске по проекту

// ✅ named export — одно имя во всём проекте
import { Button } from "./Button.js"; // единообразно

// React-компонент — один компонент на файл

// UserProfile.jsx
export default function UserProfile({ user }) {
  return <div>{user.name}</div>;
}