【发布时间】：2025-12-19 11:50:15
【问题描述】：
我已经为我将在下面发布的所有代码创建了一个 React.js 文件，我将如何从 html 调用它，但是它包含大量信息，因此，我不确定怎么办，我在几天的过程中尝试了几次，我尝试了很多东西，但是，我一直无法弄清楚如何从 HTML 调用 JavaScript，我非常感谢在这件事上的一些帮助，我应该注意，我对 HTML 相当陌生，因为我只使用它几天，因此，我的知识并非包罗万象，任何帮助，建议以及告诉我哪些片段我的代码有误，希望尽快收到大家的来信！
编辑：澄清一下，我只是想学习如何从 HTML 调用这个 JavaScript 函数，不过，任何其他信息将不胜感激。
编辑 2：我在这方面遇到了严重的问题，无论我读了多少，我似乎都无法理解一般概念。
index.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>
index.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"));
【问题讨论】：
-
我只是假设它是这样完成的，因为我说过我星期一才学习 JavaScript、HTML 和 CSS，所以我根本不知道应该怎么做。
-
好吧，当你把所有的 JavaScript 都放在它自己的文件中而不是在 HTML 中混合时，事情往往会更容易解决。 （顺便说一句，
require("babel-core").transform("code", options)只会转换字符串“code”。） -
你会推荐我做什么，有没有一个很好的网站可以找到关于 react.js 的信息，我看了很多景点，但是所有的例子都太简单了，没有显示我需要什么处理这么大的文件。
-
另外，稍微详细一点也不错
-
为什么不做官方react教程呢？ facebook.github.io/react/docs/getting-started.html
标签： javascript html css reactjs