Спасибо всем, кто участвовал в опросе.
Верный вариант - специфика Webpack.

Дело в том, что приложения Реакт создаются для бразузера. Директива import для именованных импортов - как в случае импорта Реакта - не поддерживается большинством браузеров, поэтому Реакт использует для сборки Webpack. Который, в свою очередь, ищет пути к модулям, импортированным так, в папке node_modules. Неочевидное поведение, которое полезно держать в голове.

#JS #React #Webpack

React, заметки об архитектуре и другое:

- В идеале, каждый Реакт-компонент должен находиться в отдельном каталоге. Это роднит компонентный подход с БЭМ, где блок - не что иное как разбитая на собственные файлы структура.

- Файлы стилей должны называться так же, как и название компонента.

- В проекте отдельным каталогом должны содержаться юнит-тесты.

- C помощью Webpack можно укоротить пути к файлам компонентов (импортировать по-умолчанию). Для этого:
1. Создаем в папке компонента файл index.js (или с таким же названием, как корневой файл проекта)
2. Прописываем импорт и экспорт:
import MyComponent from './my-component';
export default MyComponent;
3. Убираем дублирование названия файла компонента в корневом файле проекта.
Если Webpack будет ругаться на отсутствие файлов, может помочь рестарт скриптов.

- Компоненты-классы от функциональных отличаются возможностью хранить состояние.

- Если импортировать компонент через деструктуризацию:
import React, { Component } from 'react'
...то не придётся писать в компоненте-классе extends React.Component: вместо этого можно будет написать просто Component.

- Экспортировать компоненты можно, объявляя export default прямо перед объявлениями этих компонентов.

#React #архитектура #webpack