title: Loading external js script in a React app
body: <p>I have a React app created with create-react-app. Somebody gave me an external script to load, with three common jquery libraries. So I've searched a lot on the web to understand how to do it, but somehow, it doesnt' work.</p>
  <p>My script can be found into the src/assets/js folder. And i use a tsconfig.json to make my base import url to &quot;src&quot; and I'm using react-router.</p>
  <h1>Method #1 - react-load-script - not working</h1>
  <p>I tried to load script with this library from NPM</p>
  <pre class="lang-js prettyprint-override"><code>function App() {
    return (
      &lt;React.Fragment&gt;
            &lt;Script
              url=&quot;https://code.jquery.com/jquery-1.11.0.min.js&quot;
            /&gt;
            &lt;Script url=&quot;assets/js/myscript.js&quot; /&gt;
            &lt;SwitchRouter /&gt;
      &lt;React.Fragment&gt;
    );
  }
  </code></pre>
  <h1>Method #2 - homemade method with useEffect - not working</h1>
  <p>I tried to load script in a useEffect</p>
  <pre class="lang-js prettyprint-override"><code>function App() {
    const appendScript = scriptToAppend =&gt; {
        const script = document.createElement(&quot;script&quot;);
        script.src = scriptToAppend;
        script.async = true;
        document.body.appendChild(script);
      };
  
      appendScript(&quot;assets/js/myscript.js&quot;)
      appendScript(&quot;https://code.jquery.com/jquery-1.11.0.min.js&quot;)
    }, []);
    return (
      &lt;React.Fragment&gt;
            &lt;SwitchRouter /&gt;
      &lt;React.Fragment&gt;
    );
  }
  </code></pre>
  <h1>Method #3 - In the index html - partially working</h1>
  <p>I tried to add directly the script in the public folder, and import it in the index.html, it work on the first load, but whenether you switch pages, the script isn't working anymore</p>
  <pre class="lang-html prettyprint-override"><code>&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;/body&gt;
  &lt;script src=&quot;https://code.jquery.com/jquery-1.11.0.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;./myscript.js&quot;&gt;&lt;/script&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  <p>So i'm kind of stuck because of this problem, have you an idea to explain why it is not working here ?</p>