安装React后保存代码出现语法报错，请问该如何解决？

1. 修正现有代码的格式错误 #

你当前提交的代码存在明显的格式问题：所有JSX标签的左尖括号<都被单独拆分到上一行，无论JS还是JSX语法都不支持这种写法，首先需要把代码调整为正确格式：

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

2. 调整编辑器校验规则 #

如果修正代码格式后依然报原生JS语法错误，是因为编辑器默认把.js后缀文件按原生JS规则校验，不识别JSX语法，按以下步骤处理即可：

• 优先把包含JSX语法的文件后缀从.js改为.jsx，符合React官方的规范要求
• 如果要保留.js后缀，按编辑器类型调整：
  • VSCode：点击编辑器右下角的「JavaScript」语言标识，将当前文件的关联语言改为「JavaScript React」，也可以在设置中全局配置所有.js文件默认使用「JavaScript React」模式校验
  • 其他编辑器：在语言关联设置中，将JS文件关联到React JSX的语法校验规则即可
• 如果项目配置了ESLint校验，在根目录的ESLint配置文件中新增React相关的解析规则，开启JSX语法支持即可。

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