在没有 Node 的情况下将 react 移动到单独的组件文件中答案

【问题标题】：Moving react into seperate component files without Node在没有 Node 的情况下将 react 移动到单独的组件文件中
【发布时间】：2016-02-29 08:42:07
【问题描述】：

我没有使用 Node，如何将当前位于 text/babel 脚本标签中的反应代码 (jsx) 移动到单独的组件文件中？我已经尝试移动它们，然后在 html 文件中引用它们，但是一旦它到达 HTML 的第一位，它就会引发语法错误，我已经尝试了文件的 .jsx 和 .js 扩展名，当我包含它时我给它是 text/babel 的脚本类型。

<script src="components/nav.jsx" type="text/babel" ></script>
<script src="components/map.jsx" type="text/babel" ></script>
<script src="components/app.jsx" type="text/babel" ></script>

【问题讨论】：

你能粘贴错误信息吗？顺便说一句，我建议使用 webpack 而不是使用 text/babel 脚本标签
@TIJ 如果我把它全部放在一个单一的文件中，它工作正常。但是，如果我拆分它然后引用它们，我会得到“导航栏未定义”。我将使用我引用文件的方式更新帖子。

标签： javascript reactjs

【解决方案1】：

如果要在浏览器中转换 JSX，则必须将每个组件附加到窗口对象。

举个例子：

var Nav = React.createClass({ ... });
window.Nav = Nav;

或者更简洁：

window.Nav = React.createClass({ ... });

【讨论】：

这在技术上有效然而被认为是不好的做法。见Dmitriy's answer for more

【解决方案2】：

Jim Nielsen 是正确的，但是将部分代码公开到全局范围并在浏览器中转换 JSX 被认为是一种不好的做法。相反，您应该考虑使用一些构建系统，例如Webpack。

这样您就可以使用es2015 import syntax 将组件从一个文件导入到另一个文件，将所有内容捆绑在一个文件中，以及更多其他好处，例如代码压缩、源映射、livereload 等。

Setting up React for ES6 with Webpack and Babel

Using React with Webpack Tutorial

Related issue

【讨论】：