Why are my scripts not added to a react project?

by

I am trying to add js scripts (that are fully functional) to a react project. I know its not best practice but lets say i have to do it. I tried to add them using useEffect:

useEffect(() => {
  const script = document.createElement('script');
  script.src = "./js/app.js";
  script.async = true;
  document.body.appendChild(script);
return () => {
    document.body.removeChild(script);
  }
}, []);

and using react helmet:

export const Script = () => {
    return(
        <Helmet>
            <script type="text/javascript" src="./js/libs/jquery-3.1.1.min.js"></script>
            <script type="text/javascript" src="./js/app.js"></script>
        </Helmet>
    )
}

export default Script;

But in both version the scripts don’t work.

My app.js:

$(function() {
    var $body = $('body');


    //----------  Close on click Outside of Container
    //------------------------------------------------------------------------------
    function clickOutsideContainer(selector, container, callback) {
        selector.on('mouseup', function (e) {
            e.stopPropagation();
            if (!container.is(e.target) && container.has(e.target).length === 0) {
                callback();
            }
        });
    };

    //----------  Modal
    //------------------------------------------------------------------------------
    function modal() {
        var modalInit = $('.js-modal-init');
        var modalInner = $('.js-modal-inner');
        var modalSel = $('.js-modal');
        var modalShowClass = 'is-visible';

        modalInit.on('click', function() {
            modalSel.addClass(modalShowClass);
        });

        function closeModal() {
            modalSel.removeClass(modalShowClass);
        };

        clickOutsideContainer($body, modalInner, closeModal);
    }

    modal();

});

285 thoughts on “Why are my scripts not added to a react project?”

Leave a Comment