【问题标题】：Can I use React and JSX in Javascript without installing the Node.js?我可以在不安装 Node.js 的情况下在 Javascript 中使用 React 和 JSX 吗？
【发布时间】：2021-06-24 11:59:54
【问题描述】：

我正在开发一个已经有网络服务器的项目。网络服务器运行 PHP，它是有限的。许多软件无法安装。

我了解 React 不需要任何安装，但adding JSX to a project needs to run these commands:

第一步：Run npm init -y

第二步：Run npm install babel-cli@6 babel-preset-react-app@3

很遗憾，我无法将 NodeJS 添加到网络服务器。

JSX 编码语法对我使用 JavaScript 文件非常有用。

将其添加到 HTML 的选项

我知道我可以将 JSX 添加到 HTML 文件中：

<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
  );
</script>

但我想在 .js 文件中使用。

示例

我有两个例子：

示例正在运行，但没有 JSX。
示例包含 JSX，但无法正常工作。

HTML文件是一样的。

1。示例项目：JSX 出现意外的令牌错误

const myelement1 = <h1>JSX should work</h1>;

ReactDOM.render(
  myelement1,
  document.getElementById('reactRoot')
);

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>

  </head>
  <body>
    <h1>My React example page</h1>
    <div id="reactRoot"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  </body>
</html>

2。示例项目：React 在没有 JSX 的情况下工作

const myelement2=React.createElement('h1', {}, 'No JSX!');

ReactDOM.render( myelement2, document.getElementById('reactRoot'));

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>

  </head>
  <body>
    <h1>My React example page</h1>
    <div id="reactRoot"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  </body>
</html>

我的问题

我该如何解决1。示例项目，如果无法安装程序？

【问题讨论】：

标签： reactjs jsx

【解决方案1】：

你必须将type属性设置为text/babel，这样问题就解决了，例如：

<html>

<body>
    <div id="reactRoot"></div>

    <script type="text/babel">
        const myelement1 = <h1>JSX should work</h1>;

        ReactDOM.render(
            myelement1,
            document.getElementById('reactRoot')
        );
    </script>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

</body>

</html>

【讨论】：

我需要将 JSX 存储在 .js 文件中。这是包含 JSX 的 1 个 HTML 文件。您对单独存储的 .js 文件有任何想法吗？
@questionMark 没关系，只需将type="text/babel" 添加到您的脚本标签中，如下所示：<script type="text/babel" src="./scripts/jsx.js"></script>
我在本地尝试了您推荐的脚本标签，添加到 .html 中。它不起作用。这对你有用吗？
@PS-PARSA 建议的内容我刚刚测试过。
@questionMark 此错误与 CORS 策略有关，与 jsx 和 Babbel 无关...