Как лучше генерировать элементы на странице?

Rerurk, Форматирование конечно пи***ц). Это выглядит понятно пока там нету большого числа вложенных элементов. В примере простой див, а вот если это компонент, части которого нет смысла выносить в отдельные компоненты, но их много. Разве это читабельно будет? очень сомневаюсь

Как лучше генерировать элементы на странице?

Rerurk,

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

const arrComponents = [];

for (let i = 0; i < 152; i++) {
  arrComponents.push(`
    <div class="child-block-${i}">Text-${i}</div>
  `);
}

const template = (child) => `
  <div class="block">${child}</div>
`;

const arrBlock = arrComponents.map(child => template(child));
... Вставляем в Dom

Как лучше генерировать элементы на странице?

Rerurk, Вы серьезно считаете что это

const picHolder = document.getElementById("picHolder");
const img = document.createElement("img");
img.setAttribute('src', `images/stone-${number}.jpg`)
img.setAttribute('alt', 'pic');
picHolder.appendChild(img);

читабельнее и нагляднее этого?

const template = `
  <img src='images/stone-${number}.jpg' alt='pic'>
`;

А если надо сгенерировать блок с кучей вложенных блоков, которые не являются отдельными сущностями, а не просто картинку добавить. Представляете насколько вырастает сложность восприятия. Не зря же в react jsx придумали. Верстку визуально воспринимать легче

И где в моем примере отсутствует динамика?

Пропадает this в функции, как можно исправить?

$('.lft-close').on('click', () => {
    filterShow();
  });

или

$('.lft-close').on('click', filterShow);

Как лучше генерировать элементы на странице?

lyrion, не просто удалять, а чистить все слушатели, подписки и т.д, чтоб не возникли утечки памяти. По поводу парусить, автонабор подменил— имел в виду парсить

Что могло случиться с input range после переноса на другой сайт?

SaNFeeD, тогда скрины оттуда в студию

Fetch запрос возвращает пустой результат?

SergeyT89, Это не костыль, это средство для разработки. Если хотите этот api использовать на сайте - сделайте так, чтоб сервер возвращал нужный заголовок - разрешил запросы от любого сайта или конкретно от вашего домена. Иначе никак

Fetch запрос возвращает пустой результат?

SergeyT89, Почитайте про корсы. Сервер не возвращает нужный заголовок. Если есть доступ к серверу - исправьте этот момент.

Либо поставьте расширение в ваш браузер отключающий корсы (я использую Allow CORS: Access-Control-Allow-Origin для хрома) и все будет ок. Лично проверено на примерах что скинул выше

JS привязывает события к элементам один раз при построении дерева или многократно?

ImagineWorld, https://learn.javascript.ru/introduction-browser-events раздел removeEvent

JS привязывает события к элементам один раз при построении дерева или многократно?

Stalker_RED, Это да. Но например клик вызывает обращение к серверу. Кнопка уже удалена, а ответ еще не успел прийти. В итоге ответ не нужен, а ответ приходит - лишний запрос. Когда это одна кнопка это не критично, а вот когда таких моментов много, они в сумме замедляют приложение

Как собрать сложный проект на vue (с доп. модулями)? Правильно ли я это делаю?

Игорь Прокофьев,

vue CLI https://cli.vuejs.org/ru/
gulp https://gulpjs.com/
webpack https://webpack.js.org/

Ссылки на доки по тем технологиям. Очень многое можно почерпнуть

JS привязывает события к элементам один раз при построении дерева или многократно?

Обработчик никуда не пропадет. Это и вызывает утечку памяти. При удалении элемента за ним нужно чистить все подписки и события

Как собрать сложный проект на vue (с доп. модулями)? Правильно ли я это делаю?

Игорь Прокофьев,

npm i *имя модуля* - если зависимость для прода

npm i -D *имя модуля* - если зависимость для разработки

* - при наборе команд их не вводить

Будет ли react-router-dom перерисовывать страницу, если я передам useState значение?

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

Будет ли react-router-dom перерисовывать страницу, если я передам useState значение?

Дуболом Одноклеточный, Логаут это просто удаление токена из состояния и изменение isAuth на false. Авторизация - получение токена и изменение isAuth на true при первом входе на любую страницу, благодаря чему появляется возможность переходить по приватным роутам (у вас же реализованы приватные роуты?) Зачем это использовать 5 раз?

Если нет перерисовки - вероятнее всего не меняется состояние. Проверьте выполняется ли условие if(user && user.token), а именно, заходит ли внутрь блока с этим условием

Как написать маску для номера телефона?

В маске косяк, если зажать цифру, то можно набрать сколько угодно знаков. +7 появляется не всегда

Осилит ли такой проект PUG?

newhacke, почитайте доку по pug и все станет ясно. Вкратце - создаете миксин и пишете цикл - это все в .pug файлах

Как подключить скрипт на чистом js к react?

Flagname, Там где нужно использовать табы

Как организовать асинхронную функцию .map?

Иван Табакерка, Promise.all в ответе выше, как раз для ожидания всех промисов и последующего выполнения

Как сделать, чтобы таймер не сбрасывался при обновлении страницы?

Artem Marenkov, Самим искать решение полезнее чем получать готовое, даю подсказку:

Сравнивайте время в мс. Используйте класс new Date