如何显示的是在一个阵营的JavaScript文件，或通过阵营
我不亦乐乎试过几件事情，并看到它的工作进行解释，而一个文件conceptionaly这里How to call and form a React.js function from HTML所有我从这个文件生成我的HTML得到的是如何显示的是在一个阵营的JavaScript文件，或通过阵营
<!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 src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-with-addons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"></script>
<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>
<div id="nav"></div>
<div id="Gallery"></div>
<div id="whatsnew"></div>
<div id="advertiseApp"></div>
<div id="events"></div>
<div id="footer"></div>
</body>
<script type="text/javascript">
$('.autoplay').slick({
slidesToShow: 2
, slidesToScroll: 1
, autoplay: true
, autoplaySpeed: 2000
, });
</script>
</html>
这正是我放入它的意思，这意味着它不是从JavaScript文件调用的（这与前面提到的堆栈溢出消息中提到的相同）我希望答案在以下范围内：“我有错误版本的巴别“。
所有帮助表示赞赏！
编辑：这里是JS代码的副本只是为了确保。
var NavBar = React.createClass({
render: function() {
return (
/* NavBar */
<div 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 (
/* Gallery */
<div >
<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 (
<div 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 (
/* 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() {
/* IOS */
return (
<div >
<h2>
<span />
</h2>
</div>
);
}
});
ReactDOM.render(<IOS />, document.getElementById("advertiseApp"));
var Footer = React.createClass({
render: function() {
return (
/* Footer */
<div>
<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"));
编辑2：
阵营CLI输出：
"use strict";
var NavBar = React.createClass({
displayName: "NavBar",
render: function render() {
return(
/* NavBar */
React.createElement(
"div",
{ className: "dark_bg_color" },
React.createElement("img", { src: "logo.png" }),
React.createElement(
"div",
{ className: "table_center" },
React.createElement(
"div",
null,
React.createElement(
"ul",
null,
React.createElement(
"li",
null,
"daily specials"
),
React.createElement(
"li",
null,
"gift gallery"
),
React.createElement(
"li",
null,
"events"
),
React.createElement(
"li",
null,
React.createElement("i", { className: "fa fa-search" }),
" search"
)
)
)
),
React.createElement(
"div",
{ className: "right_nav" },
React.createElement(
"div",
{ className: "table_center" },
React.createElement(
"div",
null,
React.createElement(
"button",
{ type: "button" },
"Sign Up"
),
React.createElement(
"button",
{ type: "button" },
"Log In"
),
React.createElement(
"div",
{ className: "vertical-line" },
" "
),
React.createElement(
"button",
{ type: "button" },
"Cart"
)
)
)
)
)
);
}
});
ReactDOM.render(React.createElement(NavBar, null), document.getElementById('nav'));
var Gallery = React.createClass({
displayName: "Gallery",
render: function render() {
return(
/* Gallery */
React.createElement(
"div",
null,
React.createElement(
"div",
{ align: "middle" },
React.createElement(
"div",
{ id: "head" },
React.createElement("img", { id: "pic", align: "middle", "max-width": "100%", src: "title_pic.png" }),
React.createElement(
"div",
{ align: "left", className: "big" },
React.createElement(
"div",
null,
React.createElement(
"span",
null,
"Dine with the Best"
),
React.createElement(
"div",
{ className: "words" },
React.createElement(
"span",
null,
"BonApp connects you with limited-time, exclusive meals and events offered by the city’s best chefs.",
React.createElement("br", null),
React.createElement("br", null),
React.createElement("br", null),
React.createElement(
"button",
{ type: "button" },
"JOIN BONAPP"
)
)
)
)
)
)
)
)
);
}
});
ReactDOM.render(React.createElement(Gallery, null), document.getElementById("Gallery"));
var WhatsNew = React.createClass({
displayName: "WhatsNew",
render: function render() {
return React.createElement(
"div",
{ className: "dark_bg_color" },
React.createElement(
"h2",
{ style: { marginBottom: 30 } },
React.createElement(
"span",
null,
"What's New"
)
),
React.createElement(
"div",
{ className: "autoplay" },
React.createElement("img", { src: "whatsnew0.png" }),
React.createElement("img", { src: "whatsnew1.png" }),
React.createElement("img", { src: "whatsnew0.png" })
)
);
}
});
ReactDOM.render(React.createElement(WhatsNew, null), document.getElementById("whatsnew"));
var BonEvents = React.createClass({
displayName: "BonEvents",
render: function render() {
return(
/* Events */
React.createElement(
"div",
{ id: "events", className: "dark_bg_color" },
React.createElement(
"div",
{ className: "box" },
React.createElement(
"div",
{ className: "box-text" },
React.createElement("div", { className: "horizontal-line" }),
React.createElement(
"div",
null,
React.createElement("div", { className: "horizontal-line" }),
React.createElement(
"p",
null,
"LES BON CADEAUX"
)
),
React.createElement("div", { className: "horizontal-line" })
)
),
React.createElement(
"h2",
null,
React.createElement(
"span",
null,
"Bon Events"
)
),
React.createElement("div", null)
)
);
}
});
ReactDOM.render(React.createElement(BonEvents, null), document.getElementById("events"));
var IOS = React.createClass({
displayName: "IOS",
render: function render() {
/* IOS */
return React.createElement(
"div",
null,
React.createElement(
"h2",
null,
React.createElement("span", null)
)
);
}
});
ReactDOM.render(React.createElement(IOS, null), document.getElementById("advertiseApp"));
var Footer = React.createClass({
displayName: "Footer",
render: function render() {
return(
/* Footer */
React.createElement(
"div",
null,
React.createElement(
"div",
{ className: "footer_center" },
React.createElement(
"div",
null,
React.createElement(
"ul",
null,
React.createElement(
"li",
null,
"ABOUT"
),
React.createElement(
"li",
null,
"PRESS"
),
React.createElement(
"li",
null,
"CONTACT"
),
React.createElement(
"li",
null,
"SUPPORT"
),
React.createElement(
"li",
null,
"BONAPP FOR RESTAURANTEURS"
)
)
)
),
React.createElement(
"div",
{ className: "legal_center" },
React.createElement(
"div",
null,
React.createElement(
"ul",
null,
React.createElement(
"li",
null,
"Copyright © 2016 BonApp Dining Inc."
),
React.createElement(
"li",
null,
"Privacy Policy"
),
React.createElement(
"li",
null,
"Legal"
)
)
)
)
)
);
}
});
ReactDOM.render(React.createElement(Footer, null), document.getElementById("footer"));
为了使客户的浏览器中执行JavaScript代码，它必须由客户端浏览器请求。这意味着把一个<script>标记HTML文档中加载文件，是这样的：
<script src="https://example.com/my-react-code.js"></script>
不这样做，你的代码只是坐在您的服务器上无所作为。
但还有一个第一步：正如@Vijay在评论中指出的，你的代码需要被转发。那是什么意思？那么，看看你的代码：它是用EcmaScript 2015编写的，它是近期浏览器不支持的Javascript方言。为了确保您的代码可以在大多数浏览器上运行，您需要将它从新的方言转换为浏览器可以执行的内容。这被称为运输。 Babel是一个可以做到这一点的软件包;还有其他的。如果您决定使用Babel，请查看setup page，其中提供了有关如何在各种不同环境中使用Babel的详细说明。
编辑
如何使用通天transpile你的代码是一个大问题。我会给出一个非常简单的例子。
想象一下，您已将上面给出的代码保存在一个名为src/my-react-code.js的文件中，并且您想将其转换为名为dist/my-react-code.js的新文件。想象一下，你已经用npm install --save-dev babel-cli在本地安装了Babel。为了transpile源文件，这样做：
./node_modules/.bin/babel src -d dist
这将会把你的源文件，transpile它，并将结果保存在dist/my-react-code.js（即它的新ES2015语法老JavaScript语法翻译）。
但是，这将无法正常工作给这个问题的信息&答案。还有一些你需要的东西：
你的源文件需要导入React包，在顶部有一行如import React from 'react';;可能还有其他需要导入的软件包。
Babel可以用许多不同的方式进行配置。你需要包含一些额外的Babel插件。关闭我的头顶，我想你需要做npm install --save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-0。这些软件包告诉Babel需要什么类型的源代码 - 在你的情况下，ES2015代码中嵌入了React组件（第0阶段软件包包括一组作为ES2015标准特定部分的软件包）。您还需要创建一个包含.babelrc配置文件：
{
"presets": ["es2015", "react", "stage-0"]
}
这告诉巴贝尔要使用的插件。
Babel的命令行使用记录在https://babeljs.io/docs/setup/。从顶部的按钮中选择您的环境 - 我选择了第一个CLI。
一旦你成功的翻译，看看原始源代码和最终代码之间的区别 - 你会发现Babel添加了很多样板代码，基本上重写了大多数不可用的功能使用“旧”Javascript的浏览器。
如上所述，配置Babel的方法有很多种。我给出了最简单，但也是最麻烦的。每当您更改源代码时，您都需要重新编译它，以便您的服务器将其发送给客户端。有很多工具可以将所有Javascript绑定在一起（browserify，webpack等），自动化构建过程（咕噜咕噜，吞咽等），测试你的代码（摩卡，笑话等）。你应该花一些时间想象你的理想工作流程和环境是什么，看看你是否可以使用这些工具把它们放在一起。
你介意给一个小例子，因为当我使用babel的时候，我通过npm来安装它，并且关于如何使用编译器的安装页面上的唯一注释是require（“babel-core”）。transform（“代码“，选项）;'，这显然是JavaScript，这是否意味着我必须在某处使用脚本标记，如果是，在哪里？我对这些相对简单的问题表示歉意，但是，我对网络开发和阅读障碍有所了解，因此，挑选新的语言和格式可能很困难。 –
我也想注意，在这个例子中：http://stackoverflow.com/questions/38414139/how-to-call-and-form-a-react-js-function-from-html/38526630#38526630有可能在不同的文件中显示这些数据，而不是使用Babel或我可以检测到的任何其他编译器。 –
关于[其他答案]（http://stackoverflow.com/a/38526630/2008384）：该代码正在SO的网页上下文中运行。我不是这样的开发者，所以我不知道他们的Javascript是如何工作的。我怀疑他们正在加载Babel polyfill，这是一个可以“即时”运输代码的软件包。我会编辑答案，在Babel上包含一些*非常简短的注释。 – Kryten
也许我只是没有看到它，但在HTML标记中，你包括上面列出的Javascript代码？ – Kryten
不，它保存在它自己的单独的js文件中 –
应该将反应文件转换并包含在脚本标记中。 – vijayst