我可以在没有 npm 启动和 npx create-react-app 的情况下使用 React 运行 index.html 吗？

Question

我是自学反应，我只是对很多事情感到困惑。

我想如果我通过如下脚本将 React 添加到我的 index.html 中：-

//index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bill Details</title>

</head>

<body>
    <div id="billTable"></div>
    <script src="BillTable.js" type="text/javascript"></script> ------------- Problem Line 1
</script>
</body>

</html>

这是我试图返回反应组件的 js 文件

//BillTable.js
import React from "react";
import ReactDOM from "react-dom";

function BillTable() {
    return <h1>HELLO TABLE</h1>;
}

ReactDOM.render(<BillTable/>, document.getElementById("billTable"));

当我尝试直接在 firefox 中或通过快速服务器打开 index.html 时，我在控制台中收到以下错误：-

Uncaught SyntaxError: import declarations 只能出现在模块的顶层。

然后我通过将 index.html 中问题第 1 行中的脚本类型更改为

<script src="BillTable.js" type="text/babel"></script>

但是我的网页也是完全空白的，甚至控制台也没有显示任何错误。

请建议如何解决这个问题。 我现在正在尝试仅使用功能方法学习 React，因此如果需要在反应方面进行任何更改，请在功能方法中进行。

Answer 1

我认为您还没有包含正确的包来处理 React 组件和 JSX。 这些包 react、react-dom 等通常位于 package.json 中，需要告诉浏览器将使用哪些工具来运行代码。 这些包处理您创建的“脚本”或组件，并将在您的组件中构建的元素放置到 DOM。 您可以通过在组件的脚本标签之前加载带有附加脚本标签的反应来解决此问题。 这将使浏览器知道如何以及使用什么来运行您的反应组件。 此外，在您的 function 中，它不知道它是一个 React 组件。 查看有关为什么必须使用 React.createElement 的解释我在此处附加了仅使用 index.html 页面的示例：使用 index.html 页面的示例您的组件文件：

"use strict";

function BillTable() {
  return React.createElement("h1", "", "HELLO TABLE");
}

const domContainer = document.querySelector("#billTable");
const root = ReactDOM.createRoot(domContainer);
root.render(React.createElement(BillTable));

和你的 index.html：

<body>
    <div id="billTable"></div>
    <!-- Load your React packages -->
    <script
      src="https://unpkg.com/react@18/umd/react.development.js"
      crossorigin
    ></script>

    <script
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
      crossorigin
    ></script>

    <!-- Load your React component. -->
    <script src="BillTable.js"></script>
  </body>

我可以在没有 npm 启动和 npx create-react-app 的情况下使用 React 运行 index.html 吗？

问题描述

1 个解决方案

解决方案1
0 2022-07-27 21:29:25

我可以在没有 npm 启动和 npx create-react-app 的情况下使用 React 运行 index.html 吗？

问题描述

1 个解决方案

解决方案1 0 2022-07-27 21:29:25

解决方案1
0 2022-07-27 21:29:25