我已经为我将在下面发布的所有代码创建了一个 React.js 文件，我将如何从 html 中调用它，但是，它包含大量信息，因此，我不确定该怎么做, 我在几天的过程中尝试了几次，我尝试了很多东西，但是，我一直无法弄清楚如何从 HTML 中调用 JavaScript，我将非常感谢这方面的一些帮助，我应该注意我对 HTML 还很陌生，因为我只使用了几天，因此，我的知识并不包罗万象，任何帮助将不胜感激，建议以及告诉我我的代码的哪些片段错了，我希望尽快收到大家的来信！
编辑：澄清一下，我只是想学习如何从 HTML 调用这个 JavaScript 函数，但任何其他信息将不胜感激。
编辑 2：我在这方面遇到了严重的问题，无论我读了多少，我似乎都无法理解一般概念。
索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="BonApp">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<link href="index.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" />
<link rel="stylesheet" type="text/css" href="slick.css" />
<link rel="stylesheet" type="text/css" href="slick-theme.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
<script src="https://scontent.xx.fbcdn.net/t39.3284-6/13591530_1796350410598576_924751100_n.js"></script>
<script src="https://scontent.xx.fbcdn.net/t39.3284-6/13591520_511026312439094_2118166596_n.js"></script>
<title>BonApp</title>
</head>
<body>
I don't know what to do here.
</body>
<script type="text/javascript">
$('.autoplay').slick({
slidesToShow: 2
, slidesToScroll: 1
, autoplay: true
, autoplaySpeed: 2000
, });
</script>
</html>
索引.js
require("babel-core").transform("code", options);
var NavBar = React.createClass({
render: function() {
return (
{/* Navigation */}
<div id="nav" className="dark_bg_color">
<img src="logo.png" />
<div className="table_center">
<div>
<ul>
<li>daily specials</li>
<li>gift gallery</li>
<li>events</li>
<li><i className="fa fa-search" /> search</li>
</ul>
</div>
</div>
<div className="right_nav">
<div className="table_center">
<div>
<button type="button">Sign Up</button>
<button type="button">Log In</button>
<div className="vertical-line"> </div>
<button type="button">Cart</button>
</div>
</div>
</div>
</div>
);
}
});
ReactDOM.render(<NavBar />, document.getElementById('nav'));
var Gallery = React.createClass({
render: function() {
return (
{/* Picture Gallery */}
<div id="Gallery">
<div align="middle">
<div id="head">
<img id="pic" align="middle" max-width="100%" src="title_pic.png" />
<div align="left" className="big">
<div>
<span>Dine with the Best</span>
<div className="words">
<span>BonApp connects you with limited-time, exclusive meals and events offered by the city’s best chefs.<br /><br /><br /><button type="button">JOIN BONAPP</button></span>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
});
ReactDOM.render(<Gallery />, document.getElementById("Gallery"));
var WhatsNew = React.createClass({
render: function() {
return (
{/* What's New */}
<div id="whatsnew" className="dark_bg_color">
<h2 style={{marginBottom: 30}}>
<span>What's New</span>
</h2>
<div className="autoplay">
<img src="whatsnew0.png" />
<img src="whatsnew1.png" />
<img src="whatsnew0.png" />
</div>
</div>
);
}
});
ReactDOM.render(<WhatsNew />, document.getElementById("whatsnew"));
var BonEvents = React.createClass({
render: function() {
return (
{/* Bon Events */}
<div id="events" className="dark_bg_color">
<div className="box">
<div className="box-text">
<div className="horizontal-line" />
<div><div className="horizontal-line" /><p>LES BON CADEAUX</p></div>
<div className="horizontal-line" />
</div>
</div>
<h2>
<span>Bon Events</span>
</h2>
<div>
</div>
</div>
);
}
});
ReactDOM.render(<BonEvents />, document.getElementById("events"));
var iOS = React.createClass({
render: function() {
return (
{/* iOS App */}
<div id="advertiseApp">
<h2>
<span />
</h2>
</div>
);
}
});
ReactDOM.render(<iOS />, document.getElementById("advertiseApp"));
var Footer = React.createClass({
render: function() {
return (
{/* Footer */}
<div id="footer">
<div className="footer_center">
<div>
<ul>
<li>ABOUT</li>
<li>PRESS</li>
<li>CONTACT</li>
<li>SUPPORT</li>
<li>BONAPP FOR RESTAURANTEURS</li>
</ul>
</div>
</div>
<div className="legal_center">
<div>
<ul>
<li>Copyright © 2016 BonApp Dining Inc.</li>
<li>Privacy Policy</li>
<li>Legal</li>
</ul>
</div>
</div>
</div>
);
}
});
ReactDOM.render(<Footer />, document.getElementById("footer"));