Create-React-App 构建 - “未捕获的语法错误：意外的标记 ”

JS

使用Create-React-App构建React应用时，有时会遇到"未捕获的语法错误：意外的标记 <"的错误。这个错误通常是由于在JSX代码中出现了意外的尖括号导致的。JSX是一种类似HTML的语法扩展，用于在React中描述用户界面。在JSX中，尖括号通常用于表示标签的开始和结束，但有时我们可能会在代码中不正确地使用它们，从而导致这个错误的出现。

一个常见的情况是在JSX中使用尖括号时忘记关闭标签或使用了不正确的标签。例如，在以下代码中，我们尝试使用一个未关闭的div标签：

JSx
function App() {
  return (
    <div>
      <h1>Hello World!</h1>
  );
}

在这个例子中，我们忘记了关闭div标签，导致了"未捕获的语法错误：意外的标记 <"的错误。要解决这个问题，我们只需在代码的适当位置添加一个闭合的div标签即可：

JSx
function App() {
  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  );
}

这样就修复了错误，并且代码可以正常运行了。

解决方案：检查标签的闭合

为了避免类似的错误，我们在编写JSX代码时应该仔细检查标签的闭合。确保每个开始标签都有对应的结束标签，并且嵌套的标签也正确地进行了闭合。

有时，我们还可能会在JSX代码中不小心使用了尖括号，而不是想要使用标签。例如，在以下代码中，我们在字符串中使用了尖括号：

JSx
function App() {
  return (
    <div>
      <h1>Hello World!</h1>
      
This is an example of an unexpected < in a string.</p>    </div>
  );
}

在这种情况下，React会将尖括号解释为标签的开始和结束，从而导致"未捕获的语法错误：意外的标记 <"的错误。为了解决这个问题，我们可以使用实体编码来代替尖括号，或者将字符串分成多个部分进行拼接：

JSx
function App() {
  return (
    <div>
      <h1>Hello World!</h1>
      
This is an example of an unexpected < in a string.
    </div>
  );
}

这样就修复了错误，并且代码可以正常运行了。

在使用Create-React-App构建React应用时，如果遇到"未捕获的语法错误：意外的标记 <"的错误，我们需要仔细检查代码中的尖括号使用情况。确保所有标签都正确地进行了闭合，并避免在字符串中不正确地使用尖括号。

通过遵循这些最佳实践，我们可以避免这类错误，并且能够顺利构建React应用。