Алексей Уколов

Ключ должен быть у самого верхнего элемента внутри цикла. В вашем случае это fragment:

<React.Fragment key={category}>
 <h2>...</h2>
 <ul>...</ul>
</React.Fragment>

Ошибка первая: вы в sliceHandler передаёте div-обёртку, а внутри функции думаете, что это какой-то его ребёнок.
Ошибка вторая: вы пытаетесь получить реактовское служебное свойство key через атрибут html-тега. Значение key даже через props нельзя получить, не говоря уже про html.

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

Срабатывает браузерная валидация:

Код, вроде, выглядит рабочим. Так что подозреваю, что дело всё же в неправильном типе экшена:

dispatch({type:'product/ProductAdd'

case 'product/ProductEdit':

Если же это вы сюда скопировали как-то криво и тип экшена совпадает, то нужно смотреть что в inputValue.id в момент диспатча. Может, значение не заполняется, а может там идёт конвертация числа в строку, например, и строгое сравнение в редьюсере не проходит.

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

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

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

а зачем мне это?

Чтобы у вас заработал серверный рендеринг, это одно из главных слабых мест SPA. «Сервисы с многомиллионными списками пользователей» готовы за этот функционал платить дополнительными серверными мощностями:

Next.js is the React framework for the web, enabling you to create full-stack web applications. Built on top of React, it powers some of the largest ecommerce sites in the world, like Walmart, Target, Ebay, Nike, Doordash, and is even used in parts of Amazon.com.

https://vercel.com/guides/building-ecommerce-sites...

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

"Правильного" варианта тут нет, делайте как вам удобнее.

Я бы для такой простой штуки не стал заморачиваться и сделал так (детали с пропсами опущены):

const Comp = () => (
  <div>
    <ul>
      constants.map((item) => (
        <li>
          <h2>Cap1</h2>
          <p>Text1</p>
        </li>
      ))
    </ul>
  </div>
);

P.S. Если всё же разделять, я бы тег li оставил в родительском компоненте, а в отдельный вынес только его содержимое. Таким образом жёстко связанные в семантике html теги не будут разнесены потенциально по разным файлам.

Такую простую форму я бы писал на ванилке вообще.

Если надо именно фреймворк, берите то, что знаете.
Если не знаете ничего или знаете одинаково, берите то, что субъективно выглядит приятнее.
Если выглядит одинаково, бросьте монетку.

Обратите внимание, что в ответе нет никакого технического сравнения Vue и React. Это сделано по двум причинам: 1) провести его адекватно всё равно невозможно и 2) для такой задачи оно не будет иметь абсолютно никакого смысла.

Проблема не в get-параметрах, а в "лишнем" слэше на конце.
Библиотека сравнивает всё, что идёт до get с тем, что указано в адресе ссылки и, раз у вас указано end=true, то проверяется ещё и то, что адресом ссылки адрес страницы заканчивается в точности, и слэш на конце в адресе страницы не даёт этой проверке пройти.
Адрес localhost:3000/clips?page=2 должен работать как ожидается.

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

const [mode, setMode] = useState(null);

const handleDay = () => {
  setMode(mode === `day` ? null : `day`);
};
const handleWeek = () => {
  setMode(mode === `week` ? null : `week`);
};
const handleMonth = () => {
  setMode(mode === `month` ? null : `month`);
};
const handleYear = () => {
  setMode(mode === `year` ? null : `year`);
};

<кнопка onClick={handleDay}>Day</кнопка >
<кнопка onClick={handleWeek}>Week</кнопка >
<кнопка onClick={handleMonth}>Month</кнопка >
<кнопка onClick={handleYear}>Year</кнопка >

{mode === `day` && <div> <Components1/> </div>}
{mode === `week` && <div> <Components2/> </div>}
{mode === `month` && <div> <Components3/> </div>}
{mode === `year` && <div> <Components4/> </div>}

Ну или если вам уж очень хочется быть многословным, то так:

const handleDay = () => {
  setVisibleDay(!visibleDay);
  setVisibleWeek(false);
  setVisibleMonth(false);
  setVisibleYear(false);
};

const images = {
  red: smoke1Red,
  blue: smoke1Blue,
  brown: smoke1Brown,
}

...

<img src={images[color] || smoke1Gray} />

Ну какие варианты-то? Либо настраивайте VPN "во всех других местах", либо выносите "все другие места" за пределы России, либо храните все зависимости в репозитории и добавляйте их только локально.

Как я полагаю, у вас сейчас код выглядит так:
return arr.filter(...).map(...)

Разделите этапы "фильтрую" и "вывожу результаты" и вставьте между ними условие пустоты. Что ж тут сложного?

Те, кто знают Vue, могут написать проекты любой сложности на Vue.
Те, кто знают React, могут написать проекты любой сложности на React.
Использовать нужно то, что вы знаете или хотите изучить.

Включаю телепатию. Полагаю, что имеет место классика — при первом рендере значение не определено, а вы с ним пытаетесь работать, как с объектом. В консоли «пустое» значение тоже выводится, но вы его игнорируете.

Редьюсер должен возвращать новый state, ваш не возвращает ничего. Присваивать новый state локальной переменной бесполезно, да и вообще мутировать объект state нельзя.

Потому что в какой-то момент (вероятно, при первом рендере) products — это не массив.

Во-первых, у вас в команде ошибка:

npm install -g create-react-app

Во-вторых, зачем вы снова ставите глобально, если вам написали:

We no longer support global installation of Create React App

/menu/:id([1-9][0-9]*)

Регулярные выражения должны быть простыми и понятными, а не красивыми. Конструкцию (?!0) вам и вашим коллегам при следующей встрече с этим кодом, наверняка, придётся заново гуглить, а обычные группы понятны сразу.