React官方教程复制代码运行报Uncaught SyntaxError语法错误求助

• 代码中的<h1>、<Welcome />写法属于React专属的JSX语法，原生浏览器的JavaScript引擎无法直接识别，未转译就加载会触发语法错误。浏览器解析到<符号时无法匹配普通JS语法规则，就会抛出你看到的Uncaught SyntaxError: expected expression, got '<'错误。
• 粘贴代码时要注意清理HTML实体转义残留：把代码里的<替换为<、"替换为"，转义字符残留也会触发语法报错。

入门Demo快速修复 #

直接使用浏览器端Babel实时转译JSX，仅需修改demo.html代码：

1. 在React相关CDN引用之后，新增Babel的CDN引入：

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

2. 给引入test.js的script标签添加type="text/babel"属性，告知Babel需要转译该文件内容：

<script type="text/babel" src="test.js"></script>

修改完成后刷新页面即可正常渲染内容。

正式项目推荐方案 #

后续进行正式React项目开发时，建议使用官方脚手架Create React App初始化项目，它会自动完成JSX转译、代码打包、热更新等工程化配置，无需手动处理转译相关逻辑。

内容的提问来源于stack exchange，提问作者Fred Cozzi