如何仅使用 javascript 运行反应答案

【问题标题】：how to run react using only javascript如何仅使用 javascript 运行反应
【发布时间】：2026-01-21 07:55:01
【问题描述】：

是否可以仅使用 javascript 来“开箱即用”地运行 react？

基本上我寻找的是一种使用反应的方法，只使用记事本来编写页面。（没有安装和配置节点等。）

更详细- 1) 是否有内置标准替代节点的语句，例如 -

require('react-dom');

require('MyExampleComponent'); 等等……

2) 一种使用导入库或替换方法的方式来使用jsx，而无需将jsx文件编译成不同的js文件。

这是我想要实现的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     [import more required libraries if such exist]
    <script type="text/javascript" src="1.js">
    </script>
    <title>Title</title>
</head>
<body id="app">

</body>
</html>

1.js：

*[import script function]* ('react.js');
*[import script function]*('react-dom.js');
var testJsx=<h1>test</h1>;
ReactDOM.render(testJsx,document.getElementById("app"));

【问题讨论】：

你确定什么都没有发生吗？我希望控制台报告 Uncaught ReferenceError: importScripts is not defined
var testJsx=<h1>test</h1>; 不是有效的 Javascript，它是 JSX。您要么需要包含 browser.js（如在此 JSFiddle 的“外部资源”中）jsfiddle.net/reactjs/69z2wepo，要么使用 React.DOM.h1('test');而是;
@Quentin 是真的，但不是我想要的，请看一下编辑后的问题。

标签： javascript html reactjs

【解决方案1】：

你只是想避免使用 babel 吗？由于您使用的是 JSX，我认为您无法避免 Babel。但是，如果您只想拥有一个最小版本的脚本来测试反应，这里就是。

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js"></script>
    </head>
    <body id="app">
        <script type="text/babel">
        ReactDOM.render(<h1>test</h1>,document.getElementById("app"));     
        </script>
    </body>
</html>

【讨论】：

这几乎就是我正在寻找的东西，有没有办法从 js 文件中实现它？
是的，我认为只需将<script type="text/babel"> 和</script> 之间的任何内容移动到文件中，并添加src 属性，例如<script type="text/babel" src="path-to-your-js">
它确实有效，这导致了最后一个问题 - 是否有内置替代节点的导出并要求我可以使用，这样我就可以使用相互构建的多个组件文件?
在上面的例子中，你包含<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js"></script>，那么你就可以访问一个对象 ReactDOM。同样，您将在您的 html 中包含许多 <script type="text/babel" src="path-to-your-babel-js">，并且它们中的每一个都会将某些内容导出到全局。您只需要在您的 javascript 文件中使用它们，无需“要求”。
不幸的是我已经尝试过了，由于某种原因它不起作用。例如，如果我有 2 个 js 文件 - 1.js 包含 var MyComponent=React.createClass({ render:function (){ return
test component
; } });和 2.js 包含 var MyComponent1=React.createClass({ render:function (){ "use strict"; return ; } }) ReactDOM.render(,document.getElementById("app" ));将使用它们的 html 都声明 myComponent 未定义

【解决方案2】：

importScripts function 是 Web Worker API 的一部分，不能按照您尝试使用的方式工作。

除此之外，以下行包含JSX：

var testJsx=<h1>test</h1>;

要使用 JSX，您需要在构建过程中包含一个编译步骤，将其转换为有效的 JavaScript。浏览器无法原生处理 JSX。

【讨论】：

我知道，我编辑了问题以反映我想了解的内容。基本上有没有一种方法可以在没有节点的情况下导入脚本，以及一种使用 jsx 的方法

test component