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

Question

[someserj]

например, шапка страницы с логотипом и каким-то текстом. не думаю, что ее нужно делать компонентом, или я не прав? как правильно делать в Реакте?

Answer 1

[Максим]

Реакт можно встроить в уже существующий рабочий сайт. Например, есть какая-то сложная таблица для переводчиков с кучей логики - вот тут самое место реакту. Воткнули, не трогали сам сайт (пусть он будет хоть на руби-шаблонах написан) - выкатили.

Другое дело, когда у вас изначально SPA приложение на React. Тогда нет никакого смысла шапку/страницы с логотипом и так далее делать не на react. Удобно же, когда все в компонентах.

Comments

[someserj]

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

[ThemeZV]

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

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

[someserj]

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

[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]

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

[Максим]

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

[someserj]

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

[Максим]

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

[someserj]

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

[Максим]

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

[someserj]

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

[Максим]

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

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

Answer 2

[ThemeZV]

Основная цель компонентов - переиспользовать готовые.
Если везде будет один хедер/футер, то не надо бить его на отдельные компоненты.
Если что-то переиспользуется, нужно выносить в отдельный.