antonini666

1. В вашем случае нет, вам же, насколько я понимаю, нужна навигация без перезагрузки страницы.
2. Забудьте на время разработки что такое JQuery и подходы которые с ним принято использовать. По поводу библиотек, экосистема react содержит множество библиотек. Так же есть смыл подключить библиотеку для ajax запросов axios/superagent/etc. Вообще, перед тем как подключать какую-либо библиотеку лучше 3 раза подумать, так как многие из них существенно увеличивают размер бандла, например, тот же moment. Для того чтобы быть в курсе того, что и сколько в вашем бандле занимает места можно подключить в prod сборку webpack-bundle-analyzer.
3. Почитайте про роутинг на стороне клиента. Для React разработки стандарт react-router.
4. SSR.

UPD: в 2023 году я бы всё же использовал ngrok.

Ставим npm и browser-sync: https://www.browsersync.io/

Запускаем локальный сервер (у меня Openserver), открываем консоль в локальной папке, где лежит ваш сайт и запускаем в ней browser-sync с опцией --proxy

browser-sync start --proxy mylocal.dev

browser-sync выдаст в консоль что-то такое:

[BS] Proxying: http://local.dev.domain
[BS] Access URLs:
 ------------------------------------
 Local: http://localhost:3002
 External: http://192.168.1.6:3002
 ------------------------------------
 UI: http://localhost:3003
 UI External: http://192.168.1.6:3003
 ------------------------------------

Вам нужен тот что External - http://192.168.1.6:3002, вбиваете его на телефоне и смотрите (естественно телефон должен быть подключен к той же сети, куда подключен и ПК).
Вот только что проверил с сайтом на Wordpress - работает.

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

const User = ({ firebase }) => {
  const [authUser, setAuthUser] = useEffect(null);

  useEffect(() => {}, [
    // код который в componentDidMount
    firebase.auth.onAuthStateChanged(authUser => {
      setAuthUser(authUser);
    });

    return () => {  // код который в componentWillUnmount
      // хз зачем тебе обращаться еще раз к API, можешь даже не писать этот return, но если надо, то делай необходимые вещи перед уничтожением компонента
      setAuthUser(null); 
    };
  ], []); // если массив пустой, то хук сработает один раз при монтировании компонента. Если массив не передавать, хук сработает при каждом рендере кмпонента. Если передать аргументы, то сработает при их изменении.
};

Стандартное решение вешать событие event click на внешний блок <div/>.
Тогда в event.currentTarget - получите элемент на котором событие произошло, ну и далее логика Ваша.

P.S. Приз моих симпатий за внятно сформулированный вопрос.

Если нужно дождаться загрузки абсолютно всех ресурсов, включая картинки, то можно так:

window.addEventListener('load', starter); // Ждем полной загрузки стр. и запускаем функцию starter()

function starter() {
    // Произвольный код
}

А в целом ваш вариант правильный:

document.addEventListener('DOMContentLoaded', starter); // Ждем готовности дерева элементов и запускаем starter()

function starter() {
    // Произвольный код
}

Ну еще можно так <script defer src="script.js"></script>

const newArr = arr.map((n, i) => n.repeat(i + 1));

или

const newArr = arr.map((n, i) => Array(i + 1).fill(n).join(''));

или

const newArr = arr.map((n, i) => Array(i + 2).join(n));

или

const newArr = [];

for (let i = 0; i < arr.length; i++) {
  let str = '';

  for (let j = 0; j <= i; j++) {
    str += arr[i];
  }

  newArr.push(str);
}

или

const newArr = [];

for (const n of arr) {
  let str = '';

  while ((str = str.concat(n)).length <= newArr.length) ;

  newArr[newArr.length] = str;
}