title: How to call and form a React.js function from HTML
body: <p>I have created a React.js file for all of my code which I will post below, how would I go about calling this from the html however, it contains a fair amount of information, as a result, I am unsure exactly what to do, I have tried several times over the course of several days, I have tried many things, however, I have been unable to figure out out how to call the JavaScript from HTML, I would deeply appreciate some help in this matter, I should note that I am fairly new to HTML, as in I have only been working with it for several days, as a result, my knowledge is not all encompassing, any help would be appreciated, suggestions as well as telling me which fragments of my code are wrong, I hope to hear from everybody soon!</p>
  
  <p>EDIT: To clarify, I am only looking to learn how to call this JavaScript function from HTML, any other information would be greatly appreciated though.</p>
  
  <p>EDIT 2: I am seriously having trouble with this, no matter how much I read, I appear to be unable to wrap my head around the general concepts.</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="description" content="BonApp"&gt;
      &lt;meta name="keywords" content="HTML,CSS,JavaScript"&gt;
      &lt;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"&gt;
      &lt;link href="index.css" type="text/css" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'&gt;
      &lt;script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="slick.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="slick-theme.css" /&gt;
      &lt;script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://scontent.xx.fbcdn.net/t39.3284-6/13591530_1796350410598576_924751100_n.js"&gt;&lt;/script&gt;
      &lt;script src="https://scontent.xx.fbcdn.net/t39.3284-6/13591520_511026312439094_2118166596_n.js"&gt;&lt;/script&gt;
      &lt;title&gt;BonApp&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  I don't know what to do here.
  &lt;/body&gt;
  
  &lt;script type="text/javascript"&gt;
      $('.autoplay').slick({
          slidesToShow: 2
          , slidesToScroll: 1
          , autoplay: true
          , autoplaySpeed: 2000
      , });
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>require("babel-core").transform("code", options);
  
  var NavBar = React.createClass({
    render: function() {
      return (
  
        {/* Navigation */}
        &lt;div id="nav" className="dark_bg_color"&gt;
          &lt;img src="logo.png" /&gt;
          &lt;div className="table_center"&gt;
            &lt;div&gt;
              &lt;ul&gt;
                &lt;li&gt;daily specials&lt;/li&gt;
                &lt;li&gt;gift gallery&lt;/li&gt;
                &lt;li&gt;events&lt;/li&gt;
                &lt;li&gt;&lt;i className="fa fa-search" /&gt;&amp;nbsp;search&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="right_nav"&gt;
            &lt;div className="table_center"&gt;
              &lt;div&gt;
                &lt;button type="button"&gt;Sign Up&lt;/button&gt;
                &lt;button type="button"&gt;Log In&lt;/button&gt;
                &lt;div className="vertical-line"&gt;&amp;nbsp;&lt;/div&gt;
                &lt;button type="button"&gt;Cart&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  ReactDOM.render(&lt;NavBar /&gt;, document.getElementById('nav'));
  
  var Gallery = React.createClass({
    render: function() {
      return (
  
        {/* Picture Gallery */}
        &lt;div id="Gallery"&gt;
          &lt;div align="middle"&gt;
            &lt;div id="head"&gt;
              &lt;img id="pic" align="middle" max-width="100%" src="title_pic.png" /&gt;
              &lt;div align="left" className="big"&gt;
                &lt;div&gt;
                  &lt;span&gt;Dine with the Best&lt;/span&gt;
                  &lt;div className="words"&gt;
                    &lt;span&gt;BonApp connects you with limited-time, exclusive meals and events offered by the city’s best chefs.&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;button type="button"&gt;JOIN BONAPP&lt;/button&gt;&lt;/span&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  ReactDOM.render(&lt;Gallery /&gt;, document.getElementById("Gallery"));
  
  var WhatsNew = React.createClass({
    render: function() {
      return (
  
        {/* What's New */}
        &lt;div id="whatsnew" className="dark_bg_color"&gt;
          &lt;h2 style={{marginBottom: 30}}&gt;
            &lt;span&gt;What's New&lt;/span&gt;
          &lt;/h2&gt;
          &lt;div className="autoplay"&gt;
            &lt;img src="whatsnew0.png" /&gt;
            &lt;img src="whatsnew1.png" /&gt;
            &lt;img src="whatsnew0.png" /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  ReactDOM.render(&lt;WhatsNew /&gt;, document.getElementById("whatsnew"));
  
  var BonEvents = React.createClass({
    render: function() {
      return (
  
        {/* Bon Events */}
        &lt;div id="events" className="dark_bg_color"&gt;
          &lt;div className="box"&gt;
            &lt;div className="box-text"&gt;
              &lt;div className="horizontal-line" /&gt;
              &lt;div&gt;&lt;div className="horizontal-line" /&gt;&lt;p&gt;LES BON CADEAUX&lt;/p&gt;&lt;/div&gt;
              &lt;div className="horizontal-line" /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;h2&gt;
            &lt;span&gt;Bon Events&lt;/span&gt;
          &lt;/h2&gt;
          &lt;div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  ReactDOM.render(&lt;BonEvents /&gt;, document.getElementById("events"));
  
  var iOS = React.createClass({
    render: function() {
      return (
  
        {/* iOS App */}
        &lt;div id="advertiseApp"&gt;
          &lt;h2&gt;
            &lt;span /&gt;
          &lt;/h2&gt;
        &lt;/div&gt;
      );
    }
  });
  ReactDOM.render(&lt;iOS /&gt;, document.getElementById("advertiseApp"));
  
  var Footer = React.createClass({
    render: function() {
      return (
  
        {/* Footer */}
        &lt;div id="footer"&gt;
          &lt;div className="footer_center"&gt;
            &lt;div&gt;
              &lt;ul&gt;
                &lt;li&gt;ABOUT&lt;/li&gt;
                &lt;li&gt;PRESS&lt;/li&gt;
                &lt;li&gt;CONTACT&lt;/li&gt;
                &lt;li&gt;SUPPORT&lt;/li&gt;
                &lt;li&gt;BONAPP FOR RESTAURANTEURS&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="legal_center"&gt;
            &lt;div&gt;
              &lt;ul&gt;
                &lt;li&gt;Copyright © 2016 BonApp Dining Inc.&lt;/li&gt;
                &lt;li&gt;Privacy Policy&lt;/li&gt;
                &lt;li&gt;Legal&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  ReactDOM.render(&lt;Footer /&gt;, document.getElementById("footer"));
  </code></pre>