使用Sublime Text 3开发React遇报错求助（附代码）

刚接触React就碰到控制台一堆报错，确实挺让人挠头的，我帮你梳理几个最常见的原因和对应的解决办法，你可以一步步排查：

1. 缺少ReactDOM依赖，或者引入顺序错误 #

React 16版本之后，ReactDOM是单独的包，必须和React一起引入，而且要先加载React再加载ReactDOM。从你给出的代码片段看，只提到了react.min.js，很可能漏了react-dom.min.js。

解决办法：
确认你的项目里同时存在这两个文件，然后按顺序引入：

<script src="../../js/react.min.js"></script>
<script src="../../js/react-dom.min.js"></script>

如果本地文件路径容易出错，直接用CDN引入会更可靠：

<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

2. JSX没有被正确转译 #

Sublime Text里的Babel、JSX插件大多只是提供语法高亮，并没有帮你把浏览器不认识的JSX代码转成普通JavaScript。这时候浏览器会直接把JSX当成错误语法处理，抛出大量报错。

解决办法：
引入Babel的CDN来完成浏览器端的转译，并且把写React代码的<script>标签类型改成text/babel：

<!-- 在React之后引入Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<!-- 你的React组件代码要放在type为text/babel的script标签里 -->
<script type="text/babel">
  // 这里写你的React组件代码
</script>

3. 文件路径错误导致依赖未加载 #

如果你的react.min.js路径../../js/不正确，浏览器会返回404错误，导致React根本没加载成功，后续所有React相关代码都会报错。

解决办法：
打开浏览器开发者工具的「Network」面板，刷新页面后查看react.min.js的加载状态：

• 如果显示404，调整路径到正确的文件位置；
• 嫌本地路径麻烦的话，直接用上面提到的CDN链接更省心。

4. 组件代码的基础语法错误 #

刚学React很容易犯一些基础语法错误，比如：

• JSX里的class属性要写成className；
• 所有标签必须闭合（比如<input />不能写成<input>）；
• 函数组件必须返回一个JSX元素（或者null）；
• 挂载组件时要确保页面上存在对应的DOM节点。

给你一个可以直接运行的简单示例，你可以对比自己的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>React - Template</title>
  <!-- 引入React和ReactDOM -->
  <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
  <!-- 引入Babel用于转译JSX -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <!-- 挂载React组件的根节点 -->
  <div id="root"></div>

  <script type="text/babel">
    // 定义一个简单的函数组件
    function HelloReact() {
      return (
        <div className="greeting">
          <h1>Hello, React!</h1>
          <p>这是我的第一个React组件</p>
        </div>
      );
    }

    // 将组件挂载到root节点上
    ReactDOM.render(<HelloReact />, document.getElementById('root'));
  </script>
</body>
</html>

你可以先试试这个示例能不能正常运行，如果没问题，再对比自己的代码找差异，应该就能解决大部分问题啦。

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