Javascript react Uncaught SyntaxError：意外标记'<'；或语法错误
我从React开始，在edX课堂上做练习（不是为了认证，而是为了好玩）。代码应该将按钮从react类加载到html页面 编辑：在其他示例中，代码成功执行，因此我不会直接考虑更改配置设置 我的脚本中有一个错误，导致.js文件无法正确加载，我无法确定它来自何处 我正在使用VSCode 1.42.1并在Chrome 76.0上进行调试。在VSCode中，没有错误输出。在Chrome中实时加载时，我收到错误消息Javascript react Uncaught SyntaxError：意外标记'<'；或语法错误,javascript,reactjs,syntax-error,Javascript,Reactjs,Syntax Error,我从React开始，在edX课堂上做练习（不是为了认证，而是为了好玩）。代码应该将按钮从react类加载到html页面 编辑：在其他示例中，代码成功执行，因此我不会直接考虑更改配置设置 我的脚本中有一个错误，导致.js文件无法正确加载，我无法确定它来自何处 我正在使用VSCode 1.42.1并在Chrome 76.0上进行调试。在VSCode中，没有错误输出。在Chrome中实时加载时，我收到错误消息 未捕获语法错误：意外标记“此错误，因为浏览器无法读取从render方法返回的JSX，因此每当
未捕获语法错误：意外标记“此错误，因为浏览器无法读取从
renderJSXJSX如果不进行转换，就无法执行JSX（）。使用create react app:）如果您只是在玩游戏，您可以使用web客户端transpiler，但这不是一个好的做法，也不建议对产品进行认真的开发和部署-请参阅文档中的babel.js我已经能够使用当前配置在VSCode中运行其他react组件。我知道我的设置正在运行。顺便说一句，这不仅仅是玩游戏。我花了半天的时间试图让这个例子起作用。我真的在问一个关于代码语法的问题。这个答案帮助解决了这个问题。transcompiler缺少一个脚本引用，js文件中缺少渲染调用。我也同意@kornflex的说法，一般来说，使用create-react-app更好。我寻找代码更正的原因是，我还必须更正与练习相关的其他内容。对于运行代码，我还推荐VS code LiveServer。我一直在用我很高兴你解决了它。请注意，如果你关心SEO，CRA不会是你的最佳选择，你可以考虑使用NExjs for加茨比。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="Fontchoose_container"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<div>
Here goes...
<!--Programmed scripts-->
<script src="./FontChooser.js" type="text/javascript"></script>
....done
</div>
</body>
</html>
class FontChooser extends React.Component {
constructor(props) {
super(props);
this.state = {hideElement:true}
this.text="Click on this part"
this.size=10
}
render() {
return(<div>
<input type="checkbox" id="boldCheckbox" hidden={false}/>
<button id="decreaseButton" hidden={false}>-</button>
<span id="fontSizeSpan" hidden={false}>{this.props.size}</span>
<button id="increaseButton" hidden={false}>+</button>
<span id="textSpan" >{this.props.text}</span>
</div>
);
}
}