javascript代码在网站上显示而不是处理

Question

我刚刚安装了react，并在Vscode中打开了文件夹，然后删除了src文件夹中的所有内容，并制作了一个javascript文件。接下来，我编写了以下代码:

import React from "react";
import ReactDOM from "react-dom";
const element= <h1> Hello </h1>;
console.log(element);

问题是，而不是处理代码，它显示在网页上，甚至当我链接一个html文件到它。控制台显示错误"SyntaxError: Cannot use import statement a outside a module">

Answer 1

import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<h1>Hello</h1>, document.getElementById('root'));
const element = <h1>Hello</h1>;
console.log(element);

这段代码导入了React和ReactDOM库，它们是创建React组件所必需的。然后使用ReactDOM.render()来呈现

Hello

元素替换为id为"root"的HTML元素。最后一行创建了一个React元素，并将其存储在变量'element'中，然后将其记录到控制台。