Антон Спирин

Смотря как и чем стилизован ваш компонент Link.
Допустим он не стилизован:

class Link = ({ href, children, ...props }) => <a href={href} {...props}>{children}</a>;

StyledComponents использует для стилизации свойство className, так как мы используем rest оператор наш компонент неявно передаст любое свойство элементу a, в том числе и передаваемое библиотекой className. Поэтому стилизовать можно так:

const StyledLink = styled(Link)`
  // some styles
`;

В случае если classNames уже используется компонентом, надо делать конкатенацию.
В случае использования inline стилей, по весу они значимей классов и переопределить стили без использования !important не получится. Тут лучше тогда все свои компоненты на StyledComponents перевести.

Особенность отображения объектов в консоли браузера. У вас объект меняется дальше по коду и в консоли вы видите актуальные значения, а не значения на момент вызова console.log и вывода.
Пример.

if (e.attributes[i].nodeName !== 'href' && e.attributes[i].nodeName !== 'src') {

Запись вида:

try {
  throw new Error('Ooops!');
} catch (e) {
  throw e;
}

Равносильна:
throw new Error('Ooops!');

Ошибку в блоке catch надо не инициировать, а обрабатывать:

try {
  throw new Error('Ooops!');
} catch (e) {
  alert(e);  // например, выводим ошибку в alert
}

Почему говорят что forEach меняет начальный массив

Кто говорит?

Этот пример, видимо, должен разрушить ваши неокрепшие шаблоны.

Изучайте основы JavaScript. forEach это лишь итерация по элементам массива с применением функции колбека. Остальное происходит по канонам JavaScript.

Так же динамический фон с постоянно меняющимся фоном и изображением.

javascript. Смотрите какие стили и как меняются на странице после ваших действий.

Что тут используется для прелоадера

<div class="progressbar" style="z-index: 2; opacity: 1;">
  <span id="progressbar" style=""></span>
</div>

и как они сделали такой фон? Наложили цветное изображение на фон?

<div class="projects__images js-projects--images" style="opacity: 1;">
  <div class="projects__image desaturate js-projects--image" style="z-index: 2; opacity: 0; background-image: url(&quot;http://www.poigneedemainvirile.com/wp-content/themes/p2mv/img/projects/180g/header.jpg&quot;);"></div>
  <div class="projects__image desaturate js-projects--image current" style="z-index: 1; background-image: url(&quot;http://www.poigneedemainvirile.com/wp-content/themes/p2mv/img/projects/xme-company/header.jpg&quot;); opacity: 1;"></div>
</div>

Учитесь пользоваться панелью разработчика и анализировать код самостоятельно. Своим вопросом, вы просите сделать это за вас.

class properties - это экспериментальный синтаксис.
babel-preset-stage-0 установите.
npm i -S babel-preset-stage-0
.babelrc:

{
  "presets": ["env", "react", "stage-0"]
}

Нельзя, так как функция, которую вы хотите вызвать, находится в области видимости анонимной функции колбека вызова $(document).ready(). Вам надо реорганизовать код.

Естественно, она же в локальном скоупе функции changeSlidePortfolio определена.
Ваши функции можно объединить в одну:

var changeSlidePortfolio = function (e) {
  e.preventDefault();
  var { action } = e.target.dataset;  

  var slides = document.getElementsByClassName('portfolio__col');
  var activeSlide = document.getElementsByClassName('portfolio__col-active')[0];
  var slidesLength = slides.length;

  for (var i = 0; i < slidesLength; i++) {
    if (slides[i] === activeSlide) break;

    var index = i;
  }

  var last = action === 'left' ? slidesLength - 1 : 0;

  if (index !== last) {
    var newIndex = action === 'left' ? index + 1 : index - 1;
    slides[index].classList.remove('portfolio__col-active');
    slides[newIndex].classList.add('portfolio__col-active');
  }
};

<a href="#" class="portfolio__arrow portfolio__arrow-left" data-action="left" onclick="changeSlidePortfolio();"></a>
<a href="#" class="portfolio__arrow portfolio__arrow-right" data-action="right" onclick="changeSlidePortfolio();"></a>

В какие тэги можно передавать параметры кроме тэга id?

id это не тег, а атрибут.

а в class указываю стиль для обработчика

Не стиль, а класс.

Бывает такое что нужно передавать больше пораметров, как это сделать?

Не знаю, что именно вы хотите, но можно использовать data-атрибуты

Рекомендую найти любой хороший учебник по html/css и изучить от корки до корки.

Но ведь массив который перебирается задаётся сразу перед методом

Массив не задается, нем лишь вызывается метод. Задаете вы его выше.

Для чего его пихать ещё и в callback-функцию-то, не пойму?

Колбек функция может передаваться из другого места и при этом использовать массив.
arr.forEach(callback);

transition
@keyframes

Думаю, пока лучшим вариантом для вас будет create-react-app или codesandbox.

Сама проблема в том, что вы открываете документ в браузере, а не получаете с сервера.

app.use('/static', express.static(__dirname + '/dist/static'));

Для продакшена статику лучше через nginx отдавать.

async getDetails(id) {
  const response = await fetch();
  if (response.status !== 200) {
    console.log('Код ошибки : ', response.status);
    return;
  }
  try {
     const data = await response.json();
     return data;
  } catch (err) {
    console.log('Fetch Error :-S', err);
  }
}

Естественно вызывать надо так:
this.getDetails(id).then(data => { });

или в асинхронной функции:
const data = await this.getDetails(id);

Потому-что когда последний раз срабатывает условие:
secVal <= 1000
secVal равно 1000
После вызова:
secVal++
значение становится 1001
следующей строкой вы запускаете новый таймаут
затем выводите 1001 в консоль
после этого запускается колбек последнего таймаута
условие дает false, secVal не увеличивается и новый таймаут не вызывается
в консоль снова приходит 1001