我使用这 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>
react :
var React = require('react');
var ReactDOM = require('react-dom');
const text = <h1>Hello World</h1>;
ReactDOM.render(text, document.getElementById('here'));
最佳答案
您需要一个 babel使用 JSX .
两种添加方式babel你的项目是，
CDN为 babel <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
现在您可以使用
JSX在任何 <script>添加标签 type="text/babel"归于它。例如，
<script type="text/babel">
const text = <h1>Hello, world!</h1>
ReactDOM.render(
text,
document.getElementById('root')
);
</script>
Demo
babel使用 npm , 来自 docs
Adding JSX to a project doesn’t require complicated tools like a bundler or a development server. Essentially, adding JSX is a lot like adding a CSS preprocessor. The only requirement is to have Node.js installed on your computer.
转到终端中的项目文件夹，然后粘贴以下两个命令:
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
关于javascript - 无法识别 React JSX？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57133623/