Javascript JSX是否未被识别？

我使用这两个CDN在我的项目中包括React库，但是当我使用JSX在html文档体上呈现一些html时，它不会将JSX识别为JSX（我使用的是chrome），并因此在将JSX读取为javascript时抛出一个错误。 我做错什么了吗？任何帮助都会很好：） CDN的：

HTML:

反应：

var React = require('react');
var ReactDOM = require('react-dom');
const text = <h1>Hello World</h1>;

ReactDOM.render(text, document.getElementById('here'));

var React=require（'React'）；
var ReactDOM=require（'react-dom'）；
const text=Hello World；
render（text，document.getElementById（'here'））；

您需要一个

babel

来使用

JSX

向项目中添加

babel

的两种方法是

为

babel

添加

CDN

使用

npm

安装

babel

从

将JSX添加到项目中不需要像bundler或开发服务器这样复杂的工具。本质上，添加JSX非常类似于添加CSS预处理器。唯一的要求是在计算机上安装Node.js

转到终端中的项目文件夹，然后粘贴以下两个命令：

Step 1: Run npm init -y (If you get an "Invalid name" error when you run npm init -y, rename the project folder to only contain lowercase ASCII letters or hyphens (e.g. my-project), and try again.)

Step 2: Run npm install babel-cli@6 babel-preset-react-app@3

---

react库无法识别jsx。你需要一个像babel这样的库来解析你的jsx。React代码需要由babel传输，所以要包含babel并将脚本添加到babel类型-这是说当我添加它们时，babel CDN中没有定义require，Idk为什么这对我来说如此困难？你看到提供的演示了吗？使用babel CDN时，您只需在

html

文件中使用

标记和

type=“text/babel”

作为属性编写脚本

var React = require('react');
var ReactDOM = require('react-dom');
const text = <h1>Hello World</h1>;

ReactDOM.render(text, document.getElementById('here'));

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

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

Step 1: Run npm init -y (If you get an "Invalid name" error when you run npm init -y, rename the project folder to only contain lowercase ASCII letters or hyphens (e.g. my-project), and try again.)

Step 2: Run npm install babel-cli@6 babel-preset-react-app@3