Question

我试图运行一个带有React“ render”方法的简单代码块，但是浏览器没有显示文本。

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello World</h1>,document.getElementById('root'));

我使用VS Code作为编辑器，因此我键入了“运行并调试Node.js”命令。它提出了以下警告

(node:3004) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

在package.json文件中设置“ type：module”解决了该问题，但另一方面又出现了另一个问题

(node:18968) ExperimentalWarning: The ESM module loader is experimental.    
warning.js:32
SyntaxError: Unexpected token '<'
 at Loader.moduleStrategy (internal/modules/esm/translators.js:81:18)
 at async link (internal/modules/esm/module_job.js:37:21)

那将不允许我编写任何标签。我缺少什么，我该如何解决？下面是index.html文件和文件结构

<html>
    <head>
        <title> React Test</title>
    </head>

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

Answer 1

JSX不是有效的JavaScript语法，目前也不是任何ECMAScript规范的一部分。支持ESM的NodeJS并不意味着它本身就支持JSX。

JSX are expected to be transpiled into a valid JavaScript on build/compile time using tools like babel。如果使用React，最简单的方法是将babel与@babel/preset-react一起使用，这会将所有JSX转换为React.createElement()调用。然后，您可以使用node运行babel生成的代码。

为了给您更清晰的画面，您可以使用这里的Babel online REPL来查看babel如何对您的代码进行编译。

要在浏览器上运行的React应用的常见设置如下：

使用webpack捆绑您的应用
将webpack配置为使用babel-loader，以便将您的代码转换为浏览器可以运行的内容
在浏览器上使用生成的javascript包

Answer 2

我不明白为什么您的.vscode文件夹中有src文件夹，并且其中包含index.html和index.js个文件。

我认为您需要将index.js文件从.vscode文件夹移至src并删除.vscode文件夹。或者只是使用npm创建一个新应用。

Answer 3

使用create-react-app后出现了文件夹结构？

顺便说一句，尝试使用React.createElement（）返回组件。

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

正如文档所说：“ render方法返回您想要在屏幕上看到的内容的描述。React获取描述并显示结果。特别是，render返回一个React元素，这是对呈现内容的轻量级描述。大多数React开发人员使用一种称为“ JSX”的特殊语法，使这些结构更易于编写。该语法在构建时转换为React.createElement（'div'）。”

检查一下 https://reactjs.org/docs/react-api.html#createelement

-----添加您现在可以分两个步骤将.js文件导入节点 v12.x 中：

在您的package.json文件中添加以下行：
```
// package.json
{
  "type": "module"
}
```
启动脚本时，您需要添加--experimental-modules标志：
```
node --experimental-modules index.js
```

https://nodejs.org/api/esm.html#esm_commonjs_json_and_native_modules

无法将JSX与Node.js ESM模块加载器一起使用

3 个答案: