How to import JavaScript files to React Component-CodePudding

I have a web template and a lot of javascript files for design. I want to use this files with React component. I put the javascript files to index.html but its not working.

There is a lot of classes in the html for design, for example:

<h6 className="wow fadeInUp" data-wow-delay=".5s"><span className="text-uppercase id-color-2"> Market</span></h6>

It doesnt shown on the page.

I tried this solution: How to import js file to React component?

But there are a lot of functions, am i gonna add them all? I just import the file to component.

This is a file that i want to import, heres a part of this file:

import {$, jQuery} from 'jquery'; 
 /* --------------------------------------------------
  * © Copyright 2021 - Gigaland by Designesia
  * --------------------------------------------------*/
(function($) {
    'use strict';

     /* predefined vars begin */
     var mobile_menu_show = 0;
     var v_count = '0';
     var mb;
     var instances = [];
     var $window = $(window);
     var $tmp_h = '90';
     var $op_header_autoshow = 0;
     var grid_size = 10;
     /* predefined vars end */
     
     if($('header').hasClass("has-topbar")){
          $tmp_h = '125px';
     }

Any help would be appreciated.

CodePudding user response：

As I understood, you want to use jQuery with React?

I think it is not a good idea. If you put the everything into html, then that wouldn't part of the Virtual DOM of the React. The soul of the React application is the Virtual DOM! Everything what is on the application represented rendered through React.

But you can use React in a static way also. Please see here: https://reactjs.org/docs/add-react-to-a-website.html

Maybe you can use jQuery so...