Kentavr16

1) В целом зависит от ситуации, но использовать куки это всё еще норм, т.к. если вы плохо понимаете jwt, то можете несколько дыр создадать. В целом токен часто и хранят в куке. Смотря что вы подразумеваете под разницей, но в большинстве случаев есть разница т.к. jwt использует несколько реализаций. Access/Refresh токены, которые вы не можете отозвать и соотвественно завершить сессию принудительно как с куки, если вы создаёте white listс токенами то по сути это уже близко к реализации с куки но всё равно есть отличия.

2) Нужно внедрять https не особо влияет на эту атаку. Также есть заблуждение что cors спасает, но тут уже вам нужно будет разобраться с этим, но если лень, то можно просто подключить этот токен (его не сложно подключать).

3) Тут несколько вариантов. Можно редирект возвращать а можно 401 и форму с логином. Можно обработчик сделать на js и при 401 редиректить на страницу с логином как удобнее так и делайте

1. Нормально если гибрид, Если SPA можно и jwt прикрутить
2. Это несвязанные между собой вещи
3. Отдавать 401 да. Для получения пользователя делайте один отдельный запрос.

ECONNRESET - сервер сбросил соединение. Надо смотреть логи сервера.

Переменная без let/const создается в глобальном объекте.
Она одна, глобальная, и в ней в результате сохраняется одна последняя карточка

Решение:

- cardInnerWrapper = document.createElement('div')
+ let cardInnerWrapper = document.createElement('div')

Опишите свою реальную задачу, потому что сейчас непонятно, чего именно вы хотите добиться, и из-за этого нельзя дать какой-то адекватный ответ.

Вы хотите полностью отказаться от React и перейти на более «простые» инструменты? Скорее всего, это невозможно — если используется React, то у вас сложные динамические интерфейсы и никакими автоматическими средствами переписать их на ванильный js не выйдет — только руками. Но это будет требовать знаний куда больших, чем просто использование React.

Если же вы хотите отказаться от JSX, но оставить React, то это автоматизировать уже можно, но задача очень странная.

Судите сами:

function resize() {
    const el = document.getElementsByClassName('preloader-wrap')[0];
    let scale = 0 < window.innerWidth - window.innerHeight
                ? window.innerWidth / 2200
                : window.innerWidth / 800;
    el.style.transform = 'translate(-50%, -50%) scale(' + scale + ')';
}

function animAdd(selector, className, timeout) {
    const el = document.getElementsByClassName(selector)[0];
    setTimeout(function () {
        el.classList.add(className);
    }, timeout);
}

function animRem(selector, className, timeout) {
    const el = document.getElementsByClassName(selector)[0];
    setTimeout(function () {
        el.classList.remove(className);
    }, timeout);
}

function getRandom() {
    return 10 * Math.round((1500 * Math.random() + 500) / 10);
}

function animBannerAdd() {
    animAdd('preloader-item1', 'active', getRandom());
    animAdd('preloader-item2', 'active', getRandom());
    animAdd('preloader-item3', 'active', getRandom());
    animAdd('preloader-item4', 'active', getRandom());
    animAdd('preloader-item5', 'active', getRandom());
    animAdd('preloader-item6', 'active', getRandom());
    animAdd('preloader-item7', 'active', getRandom());
    animAdd('preloader-item8', 'active', getRandom());
    animAdd('preloader-item9', 'active', getRandom());
    animAdd('preloader-item10', 'active', getRandom());
    animAdd('preloader-item11', 'active', getRandom());
    animAdd('preloader-item12', 'active', getRandom());
    animAdd('preloader-item13', 'active', getRandom());
    animAdd('preloader-item14', 'active', getRandom());
    animAdd('preloader-item15', 'active', getRandom());
    animAdd('preloader-item16', 'active', getRandom());
    animAdd('preloader-item17', 'active', getRandom());
    animAdd('preloader-item18', 'active', getRandom());
    animAdd('preloader-item19', 'active', getRandom());
    animAdd('preloader-item20', 'active', getRandom());
    animAdd('preloader-item21', 'active', getRandom());
    animAdd('preloader-item22', 'active', getRandom());
    animAdd('preloader-item23', 'active', getRandom());
    animAdd('preloader-item24', 'active', getRandom());
    animAdd('preloader-item25', 'active', getRandom());
    animAdd('preloader-item26', 'active', getRandom());
    animAdd('preloader-item27', 'active', getRandom());
    animAdd('preloader-item28', 'active', getRandom());
    animAdd('preloader-item29', 'active', getRandom());
    animAdd('preloader-item30', 'active', getRandom());
    animAdd('preloader-item31', 'active', getRandom());
    animAdd('preloader-item32', 'active', getRandom());
}

function animBannerRem() {
    animRem('preloader-item1', 'active', 0);
    animRem('preloader-item2', 'active', 0);
    animRem('preloader-item3', 'active', 0);
    animRem('preloader-item4', 'active', 0);
    animRem('preloader-item5', 'active', 0);
    animRem('preloader-item6', 'active', 0);
    animRem('preloader-item7', 'active', 0);
    animRem('preloader-item8', 'active', 0);
    animRem('preloader-item9', 'active', 0);
    animRem('preloader-item10', 'active', 0);
    animRem('preloader-item11', 'active', 0);
    animRem('preloader-item12', 'active', 0);
    animRem('preloader-item13', 'active', 0);
    animRem('preloader-item14', 'active', 0);
    animRem('preloader-item15', 'active', 0);
    animRem('preloader-item16', 'active', 0);
    animRem('preloader-item17', 'active', 0);
    animRem('preloader-item18', 'active', 0);
    animRem('preloader-item19', 'active', 0);
    animRem('preloader-item20', 'active', 0);
    animRem('preloader-item21', 'active', 0);
    animRem('preloader-item22', 'active', 0);
    animRem('preloader-item23', 'active', 0);
    animRem('preloader-item24', 'active', 0);
    animRem('preloader-item25', 'active', 0);
    animRem('preloader-item26', 'active', 0);
    animRem('preloader-item27', 'active', 0);
    animRem('preloader-item28', 'active', 0);
    animRem('preloader-item29', 'active', 0);
    animRem('preloader-item30', 'active', 0);
    animRem('preloader-item31', 'active', 0);
    animRem('preloader-item32', 'active', 0);
}

document.addEventListener('DOMContentLoaded', function () {
    resize();
});

window.onresize = function () {
    resize();
};

console.log(getRandom());

animBannerAdd();

setInterval(function () {
    animBannerRem();
}, 3000);

setInterval(function () {
    animBannerAdd();
}, 3000);

Вы создали не правильную структуру компонентов React Router. < Router> должен быть размещен в самом верху относительно вложенности всех компонентов, обычно это в районе < App>. Так же, для навигации Вы используете href, когда должны использовать компонент React Router - Link.

Это что такое?

<Route exact path='/contacts' Component={Contacts} />
// Component={Contacts} ???

Попробуйте так (если App является корневым компонентом):

import React from 'react';
import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom';
import './App.scss';

import Header from './components/Header';
import Service from './pages/Service';
import Contacts from './pages/Contacts';
import Login from './pages/Login';
import Home from './pages/Home';

function App() {
  return (
    <Router>
      <div className="App">
        <Header />

        <nav>
          <Link to="/">Главная</Link>
          <Link to="/service">Услуги</Link>
          <Link to="/contacts">Контакты</Link>
          <Link to="/login">Вход</Link>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/service" element={<Service />} />
          <Route path="/contacts" element={<Contacts />} />
          <Route path="/login" element={<Login />} />

          <Route path="*" element={<NotFoundRoute/>} />
        </Routes>
      </div>
    </Router>
  );
}

// not fount route handler
function NotFoundRoute() {
  return <div>Page not found</div>;
}

export default App;

Header.js:

import {Link} from "react-router-dom";

function Header(props) {
  return (
    <>
      <header>
        // ...

        <Link to="/service">Услуги</Link>
        <Link to="/contacts">Контакты</Link>

        // ...
      </header>
    </>
  )
}

export default Header;

Там уже всё "оптимизировано" за вас, не нужно заморачиваться. Когда вы столкнётесь с проблемами производительности из-за фреймворка (никогда), тогда и будете оптимизировать конкретные проблемные места.

Раньше была урезанная версия Laravel под названием Lumen, в которой было сделано ровно то, что вы описали, но нужда в этом давно отпала и Lumen больше не рекомендуется использовать.

роуты почистил и всё.
Да, часть миддлваров не будут использоваться для апи. Но разве это должно волновать? Лежат себе и лежат на диске. Там и вес-то их до килобайта не дотягивает.

Есть ли способ сразу получить оптимизированное под написание апи решение?

Ларка уже оптимизирована. Вам по умолчанию даже пакет для аутентификации по токенам включили. Просто используйте и не парьтесь.

Почему dispatch нельзя использовать в потоке кода при отрисовке компонента?

- Проблемы с производительностью: Если бы dispatch вызывался прямо в теле компонента (то есть во время его рендеринга), каждый раз, когда компонент рендерится (например, из-за изменения других данных на странице), он бы снова и снова добавлял товар в корзину (в контексте интернет-магазина). Это приведет к бесконечному циклу и сильно замедлит работу приложения.
- Непредсказуемость поведения: Поскольку рендеринг компонентов может происходить по разным причинам и в разное время, использование dispatch в процессе может привести к непредсказуемым и нежелательным изменениям в состоянии приложения. В контексте интернет-магазина, товары могли бы добавляться в корзину без Вашего ведома.
- Сложности в управлении состоянием: Использование dispatch во время рендеринга усложняет понимание того, когда и почему происходят изменения в состоянии приложения, что затрудняет отладку и поддержку кода.

Именно поэтому лучше использовать dispatch внутри обработчиков событий (например, при клике на кнопку) или внутри useEffect, где Вы имеете полный контроль над тем, когда и по какой причине должны происходить изменения состояния.

Dinero.js
Big.js

В консоли браузера можно выполнить функцию autoskrl:

1. autoskrl(1) - передавая единицу вы с каждым вызовом ускоряете прокрутку
   
2. autoskrl(-1) - передавая минус один вы с каждым вызовом замедляете прокрутку
   

Экспериментируйте с аргументом функции. Можно попробовать передать 0.5 например вместо единицы.

myArrayJson.push({[arkey]: arval});

Роли чаще всего это группа привилегий. Почему используют их вместе - зависит от системы. Иногда достаточно ролей. Например, если у вас одна админка и пользоваться ей могут только админы. Но если у вас один UI на несколько пользователей, то обойтись одной ролью будет сложно. Если вы будете в коде везде делать проверку, что пользователь админ и ещё сотрудник и ещё менеджер, то это будет сложно. К тому же при добавлении новой роли вам нужно будет по всему коду добавлять проверку ещё и на другую роль. Вместо этого используют разрешения, которые выдаются пользователю. В коже вам нужно проверить это разрешение/привилегию и вам без разницы какая это роль. Добавляете новую роль и привязываете новые разрешения. Пользователь сразу сможет использовать систему в зависимости от прав.

То есть роли используют чаще для чего-то глобального и/или объединения разрешений. А сами разрешения уже позволяют гибко настраивать проверки.

Ещё можете почитать статью: Smoother & sharper shadows with layered box-shadows.

Получите ВСЕ данные и потом выводить один раз.
XMLHttpRequest меняем на fetch, для параллелизации запросов используем Promise.all. И когда всё загружено - рисуем DOM.