Юрий Иванов

const sortedArr = arr
  .map(n => [ n, n[0].replace(/\D+/, '') ])
  .sort((a, b) => a[1].localeCompare(b[1]))
  .map(n => n[0]);

вспомнилось описание одного api
pgSize - 1...200 (default 20)
start - 0...total
example query https://example.com/api/users?pgSize=50&start=0
example answer

{
"start": 0,
"items": [],
pgSize: 50
}

Это анимация lottie, соответственно нужен сам плеер lottie, svg, json файл, в котором описана анимация...
В общем читай про анимации LOTTIE

Есть 3 способа подключить медиазапросы:
1 Прямо в HTML-документе

<link rel="stylesheet" media="(max-width: 700px)" href="example.css" />

2 Использовать правило import в CSS-файле
@import url(example.css) (max-width: 700px);

3 Директиву media в CSS-файле

@media (max-width: 700px) {
  /* Здесь прописывается CSS-правила */
}

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

.canvas {
  display: block;
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 0;
}

Если обрабатывать клики канвы никак не надо, то можно на нее повесить свойство pointer-events: none

arr.map((n, i) => n * matrix.reduce((acc, row) => acc + row[i], 0))

window.getComputedStyle(e1) - получает все вычисленные CSS-свойства
window.getComputedStyle(e1).color

открываете консоль браузера, и смотрите ошибки.
вангую: ошибки в регистре названий файлов.

Попробую на пальцах объяснить.

Событие – это конверт, на котором написано его название. Внутрь конверта можете вложить что-нибудь, а можете оставить конверт пустым.

Элемент – это столик. Кто угодно может подойти и положить на столик свой конверт.

Слушатель – это мужик, который топчется около столика и смотрит, нет ли чего с интересующим его названием. Может несколько человек поджидать конвертики с определённым названием – прочтут все, если только в конверте не написано «по прочтении съесть» – тогда кто-то съест и дальше не передаст.

Как создать/отправить конверт. В любом месте кода создайте конверт и дайте ему название: var myEvent = new Event('teaTime'); Остается положить конверт на нужный столик:

document.getElementById('stolik').dispatchEvent(myEvent);

Чтобы в событие вложить какие-то данные, нужно использовать другой конструктор и передать нагрузку в поле detail:

var event = new CustomEvent('saySomething', { detail: "Hello there!" });

Для чего нужно создавать свои события? Чтобы развязать куски кода. Например, в разных местах документа можно нажать на кнопку повторяющегося виджета. Виджет создаст на document событие "widgetClicked". А ещё несколько одинаковых компонентов в странице, слушающих document на предмет события "widgetClicked", получат пинок и что-нибудь вытворят.

const n3 = Math.floor(n / 3);
const n5 = Math.floor(n / 5);
const n15 = Math.floor(n / 15)
const sum = (n3 * 3 * (n3 + 1)  + n5 * 5 * (n5 + 1) - n15 * 15 * (n15 + 1)) / 2;

функция асинхронная, результат будет «не сразу». Возвращает Promise.

в другом компоненте:

getApiResource('https://api.vk.com').then(data => {
  // вот тут есть ответ
  this.setState({ vkData: data });
});

Чтобы получить следующую порцию записей, указываете в параметрах запроса per_page и page. Per_page это количество записей, которое Вам выдаст гитхаб (у вас это pageSize), page - количество этих per_page, которое нужно пропустить. Всё, что Вам нужно, это обновлять page. То есть для запроса следующей страницы нужно к текущему значению page прибавить per_page.

Чтобы проверить, есть ли куда листать -- проверяете пришедший с гитхаба total_count. Это кол-во записей всего по Вашему запросу.
if (page * per_page + per_page < total_count) { листаете }
Для наглядности: если укажете, например, page=2, per_page=4, github пропустит 8 репозиториев.

Чуть не забыла - в гитхабе page отсчитывается по умолчанию с единицы, а не с нуля.

Подробнее в документации: https://docs.github.com/en/github-ae@latest/rest/g...