Антон Спирин

Условие.
Выражение, выполняющееся на каждой интерации цикла. Если выражение истинно, цикл выполняется. Условие не является обязательным. Если его нет, условие всегда считается истиной. Если выражение ложно, выполнение переходит к первому выражению, следующему за for.

MDN: for

MobX - библиотека для управления состоянием приложения.
React Context API - интерфейс для передачи данных вниз по древу компонентов.

Какие преимущества у mobX, в сравнении с React context API

Преимуществ нет, так как у инструментов разные задачи.

import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
  childRef = React.createRef();

  render() {
    return (
      <Child innerRef={this.childRef} />
    );
  }
}

import React, { Component } from 'react';

export default class Child extends Component {
  render() {
    const { innerRef } = this.props;

    return (
      <div ref={innerRef}></div>
    );
  }
}

Interceptors

Можно обернуть вызов xhr в Promise:

function promiseWrapper(url) {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.send();
    xhr.onload = () => {
      resolve(xhr.response);
    };
  });
}

вызвать последовательно:

async function getData() {
  const [res1] = await promiseWrapper(url1);
  const [res2] = await promiseWrapper(url2);

  return res1 + res2;
}

и уповать на сборщик мусора.

Cсылки по теме:
Build your own Front-end Framework / Library
Didact: a DIY guide to build your own React
https://github.com/pomber/didact
Build Your Own React — A Step By Step Guide

В коде нет ошибок. Либо не подключен JQuery, либо в html отсутствует элемент с id="22"

1. Ставим любой удобный пакет по работе с cookie в браузере, например, js-cookie. Ну или пишем свой.
2. const myCookieValue = Cookie.get(MY_COOKIE_KEY);

function toSwitch(a) { /* ... */ }

JSON.stringify

Не писать же 4 условия?

Можно использовать регулярное выражение:

if ($parent[0].tagName == 'A' && (/\.(gif|jpg|webp|png)$/i).test($parent.attr('href'))) {
  // do something
}

И как определить, что это не внешняя ссылка?

function getDomain(url) {
  return url.replace('http://','').replace('https://','').split('/')[0];
}

function isExternal(url) {
  return getDomain(location.href) !== getDomain(url);
}

if (isExternal($parent.attr('href')) {
  // do something
}

Почитайте работает оператор new.
Узнайте, что классы это лишь синтаксический сахар над конструкторами и прототипами.

Интересно в первую очередь сделать это с помощью .map()

Никак. Используйте reduce и по-хорошему объект или Map.

var array = [
  { id: 1 },
  { id: 2 },
];

const obj = array.reduce((acc, el) => (acc[el.id] = el, acc), {});

console.log(obj); // { 1: { id: 1 }, 2: { id: 2 } }
console.log(obj[1]); // { id: 1 }

function mapData(data) {
  return data.map((el) => {
    const override = {
      newProp: 'value',
    };
  
    if (el.children) {
      override.children = mapData(el.children);
    }
  
    return { ...el, ...override };
  });
}

Например

1. Fetch работает. Ошибка на стороне сервера. Проверяйте сервер и учитесь работать с вкладкой network в панели разработчика.
2. В варианте с Fetch в body, вашем случае, надо передавать URLSearchParams

const body = new URLSearchParams();

body.set('key', 'value');

fetch(url, {
  method: 'POST',
  headers: {
    'Accept': 'application/x-www-form-urlencoded;charset=UTF-8'
  },
  body,
}).then(...);

3. Лучше используйте для запросов что-нибудь вроде axios.
4. SPA, по-хорошему, должно взаимодействовать с сервером по REST API, а данные передаваться в формате JSON. Никаких 'x-www-form-urlencoded' быть не должно.

и ещё вопрос, в jquery есть свойство crossdomain, подскажите плеаз как оно работает

Забудьте JQuery. Почитайте про CORS