Как преобразовать скрипт. js готовая функция-оболочка для документов и jquery методы плагина для использования в React (16.12.0)

Question

Я пытаюсь преобразовать старый скрипт. js файл, который действует как обертка для выбора HTML элементов для использования в $ jquery для Реагирования. В надежде экспортировать / импортировать в компонент страницы с помощью метода componentDidMount () и передать его jquery. Не знаете, как выполнить sh это?

Я пытался просто экспортировать функцию и импортировать ее, но npm жаловался "Ожидается вызов функции или назначения, и вместо этого он видит выражение"

//script.js

! function($) {
    "use strict";

    var KerriApp = function() {};

    //scroll
    KerriApp.prototype.initStickyMenu = function() {
        $(window).on('scroll',function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 50) {
                $(".sticky").addClass("stickyadd");
            } else {
                $(".sticky").removeClass("stickyadd");
            }
        });
    },

    //Smooth
    KerriApp.prototype.initSmoothLink = function() {
        $('.navbar-nav a').on('click', function(event) {
            var $anchor = $(this);
            $('html, body').stop().animate({
                scrollTop: $($anchor.attr('href')).offset().top - 0
            }, 1500, 'easeInOutExpo');
            event.preventDefault();
        });
    },

    //Scrollspy
    KerriApp.prototype.initScrollspy = function() {
        $("#navbarCollapse").scrollspy({
            offset:20
        });
    },

    //Typed
    KerriApp.prototype.initTextType = function() {
        $(".element").each(function() {
            var $this = $(this);
            $this.typed({
                strings: $this.attr('data-elements').split(','),
                typeSpeed: 100,
                backDelay: 3000
            });
        });
    },

    //Work
    KerriApp.prototype.initWork = function() {
        $(window).on('load', function () {
            var $container = $('.work-filter');
            var $filter = $('#menu-filter');
            $container.isotope({
                filter: '*',
                layoutMode: 'masonry',
                animationOptions: {
                    duration: 750,
                    easing: 'linear'
                }
            });

            $filter.find('a').on("click",function() {
                var selector = $(this).attr('data-filter');
                $filter.find('a').removeClass('active');
                $(this).addClass('active');
                $container.isotope({
                    filter: selector,
                    animationOptions: {
                        animationDuration: 750,
                        easing: 'linear',
                        queue: false,
                    }
                });
                return false;
            });
        });
    },

    //Magnificpop
    KerriApp.prototype.initMagnificPopup = function() {
        $('.img-zoom').magnificPopup({
            type: 'image',
            closeOnContentClick: true,
            mainClass: 'mfp-fade',
            gallery: {
                enabled: true,
                navigateByImgClick: true,
                preload: [0, 1]
            }
        });
    },

    //Client
    KerriApp.prototype.initTestimonial = function() {
        $("#owl-demo").owlCarousel({
            autoPlay: 7000,
            stopOnHover: true,
            navigation: false,
            paginationSpeed: 1000,
            goToFirstSpeed: 2000,
            singleItem: true,
            autoHeight: true,
        });
    },

    //PRELOADER
    KerriApp.prototype.initPreloader = function() {
        $('#status').fadeOut();
        $('#preloader').delay(350).fadeOut('slow');
        $('body').delay(350).css({
            'overflow': 'visible'
        });
    },

    KerriApp.prototype.init = function() {
        this.initStickyMenu();
        this.initSmoothLink();
        this.initScrollspy();
        this.initTextType();
        this.initWork();
        this.initMagnificPopup();
        this.initPreloader();
        this.initTestimonial();
    },
    //init
    $.KerriApp = new KerriApp, $.KerriApp.Constructor = KerriApp
}(window.jQuery),

//initializing
function($) {
    "use strict";
    $.KerriApp.init();
}(window.jQuery);

// Page Component

import React, { Component } from 'react';
import $ from 'jquery';
import { scriptjs } from '../assets/js/script';

class Page extends Component {
    componentDidMount() {

        //what do I do here? 

    }
  render() {
    return (
    <div>
      {/* Loader */}
      {/*<div id="preloader">
          <div id="status">
              <div className="spinner">Loading...</div>
          </div>
    </div>*/}

      {/* Start Navbar */}
      <nav className="navbar navbar-expand-lg fixed-top custom-nav sticky">
          <div className="container">

              <a className="navbar-brand pt-0 logo" name="top" href="#top">
                  <img src={require('../assets/images/logo.png')} alt="" className="img-fluid logo-light"/>
                  <img src={require('../assets/images/logo-dark.png')} alt="" className="img-fluid logo-dark"/>
              </a>

              <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                  <span className="mdi mdi-menu"></span>
              </button>

              <div className="collapse navbar-collapse" id="navbarCollapse">
                  <ul className="navbar-nav ml-auto">
                      <li className="nav-item active">
                          <a className="nav-link" href="#home">Home</a>
                      </li>
                      <li className="nav-item">
                          <a className="nav-link" href="#about">About</a>
                      </li>
                      <li className="nav-item">
                          <a className="nav-link" href="#services">Services</a>
                      </li>
                      <li className="nav-item">
                          <a className="nav-link" href="#client">Client</a>
                      </li>
                      <li className="nav-item">
                          <a className="nav-link" href="#work">Portfolio</a>
                      </li>
                      <li className="nav-item">
                          <a className="nav-link" href="#blog">Blog</a>
                      </li>
                      <li className="nav-item">
                          <a className="nav-link" href="#contact">Contact</a>
                      </li>
                  </ul>
              </div>
          </div>
      </nav>
      {/* End Navbar */}

      {/* START HOME */}

// code continues

Answer 1

Индекс кредитного плеча. html в папке publi c для загрузки jquery и пользовательских js сценариев. Я уверен, что это не идеальное решение, но выполняет свою работу.

, т.е. app / public / index. html

index. html

<!-- JAVASCRIPTS -->
<script src="%PUBLIC_URL%/js/jquery.min.js"></script>