На околоайтишных форумах рунета нередко попадаются самородки, назойливо пиарящие самого себя любимого в стиле "я программист, но пишу без MVC, контролеров и моделей, мне так больше нравится", они же - ярые противники фреймворков, и т.д. и т.п. Таких немало на searchengines.guru, и не только там... для краткости примем как аксиому, что одной из основ подобного экзистенциального нигилизма всегда служит элементарное незнание предмета, и не будем уподобляться бедолагам, чьи потуги весьма напоминают деревенских персонажей Шукшина, изобретающих вечный двигатель, оно же лекарство от рака или гениальное художественное полотно в стиле соцреализма. "Надо было сразу позвать меня, а не тратить столько времени на эту мазню", горячий привет и пожелание дальнейшего благоденствия серчу с его бригадой модераторов, денно и нощно строчащих посты от имени псевдопользователей; в качестве антитезы - сделаем все грамотно и, в целях познания, напишем сегодня удобочитаемый код под фреймворк React, воспользовавшись create-react-app, отличной утилитой от Facebook (объявленного, понятное дело, террористом / иностранным агентом в РФ; вот только альтернативы FB отчего-то не объявлено, не ВКонтакте_со_следаками и не Одноглазники же?).

Замечу, что существуют специализированные решения под React; например, react-glide. Но мы не ищем легких путей, потому и реализуем данную интеграцию самостоятельно. И - по всем правилам грамотного code style.

Не стану в очередной раз останавливаться на пространном описании создания приложения посредством create-react-app, чего несть числа в Сети и имеет место быть даже в этом блоге. Сходу перейдем к нашему js, который способен выглядеть примерно так:

 App.js

import { useRef, useEffect } from "react";
import Glide from "@glidejs/glide";
import FogComponent from "./components/FogComponent";
import "./App.css";
import "./styles.scss";

const sliderConfiguration = {
  autoplay: 4000,
};

function App() {
  const ref = useRef();

  useEffect(() => {
    const slider = new Glide(ref.current, sliderConfiguration);
    slider.mount();
  }, [ref]);

  return (
    <FogComponent>
      <>
        {" "}
        <div ref={ref} className="glide">
          <div className="glide__track" data-glide-el="track">
            <ul className="glide__slides">
              <li className="glide__slide">
                <div
                  className="container"
                  style={{ backgroundColor: "#0033FF" }}
                >
                  one
                </div>
              </li>
              <li className="glide__slide">
                <div
                  className="container"
                  style={{ backgroundColor: "#660000" }}
                >
                  two
                </div>
              </li>
              <li className="glide__slide">
                <div
                  className="container"
                  style={{ backgroundColor: "#9933CC" }}
                >
                  three
                </div>
              </li>
            </ul>
          </div>

          <div className="glide__arrows" data-glide-el="controls">
            <button
              className="glide__arrow glide__arrow--left"
              data-glide-dir="<"
            >
              prev
            </button>
            <button
              className="glide__arrow glide__arrow--right"
              data-glide-dir=">"
            >
              next
            </button>
          </div>

          <div className="glide__bullets" data-glide-el="controls[nav]">
            <button className="glide__bullet" data-glide-dir="=0"></button>
            <button className="glide__bullet" data-glide-dir="=1"></button>
            <button className="glide__bullet" data-glide-dir="=2"></button>
          </div>
        </div>
      </>
    </FogComponent>
  );
}

export default App;

Полностью код доступен в репо GitHub, там же ссылка на демку, знаменующую результат творческих усилий. В любой момент можно свериться с кодом рабочего приложения, а при желании - клонировать или форкнуть.

К слову. Совсем необязательно импортировать именно sass, как в показанном примере: установленный из npm пакет -

npm i @glidejs/glide

- содержит, в том числе, и css стили. Но если планируется использовать sass, не забудьте установить соответствующий модуль:

npm i sass --save-dev

В качестве анимационного бэкграунда слайдера glide.js использован vanta.js актуальной версии. А вот для рендеринга с использованием WebGL рекомендую использовать старую версию three, если хотите избежать ошибок в консоли разработчика и, как следствие, плясок с бубнами:

npm i vanta Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в браузере должен быть включен Javascript..0

Возможно, на момент публикации статьи описанная проблема уже решена разработчиком.

Под бэкграунд создадим компонент во вновь созданной директории components:

FogComponent.js

import React, { Component } from "react";
import FOG from "vanta/dist/vanta.fog.min";
import * as THREE from "three";

class FogComponent extends Component {
  constructor() {
    super();
    this.vantaRef = React.createRef();
  }

  componentDidMount() {
    this.vantaEffect = FOG({
      el: this.vantaRef.current,
      THREE: THREE,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      highlightColor: 0xe1ff00,
      midtoneColor: 0xeb3921,
      lowlightColor: 0x272537,
      baseColor: 0x354291,
      blurFactor: 0.78,
      speed: 2.10,
      zoom: 0.8
    });
  }
  componentWillUnmount() {
    if (this.vantaEffect) this.vantaEffect.destroy();
  }
  render() {
    return (
      <div style={{ height: "100vh", width: "100%" }} ref={this.vantaRef}>
        {this.props.children}
      </div>
    );
  }
}

export default FogComponent;

Не забываем про стили:

App.css

.glide {
  padding-top: 3em;
}

.glide__slide {
  height: 20em;
  opacity: 0.5;
}

.container {
  margin: 0 auto;
  height: 300px;
  max-width: 75% !important;
  color: white;
  font-size: 1.3rem;
  padding: 10%;
  text-align: center;
}

styles.scss

@import "node_modules/@glidejs/glide/src/assets/sass/glide.core";
@import "node_modules/@glidejs/glide/src/assets/sass/glide.theme";

И после npm start все уже должно работать.

Опубликовав код приложения на гитхабе, получаем возможность бесплатного хостинга данного React App там же (сайт-то ведь у нас с вами статический). Для чего добавляем в package.json адрес странички приложения:

"homepage": "https://<account_name>.github.io/<app_name>",

и еще буквально пару строк:

"predeploy": "npm run build",
"deploy": "gh-pages -d build",

Последний штрих:

npm i gh-pages --save-dev

и:

npm run deploy

Буквально через минуту (немного терпения после окончания деплоя) ваше новое приложение развернуто и готово к просмотру.