title: Converting a dynamic HTML page to React/JSX
body: <p>As a simple example, suppose I had these two files:</p>
  
  <h3>example.html</h3>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Button example&lt;/title&gt;
      &lt;script type="text/javascript" src="ButtonHandler.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body id="body" onload="init()"&gt;
      &lt;button onclick=buttonHandler.writeToConsole()&gt;Button&lt;/button&gt;
      &lt;script&gt;
  
          function init() {
              buttonHandler = new ButtonHandler();
          }
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <h3>ButtonHandler.js</h3>
  
  <pre><code>function ButtonHandler() {
  
  };
  
  ButtonHandler.prototype.writeToConsole = function () {
      console.log('Writing');
  }
  </code></pre>
  
  <p>This simply prints to the console whenever the button is clicked.</p>
  
  <p>Ignore that the ButtonHandler's constructor is empty, and that I could just easily call 'console.log' in the onclick directly. This is a simplified version of an issue I'm having, with several classes.</p>
  
  <p>My question is, how would I go about translating this to React/JSX, <strong>ideally without modifying the Javascript files</strong> (in this case, just ButtonHandler.js). Ideally this means no exporting/importing, I'd like to do it how the HTML file does it - it just links to the script in the &lt;\head>.</p>
  
  <p>The closest I have is something like this:</p>
  
  <h3>convert.jsx</h3>
  
  <pre><code>import * as React from 'react';   
  
  export default class Entry extends React.Component {
      constructor(props) {
          super(props);
      }
  
      componentDidMount() {
          buttonHandler = new ButtonHandler();
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;title&gt;Button example&lt;/title&gt;
                  &lt;button onclick="buttonHandler.writeToConsole()"&gt;Button&lt;/button&gt;
              &lt;/div&gt;
  
          )
      }
  }
  </code></pre>
  
  <p>But I get the error that ButtonHandler is undefined. I followed this <a href="https://stackoverflow.com/a/49714329/8686793">stackexchange answer</a> and placed</p>
  
  <pre><code>&lt;script type="text/javascript" src="[rest of path...]/ButtonHandler.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>in the public/index head, and I added the 'window.ButtonHandler' in componentDidMount(), but I still get the error that it's undefined. </p>
  
  <p>Am I doing something wrong, and if not, what other approach can I take?</p>
  
  <p>edit: When I put ButtonHandler.js in the public folder with index, and I console log the window, I see it appear as a function of window, like the stackexchange answer describes. This doesn't happen when I have it in another folder, though. Same error however.</p>
  
  <p>edit 2: Seems the only solution is to put ButtonHandler.js in the public folder and then call it in the constructor like the selected answer says. Then add a </p>
  
  <p><code>&lt;button onClick={() =&gt; this.buttonHandler.writeToConsole()}&gt;Button&lt;/button&gt;</code></p>
  
  <p>to call it.</p>