React新手执行page.js遇Unexpected token '<'错误求助

问题原因 #

你直接通过node .\app\page.js命令执行React组件文件，而Node.js本身不支持JSX语法。代码里的<div> page </div>属于JSX，是React的语法糖，并非原生JavaScript的一部分，Node解析到<符号时会判定为非法语法，因此抛出Unexpected token '<'错误。

解决办法 #

情况1：使用Create React App/Next.js等官方脚手架搭建的项目 #

不要直接执行单个组件文件，在项目根目录运行：

npm start

脚手架自带的构建工具（webpack+Babel）会自动把JSX转译成原生JavaScript，再启动开发服务器加载组件，正常渲染页面。

情况2：手动搭建的React环境 #

需要配置Babel转译JSX：

1. 安装依赖：

   npm install @babel/core @babel/preset-react @babel/node --save-dev
   

2. 在项目根目录创建.babelrc配置文件，写入：

   {
     "presets": ["@babel/preset-react"]
   }
   

3. 使用Babel Node执行组件文件（仅用于测试，实际项目建议用构建工具打包）：

   npx babel-node .\app\page.js
   

发生机制 #

• JSX是React为了简化UI编写提出的语法扩展，它本质是React.createElement()函数的语法糖，但浏览器和Node.js都无法直接识别这种非标准语法。
• 正常React项目中，构建流程会通过Babel将JSX代码转译成原生JavaScript函数调用（比如把<div> page </div>转成React.createElement('div', null, ' page ')），转译后的代码才能被Node或浏览器正确执行。
• 你直接用node执行未转译的组件文件，Node解析器遇到不属于原生JS语法的<符号，就会触发语法错误，导致进程退出码为1。

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