Владимир Проскурин

Header у вас является компонентом, а не элементом (экземпляром). Поэтому получая его из пропсов, вы получаете обычный компонент, который стандартным образом рисуете.

const { Header, Footer } = this.props;

return (
    <Fragment>
        <Header />
        <Footer />
     </Fragment>
);

Но лучше передавать не компонент, а render функцию https://reactjs.org/docs/render-props.html.

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

let form__control = document.getElementById("form__control__text"),
      mtbut = document.getElementById("mtbut");
mtbut.onclick = function(){   
    let form__control__text = form__control.value,
    let res = form__control__text*470;
    itogo.textContent = "Итого: "  + res + "грн.";
}

SVG не HTML, это XML, поэтому все теги должны закрываться.
<path d="*секрет*" />

Ну

let arr = [20, 30, 1, "Человек", 2, 3];
let isNumericArr = arr.filter(x => typeof x === 'number');

Сюда попадет и NaN, но если вам мешает только строка, то норм. Можно конечно добавить дополнительную проверку isNaN.

Когда вы пишите так
settings[idf][objectKey]
в случае, если в settings нет ключа idf, то это будет выглядеть вот так
undefined[objectKey]
что является ошибкой. Поэтому нужно написать вот так

var options = idf in settings && objectKey in settings[idf] ? settings[idf][objectKey] : '';

т.е. проверяем сначала существование settings[idf], потом уже settings[idf][objectKey];

Плохо писать текст в элемент через innerHTML.
Второй вариант короче (на одну строку), и подходит тогда, когда потом нужно снова использовать element. Мне кажется, он предпочтительнее.
UPD: ой, я и не заметил (читая вопрос через смартфон), что в первом коде используется два раза равенство. Такой код работать будет, но он не явный, а неявные штуки - зло. Новичков он может поставить в ступор, т.к. не сразу ясно, что будет содержаться в переменной. И этот код также похож на опечатку, типа вероятно нужно было использовать сравнение (в данном случае, по названию переменной все понятно, но все же).

Я вижу, что после загрузки страницы, все элементы каталога перерисовываются (вероятно, это фильтр так делает), а значит, теряют все обработчики событий.
Вы можете написать так

$('.content').on('click', '.opening2', function(){
    $(this).parent().children('div.sp2').toggle('normal');
    return false;
});

Есть событие onresize
Слушаете его в своем компоненте. и при срабатывании выполняйте нужный метод.

Так у вас тут

data: {
          pk: 11,
          img: formData,
        },

img это не картинка, это FormData. Правильнее вот так

var formData = new FormData();
      // добавляем в объект FormData файл
      formData.append('img', file.prop('files')[0]);
      formData.append('pk', 11);
      $.ajax({
        url: "http://127.0.0.1:8000/api/v2/update-ava/11/",
        data: formData,
...

1) Скрыть элемент через стили (если они загружаются в шапке не асинхронно, ну или добавьте inline стили к элементу), после загрузки поменять текст и показать.
2) Скрыть через стили, добавить текст через стили, через свойство content. Чтобы не кидать текст в CSS файл, используйте функцию attr. Пример https://jsfiddle.net/y86e3a4m/

Наверное, выполняете в консоле браузера на новой пустой вкладке или обычном html файле с локального диска?
Кукисы прицепляются к домену. Нужен домен. Разверните статический сервер, например этот https://www.npmjs.com/package/static-server

Если над одним элементом выполняется несколько анимаций, то при запуске анимации следует останавливать предыдущую анимацию. Вот так

$('#line3').stop().animate({
        opacity: 1,
        width: "35px"
    }, 600);

Так для каждого вызова animate

Используйте такую директиву v-cloak для блока с вашим приложением. vue удалит его после инициализации, а значит, можно написать такой css, который будет прятать блок с таким атрибутом.

div[v-cloak] {
    display: none;
}

document.getElementsByClassName возвращает список элементов, а не один элемент.

let heroBlocks = document.getElementsByClassName('hero');
if (heroBlocks.length > 0) {
   let hero = heroBlocks[0];
   console.log(hero.offsetHeight);
}

ну, или можно в лоб

let hero = document.getElementsByClassName('hero')[0];
console.log(hero.offsetHeight);

или используя querySelector

let hero = document.querySelector('.hero');
console.log(hero.offsetHeight);

UPD: дам совет, научитесь использовать инструменты отладки, например вкладка Sources инструментов разработчика хрома. Там можно проставить breakpoint точку остановки скрипта, и навести мышкой на нужную переменную, и узнать, что же она на самом деле содержит.
Ну, или дедовским способом

let hero = document.getElementsByClassName('hero');
console.warn(hero);  // выведет HTMLCollection [], вы сразу поймете, что это не элемент, а коллекция/список.

ОпСоСы давно грешат встраиванием рекламы в сайты, которые без https. Судя по тому, что у вас на смартфоне оператор мегафон, и реклама тоже от мегафона, вероятно, это реклама вашего оператора.