在 HTML 中反应 JS

Question

我对 React JS 或任何给定的服务器端技术都是全新的。现在，我想学习如何使用 React JS 进行开发。

简介

我从 React JS tutorials on official website. Now, I am trying to import React toolbox 或任何其他第三方组件开始到我的 JSX 代码中。但是，我面临 uncaught exception error: require not defined.

的问题

当我搜索它时，我开始了解各种构建机制（browserify、webpack、gulp），我（再次）对它们完全陌生。在阅读了这些内容并看到 some examples 之后，我能够让我的浏览器编译我的 .jsx 文件中编写的 require() 语句。

问题

我想做的是：

写一个 .html 文件。
通过我的 server.js 文件启动它。
在其中添加一个 <script> 标签，这会将我的 .jsx 代码注入到我的 .html 文件中。

到目前为止我看到的示例（1, 2，以及其他一些...）在开头加载一个 .js 文件并将它们的 .html 代码写入 .jsx 文件（render() 函数）。

问题

是否可以从 server.js 加载 .html 文件并使用 .html 文件中 <script> 标签的 .jsx？像这样：

<html>
.
.
<body>
    <div id="container"></div>
    <script src="path_to_reactjs_file"></script>
</body>
</html>

如果这听起来像是一个完全愚蠢的问题，我很抱歉，但由于对这项技术是全新的，我无法理解我应该如何去做。

如有任何帮助，我们将不胜感激。

Answer 1

没有捆绑，你不能直接包含 jsx 到 html，但是你可以创建没有 jsx 语法的组件（使用普通 js），它会起作用。

Answer 2

听起来文件扩展名可能存在问题，Browserify 只理解 .js 和 .json 扩展名，除非您另有说明。

$ browserify --extension jsx src/main.js > bundle.js

具有正确转换的 Babel 会自动为您执行此操作，作为其模块转换的一部分。

$ browserify src/main.js -t [ babelify --presets [ es2015 react ] ] > bundle.js

请注意，这假设您的入口点具有 .js 文件扩展名，如果是 .jsx，您必须设置扩展名类型。

可以通过将配置添加到您的 package.json

来简化此配置

{
  babel: {
    presets: [ 'es2015', 'react' ]
  }
},
{ 
  browserify: {
    transform: 'babelify'
  }
}

Answer 3

首先要注意...

浏览器只能理解HTML、CSS和普通的javascript。

如果您向浏览器提供 JSX，它无法解析它。所以你需要使用一个包打包器，比如 webpack。这会将您所有的 JSX、typescript、Sass 文件转换为 javascript(bundle.js) 文件。你可以在.html文件

中给这个bundle.js文件

在 HTML 中反应 JS

React JS in HTML

jsx

reactjs

react-jsx