title: How to use external js files in index.html React
body: <p>I am using an HTML template, which I converted to React by placing the assets folder into public (in React). I put the both the css files link and js scripts to public index.html (see code below). The css is displayed properly, however, the javascript functions aren't working. I tried installing jquery, but it still doesn't work.</p>
  <p>I tried to put the js files into the src files and import it in the App.js file as: <code>import './js/main.js'</code>.
  This also doesn't work and logs errors such as:
  <em>Expected an assignment or function call and instead saw an expression</em> and <em>'jquery' is not defined</em>.</p>
  <p>Index.html:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;link rel=&quot;icon&quot; href=&quot;%PUBLIC_URL%/favicon.ico&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
      &lt;meta name=&quot;theme-color&quot; content=&quot;#000000&quot; /&gt;
      &lt;meta
        name=&quot;description&quot;
        content=&quot;Web site created using create-react-app&quot;
      /&gt;
      &lt;link rel=&quot;apple-touch-icon&quot; href=&quot;%PUBLIC_URL%/logo192.png&quot; /&gt;
      &lt;link rel=&quot;manifest&quot; href=&quot;%PUBLIC_URL%/manifest.json&quot; /&gt;
      &lt;link href=&quot;%PUBLIC_URL%/assets/css/main.css&quot; rel=&quot;stylesheet&quot;&gt;  
    &lt;link href=&quot;%PUBLIC_URL%/assets/css/fontawesome-all.min.css&quot; rel=&quot;stylesheet&quot;&gt;  
    &lt;link href=&quot;%PUBLIC_URL%/assets/css/noscript.css&quot; rel=&quot;stylesheet&quot;&gt; 
  
      &lt;title&gt;React App&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;noscript&gt;You need to enable JavaScript to run this app.&lt;/noscript&gt;
      &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
  
      &lt;!-- jQuery CDN - Slim version (=without AJAX) --&gt;
      &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.slim.min.js&quot; integrity=&quot;sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;!-- Popper.JS --&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js&quot; integrity=&quot;sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;!-- Bootstrap JS --&gt;
      &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js&quot; integrity=&quot;sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;%PUBLIC_URL%/assets/js/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;%PUBLIC_URL%/assets/js/jquery.scrollex.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;%PUBLIC_URL%/assets/js/browser.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;%PUBLIC_URL%/assets/js/breakpoints.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;%PUBLIC_URL%/assets/js/util.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;%PUBLIC_URL%/assets/js/main.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  <p>Does anyone know why the js files aren't working? Any help would be highly appreciated.</p>
  <p>Thanks in advance!</p>