На околоайтишных форумах рунета нередко попадаются самородки, назойливо пиарящие самого себя любимого в стиле "я программист, но пишу без 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 SLIDES = [
  { text: 'Professional Ruby on Rails Developer looking for job offers.', bgColor: '#0033FF' },
  { text: 'PHP, Ruby, Ruby on Rails, Sinatra, Grape, MariaDB, PostgreSQL, Redis, jQuery, AJAX, XML, JSON, SCSS, HTML.', bgColor: '#660000' },
  { text: 'React', bgColor: '#9933CC' },
  { text: 'Heroku, AWS (including Cloud formation and Cloud-init) and VMware as Infrastructure. Git for source code.', bgColor: '#009900' },
  { text: 'Development of high load projects.', bgColor: '#3333FF' },
  { text: 'Maintained a distributed Unix infrastructure, Linux Administration (RHEL/CentOS/Fedora, OpenSuse Leap/Tumbleweed).', bgColor: '#CC6600' },
  { text: 'Ruby on Rails - Imagine, design, build web apps and bring your dreams to life with Rails 4 / 5 / 6 / 7.', bgColor: '#FF0000' },
  { text: 'Create an eCommerce website: Prestashop, Magento, OpenCart, ModX, Joomla, VirtueMart, K2Store, JoomShopping.', bgColor: '#333399' },
  { text: <a href="mailto:Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в браузере должен быть включен Javascript.">Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в браузере должен быть включен Javascript.</a>, bgColor: '#006666' },
];

const sliderConfiguration = {
  autoplay: 4000,
};

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

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

  return (
    <FogComponent>
      <div ref={ref} className="glide">
        <div className="glide__track" data-glide-el="track">
          <ul className="glide__slides">
            {SLIDES.map((slide, index) => (
              <li key={index} className="glide__slide">
                <div className="container" style={{ backgroundColor: slide.bgColor }}>
                  {slide.text}
                </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]">
          {SLIDES.map((_, index) => (
            <button key={index} className="glide__bullet" data-glide-dir={`=${index}`}></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

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