我如何在没有 JS 节点的情况下运行 React 应用程序，只是 class 的香草 VSC

Question

尝试使用 Chrome 打开以下文件，它是空白的。 我究竟做错了什么？ 我正在尝试链接 js 文件并使用它来显示 h1 但由于某种原因我无法绕过它。

只有两个文件

index.html

<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>React App</title>
      <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
      script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>


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

      <script src="main.js"></script>
    </body>
  </html>

主程序

function tick() {
    const element = (
        <div>
          <h1>Hello, world!</h1>
          <h2>It is {new Date().toLocaleTimeString()}.</h2>
        </div>
    );

    ReactDOM.render(
       element,
       document.getElementById('root')
    );
}

setInterval(tick, 1000);

Answer 1

1.) 首先是 babel 脚本标签没有正确打开和关闭。

script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

它应该像下面这样：

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

2.) 你还需要在你的脚本中指定 babel 类型，它有 JSX/react 代码：

<script type="text/babel" src="">

3.) (Imp.) 你的任何反应组件必须以大写字母开头。 我已经使用 function 作为反应组件来渲染它返回 JSX 代码。 并将 RenderDOM 保留在 React 组件之外。 如果我必须重构您的代码：

 function Tick() {
    return  (
  <div>
    <h1>Hello, world!</h1>
    <h2>It is {new Date().toLocaleTimeString()}.</h2>
  </div>
     );
     
     

     }

    
     ReactDOM.render(
        <Tick />,
          document.getElementById('root')
            );

我如何在没有 JS 节点的情况下运行 React 应用程序，只是 class 的香草 VSC

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-03-10 11:21:50

我如何在没有 JS 节点的情况下运行 React 应用程序，只是 class 的香草 VSC

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-03-10 11:21:50

解决方案1
0 已采纳 2022-03-10 11:21:50