React JSX 不被识别？答案

【问题标题】：React JSX not being recognized?React JSX 不被识别？
【发布时间】：2019-11-29 16:44:45
【问题描述】：

我正在使用这 2 个 CDN 将 React 库包含在我的项目中，但是当我使用 JSX 将一些 html 渲染到 HTML 文档的正文时，它不会将 JSX 识别为 JSX（我使用的是 chrome），并因此在将 JSX 读取为 javascript 时引发错误。难道我做错了什么？任何帮助都会很棒:) CDN：

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

HTML：

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

反应：

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

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

【问题讨论】：

React 库无法识别 jsx。你需要一个像 babel 这样的库来解析你的 jsx。
React 代码需要通过 babel 转译，所以包含 babel 并将脚本添加到 babel 类型 - raw.githubusercontent.com/web-slate/…

标签： javascript html reactjs

【解决方案1】：

您需要babel 才能使用JSX。

将babel 添加到您的项目的两种方法是，

为babel添加CDN

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

现在您可以在任何<script> 标签中使用JSX，方法是向其添加type="text/babel" 属性。

例如，

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

Demo

使用npm安装babel，

来自docs

将 JSX 添加到项目中不需要复杂的工具，例如打包程序或开发服务器。本质上，添加 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

【讨论】：

当我添加它们时，它说在 babel CDN 中没有定义 require，我想知道为什么这对我来说这么难 lmao
你看过提供的Demo了吗？使用 babel CDN 时，您需要将脚本写入 html 文件中，仅以 <script> 标签和 type="text/babel" 作为属性