Почему раньше во всех компонентах писали import React?

Отличный вопрос, который затрагивает ключевую эволюцию инструментария React и понимание того, как работает JSX.

Краткий ответ

Ключевая причина — трансляция JSX. До версии React 17 (выпущенной в октябре 2020 года) JSX-синтаксис (<div>...</div>) в процессе сборки (обычно с помощью Babel или TypeScript) преобразовывался в вызовы функции React.createElement(...). Поэтому импорт React был обязательным, чтобы эта функция была доступна в области видимости каждого модуля, использующего JSX.

Подробное объяснение механизма

Как работал JSX до React 17

JSX — это синтаксическое расширение для JavaScript. Браузеры его не понимают, поэтому он должен быть скомпилирован в стандартный JavaScript. Вот как это выглядело на практике:

Исходный код в компоненте:

// Обязательный импорт!
import React from 'react';

function MyComponent() {
  return <div className="container">Hello World</div>;
}

Результат трансформации Babel (при использовании классического преобразования):

// React должен быть в области видимости, так как здесь используется React.createElement
import React from 'react';

function MyComponent() {
  return React.createElement(
    'div',
    { className: 'container' },
    'Hello World'
  );
}

Как видно из скомпилированного кода, JSX-элемент превратился в вызов функции React.createElement. Эта функция:

1. Принимает тип элемента (строку для HTML-тегов, ссылку на компонент для пользовательских).
2. Принимает объект props (в данном случае { className: 'container' }).
3. Принимает children (потомков) в качестве остальных аргументов.

Если бы в исходном модуле не было импорта React, переменная React в скомпилированном коде была бы undefined, и вызов React.createElement привёл бы к ошибке выполнения: Uncaught ReferenceError: React is not defined.

Эволюция: Новый JSX Transform (React 17+)

Команда React совместно с сообществом Babel разработала новый JSX transform, который был введён в React 17. Он решил несколько проблем:

1. Устранение обязательного импорта React. Новый трансформирующий плагин автоматически импортирует специальные функции из модулей React, необходимые для работы JSX.
2. Немного улучшенная производительность. Новые функции позволяют React-рантайму лучше оптимизировать код, избегая некоторых проверок.
3. Подготовка к будущему. Открыл путь для новых возможностей, таких как компоненты только с children.

Тот же компонент, скомпилированный с новым JSX transform (React 17+):

// Специальные функции импортируются автоматически!
import { jsx as _jsx } from 'react/jsx-runtime';

function MyComponent() {
  return _jsx('div', { className: 'container', children: 'Hello World' });
}

Обратите внимание:

• Импорт React из 'react' больше не требуется.
• Вместо React.createElement используется функция _jsx из специального модуля 'react/jsx-runtime', которая импортируется автоматически на этапе сборки.

Практические последствия и рекомендации

• Для новых проектов (React 17+): Импорт React не обязателен. Большинство шаблонов (Create React App, Vite, Next.js) по умолчанию используют новый трансформер. Импорт можно опускать, что делает код чище.
• Для поддержки старых проектов: Если проект использует старую версию React (<17) или в конфигурации Babel (@babel/preset-react) не включена опция runtime: 'automatic', импорт React остаётся обязательным.
• TypeScript: В tsconfig.json для использования нового трансформа нужно установить "jsx": "react-jsx" (или "react-jsxdev" для разработки).

Почему это важно понимать?

Понимание этой эволюции демонстрирует:

• Глубину знания экосистемы. Вы знаете не только "как", но и "почему" что-то работает.
• Понимание работы инструментов сборки. Frontend-разработка тесно связана с препроцессингом (Babel, TypeScript).
• Внимание к деталям. Вы можете объяснить исторический контекст и технические ограничения, которые формировали практики разработки.

Итог: Раньше import React был необходим, потому что JSX превращался в React.createElement(). Начиная с React 17, новый JSX transform берёт на себя автоматический импорт необходимых runtime-функций, делая глобальный импорт React в компонентах опциональным и упрощая код. Это отличный пример того, как экосистема React постоянно улучшает Developer Experience.