Юрий Иванов

Как вариант - использование переменной:

$color-base: 64, 126, 201;

.element {
  background-color: rgba($color-base, 1);
}

.element-transparent {
  background-color: rgba($color-base, 0.3);
}

Чуть сложнее:

$color-base: 64, 126, 201;
$alpha-1: 1;
$alpha-2: 0.3;

.element {
  background-color: rgba($color-base, $alpha-1);
}

.element-transparent {
  background-color: rgba($color-base, $alpha-2);
}

setState((prev)=>{
 //do something
 return [...prev]
})

{initialState.map((el, idx) => (
        <input
          onChange={(e) => showValue(e.target.value, idx)}
          key={el.placeholder}
          placeholder={el.placeholder}
          type={el.type}
        />
      ))}

const showValue = (value, index) => {
    setState((prev)=>{
    prev[index].value = value
    return [...prev]
})
  };

function stringChallenge(str) {
  let $ = ['*', '', '-'], _ = $[1];
  for (let i = 0.666, a, b; a = str[~~i], b = str[-~i], i < str.length - 1; i++) {
    _ += a + ((+a && +b) ? $[(a & 1) + (b & 1)] : $[1]);
  }
  return _.concat(str.at(-1));
}

const StringChallenge = (str) =>
  str.replaceAll(/(?<=[13579])(?=[13579])/g, '-')
     .replaceAll(/(?<=[2468])(?=[2468])/g, '*');

const StringChallenge = (str) => 
  str.split('').reduce(
    (acc, dig) => {
      const sign = +dig ? (dig % 2 ? '-' : '*') : '';
      return {
        str: acc.str + (acc.sign === sign ? sign : '') + dig,
        sign,
      };
    },
    { str: '', sign: '' },
  ).str;

const bullshitInsert = str => str
  .replace(/(?<=[2468])(?=[2468])/g, '*')
  .replace(/(?<=[13579])(?=[13579])/g, '-');

или

const bullshitInsert = str => Array
  .from(str, (n, i) => (n * str[i - 1] && !((n ^ str[i - 1]) & 1) ? '*-'[n & 1] : '') + n)
  .join('');

Лучше поздно, чем никогда.

Самый простой и производительный вариант - swup.js .
Встраивается во что угодно за пару минут + имеет огромное кол-во ивентов, для перезагрузки js (а также отдельный плагин). Анимацию можно реализовать как на чистом css, так и с помощью GSAP.

Примеры сайтов, использующих swup:
Panasonic
Raiffeisen Bank
Plan-k

Не без косяков конечно.
Порой приходится знатно поколдовать, чтобы заставить его работать с подключаемым извне кодом (прим: виджеты b24, скрипты метрик и т.д..);

А искал в гугле? CSS custom selection. Можно менять не только цвет выделения, но еще кучу всего

::selection {
  background: green;
  color: grey;
}

Состояние это что-то локальное. Только на конкретной странице браузера. Если вы хотите чтобы у 2 отдельно открытых страниц было синхронизированно состояние то вам нужно использовать веб сокеты. Ну или другими протоколами. Можно по http сделать. Это лучший вариант
Есть костыль с cохранением в IDB https://learn.javascript.ru/indexeddb
или в localstorage, но костыль) Если по -человечески то подклдючать работу бэка

тот стейт, который в редуксе - он общий внутри дерева реакт на одной вкладке. Чтобы пошарить на другие вкладки, можно, например, сохранять в localStorage, а по событию window.addEventListener('storage', ...) отлавливать изменения и подтягивать их в стейт-манагер. Это будет состояние в пределах браузера.
Можно сразу сохранять на сервер - старым добрым аяксом, вебсокетами, и т.д., тут нужны доработки на бэке. Такой путь сложнее, чем localStorage, но с той же корзиной может быть по другому никак - если единиц товара не очень много, то надо оперативно отслеживать его доступность другим пользователям.

const maskCcNumber = num => {
  const str = num.toString();
  const length = str.length;
  const keep = 4;
  if (length < keep) return str;
  const star = '*';
  return str.substring(0, 4) + star.repeat(length - 4);
}

maskCcNumber(454511111111112) // 4545***********

Или в одну строчку

"454511111111112".replace(/(.{4})(.*)/, (_, p1, p2) => p1 + '*'.repeat(p2.length))

см. String.replace()

Попробуй так

<button
            style={{backgroundColor: `${color}`}}
            onClick={ (e):void => { e.preventDefault(); indexisbtnActive() } }
            className={styles.hero__add}>
            <img src={imgBtn}/>
            {btnText}
          </button>

нужно остановить всплытие события, чтобы оно до Link не доходило.

Вопрос задан не очень верно. React из него, на текущем уровне следует выкинуть.
Далее ознакомится с пирамидой тестирования. Это уже закроет часть вопросов о том, что к какому типу тестов относится. Только после этого следует переходить к специфики реакта.

Но если ответить на вопрос, то функции с помощью jest или аналогов.
Сами компоненты React-Testing-Library + Jest
Взаимодействие компонентов либо всё теми же React-Testing-Library + Jest, либо чем-то из интеграционных: TestCafe или Cypress или аналогом
Ну и полные сценарии от открытия страницы до совершения последнего в цепочке целевого действия TestCafe или Cypress или аналогом

Рекомендуют покрытие Unit тестов не менее 90%, причем после обработки через stryker mutator
Интеграционные и e2e по критическим сценариям

Как-то так

Можете написать свою обёртку - https://github.com/rstacruz/nprogress

const pages = [...Array(Math.ceil(reposCount / elementsCount) + 1).keys()].slice(1)

const pages = Array.from({ length: Math.ceil(reposCount / elementsCount) }, (_, i) => i + 1);

или

const pages = new Array(Math.ceil(reposCount / elementsCount)).fill(null).map((_, i) => i + 1);

или

function* range(from, to) {
    for (let i = from; i <= to; i++) {
        yield i;
    }
}

const pages = [...range(1, Math.ceil(reposCount / elementsCount))];

JS чувствителен к регистру

querySelectorALL - неправильно
querySelectorAll - правильно

Как при наведении курсором на изменять цвет сразу у двух?

Начните с простого:
ответьте на вопрос, почему это вообще две ссылки?

После этого ссылка станет одной и проблема решится сама собой.

Собрать новый массив:

const newData = data.map((n, i, a) => ({
  ...n,
  newSick: n.sick - (i < ~-a.length && a[-~i].sick),
}));

Добавить свойство элементам существующего массива:

data.forEach((n, i, a) => n.newSick = n.sick - (a[i + 1]?.sick ?? 0));
// или
data.reduceRight((prev, n) => (n.newSick = n.sick - prev, n.sick), 0);