Kentavr16

Переменная без 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.

Да, параметризовать можно только значения но не наименование полей и таблиц (мало того ты и prepared запрос так не сможешь сделать, с каждым новым значением $(column) будет новый запрос).

Да, тебе придется валидировать значение в $(column) но это не сложно так как там допускаются только латинские буквы (оба регистра), цифры и подчеркивание. Конечно если ты не используешь идентификаторы_в_ковычках (там любые символы, но зачем тебе стрелять себе в ногу), ну в крайнем случае как разработчик ты знаешь что у тебя в запросе и какие допустимые наименования полей там могут быть