How to reference a React class from generic javascript

I have this index.html :

<html>
<head>
  <title>Sample App</title>
  <link href="./src/css/bootstrap.min.css" rel="stylesheet" />
  <link href="./src/css/bootstrap.dashboard.css" rel="stylesheet">
</head>
<body>
  <div id='root'>
  </div>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="./src/js/jquery.signalR-2.2.0.min.js"></script>
  <script src="http://localhost:26665/signalr/hubs"></script>
  <script type="text/javascript" src="/static/bundle.js"></script>


  <script type="text/javascript">
    $(function() {
        var myHub = $.connection.signalRTwitchBotParserHub;

        myHub.client.OnNewMessage = function (data) {
              // Call AppActions.dispatchMessage(message);
        };

        $.connection.hub.url = "http://localhost:26665/signalr";
        $.connection.hub.start()
   });
  </script>
</body>

How can I call a React-created class from there? I would like to replace the // Call AppActions.dispatchMessage(message);

Solution

You could do something like the following. What that does is create an instance of YourReactClass that renders itself as a child of your div with the id of root. It also passes the message as a property into the react instance so that it can make use of that data. Note that I added key="rootclass" to ensure that every time this code is called, React continues to reuse the DOM nodes created by the react class instead of removing the old nodes and adding new ones.

React.render((<YourReactClass key="rootclass" message={message} />), document.getElementById('root'));