Должно ли в React всё быть компонентами?

а как в таком случае картинку лого располагать в шапке? как вообще в реакте подключать картинки правильно и по какому пути хранить?

src/assets/images
Если используете webpack, должен быть настроен загрузчик изображений, тогда просто импортируете изображение по пути. Например:
import myCatImage from 'assets/images/myCat.jpg';

Если CRA, то в доке все отлично описано

ThemeZV, каждую картинку так импортить? это ж с ума сойти сколько строк кода может быть одного импорта. может более оптимальный вариант есть или именно этот способ самый распространенный?

someserj, можно создать index файл, в который добавлять картинки, потом брать из него.
Можно для вебпака немного допилить лоадер. На Medium была статья, можно на нее ориентироваться.
Я один раз написал свой небольшой и кривой "лоадер" для загрузки логотипов партнеров.

const pathToCats = require.context('../assets/img', true);

function imgFolderLoader(names) {
    try {
        return names.map((name) => pathToCats(`./${name}`, true));
    } catch (err) {
        console.warn('Argument to imgFolderLoader should be array');
    }
}

export default imgFolderLoader;

Передаете в функцию массив с названиями, возвращается массив путей до картинок

someserj, просто подключайте как обычные картинки из публичной директории.

Максим, а как сделать тогда чтобы в продакшн билде они были? Вебпак их так видит только в дев режиме

someserj, не понял о чем речь. Вы имеете в виду, что неудобные названия у React в dev tools в браузере, когда продакшен билд смотрите?

Максим, в продакшне их вообще нет, если указывать не через импорт и не через реквайр

someserj, разумеется) откуда им быть если они никак не подключены?

Максим, в чем смысл твоего совета тогда?

someserj, а, вы мне про картинки, я думал про компоненты. Да, их нет в продакшен бандле, но они же доступны из публичной директории. То есть по src подключатся и все, без пропуска их через вебпак.

Максим, а я же в продакшн не буду выгружать папку src, или так делают в реакте?

someserj, вы должны на сервер, залить файлы: js, css, index.html и ... картинки! Адрес до картинок в атрибуте src должен быть такими, чтобы картинки отдавались с вашего сервера. Например, лежат они у вас в public/images - и вы в коде обращаетесь к ним как src='images/_name_img.jpg' - то значит ваш продкашен сервер (может быть это NGINX) должен по такому вызову отдать картинку!

Я тут много написал, но если коротко: если вы при dev разработке будете свои картинки подключать через src и public директорию, то потом просто собираете продакшен билд, создаете такую же директорию public (или какое у вас название) и готово.