有人可以帮助我这个React教程语法错误?

大家好，我一直在尝试通过他们的在线教程学习React。我将代码复制并粘贴到Visual Studio code中，当我运行demo.html时，页面是空白的。我到了控制台，发现他们是一个语法错误"未捕获的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项目。它一直是React团队推荐的最佳实践使用CLI并去掉所有这些脚本标签。阅读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>

React使用一种称为JSX的特殊文件类型，它允许您在Javascript中包含HTML语法。为了解析JSX文件，你需要设置一个react项目。

最简单的方法是使用Javascript库Create React App。要使用安装NodeJS，然后执行npx create-react-app my-app来获得一些锅炉板代码。

你可以使用cd my-app导航到新创建的react项目，并使用npm start启动它。这将在端口3000上启动一个服务器。然后你可以导航到http://localhost:3000来查看你的react应用。

你可以配置react项目，通过VSCode启动和调试它，如下所示。

相关内容

最新更新

热门标签：