Как добавить шаблоны html & js в компоненте react?

Судя по коду, вы просто взяли HTML и скопировали в React-компонент. Это так не работает.
Если у вас уже есть какая-то логика на чистом JS, ее придется переписать под React.

Почему абсолютно позиционированный блок не накладывается поверх другого?

WoodyAndBuzz,

Ну мы разве не задаем поситион абсолют для того чтобы он поверх встал остальных блоков

Это не так работает.

HTML - это документ. Элементы документа идут потоком, один за другим, позиционируясь относительно друг-друга.
position: absolute "выдергивает" элемент из потока, т.е. остальные элементы начинают позиционироваться, будто выдернутого элемента нет, а его мы можем "прибить" к нужному месту в интерфейсе. В этом заключается смысл position: absolute.
Но это не касается слоев отображения элементов. В HTML каждый следующий элемент "выше" предыдущего.
В примере есть два div'a, по порядку первый с абсолютной позицией, а второй обычный. Второй "выше" потому что в коде он идет следующим.
Это можно исправить или поменяв div'ы местами или задав им z-index.

Почему не отображается компонент через map()?

Из store.js не экспортирован store.
Должно быть export const store =[...];

Что делать, если не работает burger menu?

Арсений Смирнов, у тебя изначально "translateX(-100%)" у элемента "header-item", но в активном состоянии ты прописал "translateX(0)" для "header". По этому "header-item" остается на месте.

Как заказчик будет вносить правки на сайт?

magalalka, узнайте какую cms хочет заказчик, потом гуглите "натянуть вёрстку на cms (вставить нужное)"

На какую JS-библиотеку перейти с JQuery?

damarkuzz,
Мне кажется, нужна общая эрудированность по технологиям на js и умение искать информацию.

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

Второе гугля вопросы типа "как сделать?".
Анализируешь выдачу, видишь что какие-то библиотеки\фреймворки часто встерчаются в ответах. Пробуешь, выбираешь то что больше по вкусу.
Например, "как сделать SPA?". В ответах часто будут "react"\"vue". Пробуешь оба. Понравился, например, vue. Используешь.

Ну и здесь всегда можно спросить, самый простой вариант )

Как типизировать reduce Typescript?

Дмитрий Беляев, просто как заготовка, если reduce нужно будет применить к массиву более сложных типов.
В конкретном примере выше, это все излишне, согласен.

Как изучить js бэм?

если вы читали, но мало поняли, потом искали, но не нашли, может оно вам и не надо? )

Почему мало вакансий верстальщика в Минске?

Pavel_20, посмотрите вакансии на junior frontend, там почти все тоже самое, кроме js.

Пишу сайт на Express и Handlebars. Почему не подключаются стили?

kirillmoroz, извини, но мне нужно повторить вопрос - как ты подключаешь стили?
Пока в коде только как ты настроил роутинг и какие данные должна отдавать страница. Где указываешь подключение CSS?
В html, который отдает сервер, должен быть тег , но судя по скрину ошибки, или его нет, или подключенный css пустой.

Пишу сайт на Express и Handlebars. Почему не подключаются стили?

а как вы подключаете стили?

Можно ли верстать все сайты по БЭМу?

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

Как решить проблему с поломкой верстки в Laravel?

vs-vs, а вы можете выложить страницу где воспроизводится проблема?

Как решить проблему с поломкой верстки в Laravel?

Выложите куда-нибудь html\css который рендерится после натяжки.

Нужно отсоединить бургер кнопку (меню) от крестика (закрыть)?

Дмитрий Филатов, это не кнопка бургера остается в меню, это на самом деле кнопка крестика (просто позиция в точности совпадает с положение бургера), которая лежит в меню.
Содержимое кнопки (линии изображающие крест ".menu-icon_line"), ты передвинул с помощью свойства left.
Но нужно было передвинуть саму кнопку ".menu-icon_box".
1) у ".menu-icon_line" замени left и top на меньшие значения, чтобы линии оказались в центре кнопки.
2) самой кнопке ".menu-icon_box" задай свойство right: -50px; (более точное значение подгонишь сам).

Специфичные теги article и figure. Применяете ли вы их и в каких случаях?

MyQuestion,

Я знаю теорию. То, что я спрашиваю - как вы делаете на практике? Я хочу знать мнение, практического применения, от опытных разработчиков, что бы потом не переучиваться.

На практике конечному заказчику бывает фиолетово на семантику и доступность. Особенно, если речь идет о каком-нибудь временном проекте (например, лэндинг меропрития или MVP какого-нибудь сервиса).
Обычно, главное чтобы было сделано быстро и смотрелось красиво.

Да, если проект долгоиграющий, заниматься семантикой нужно. Но опять-таки, очень зависит от стадии проекта. Если сроки горят и нужно быстрее быстрее, правильную семантику можно отложить на потом, а сейчас делать так как кажется верным.

Как верстается промо-обертка для сайта?

а что вы вкладываете в слово "промо-обертка"? Чем она отличается от "обычной обертки"?

Нужно отсоединить бургер кнопку (меню) от крестика (закрыть)?

Дмитрий Филатов, обрати внимание как строится кнопка бургера. В CSS уже все написано.

<a href="#" class="menu-icon js-menu_toggle open">
......
</a>

В этом коде не хватает линий (это span'ы с menu-icon_line) и оберток (burger_box, menu-icon-container).
В общем, замени крестик на этот код.

<div class="burger_box">
		<div class="menu-icon-container">
			<a href="#" class="menu-icon js-menu_toggle opened">
				<span class="menu-icon_box">
					<span class="menu-icon_line menu-icon_line--1"></span>
					<span class="menu-icon_line menu-icon_line--2"></span>
					<span class="menu-icon_line menu-icon_line--3"></span>
				</span>
			</a>
		</div>
	</div>

Его не будет видно на белом фоне, по этому поменяй его положение через абсолютную позицию и добавь анимацию появления \ исчезновения.

Специфичные теги article и figure. Применяете ли вы их и в каких случаях?

MyQuestion, что такое большой и малый БЭМ?

Нужно отсоединить бургер кнопку (меню) от крестика (закрыть)?

Дмитрий Филатов, вы, наверное, на нажали "Сохранить", в коде нет ни одной моей рекомендации.