Fre*_*zzi 0 html javascript reactjs
大家好，我一直在尝试通过他们的在线教程来学习 React。我将代码复制并粘贴到 Visual Studio Code 中，每次运行 demo.html 时，页面都是空白的。我到达控制台，发现它们是一个语法错误“Uncaught SyntaxError：预期表达式，得到'<'”如果我刚刚完成了复制和粘贴工作，这怎么可能？我不知道这是否与 javascript 位于单独的文件中有关？
我了解了这段代码背后的概念，但我无法弄清楚它为什么起作用。如果有任何帮助，非常感谢！
这是名为 test.js 的脚本
function Welcome(props) { return <h1> Hello {props.name} </h1>;
}
const element = <Welcome name="Sara" />;ReactDOM.render(
element,
document.getElementById('root')
);
这是 demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<!-- We will put our React component inside this div. -->
<div id='root'></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="test.js"></script>
</body>
</html>
如果你正在开发React项目。使用
CLI和删除所有这些脚本标签始终是最佳实践，也是 React 团队推荐的。阅读 React 文档
你还必须设置 Babel 来编译 JSX。为此，您必须将其包括在内
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
并type为script标签添加属性
type="text/babel"
超文本标记语言
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<!-- We will put our React component inside this div. -->
<div id='root'></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Load our React component. -->
<script src="test.js" type="text/babel"></script>
</body>
</html>