基于create-react-app的React组件解析失败问题求助

Hey there! Let's break down why your React component is throwing parsing errors specifically with HTML tags (while strings work fine) — I’ve run into similar headaches before, so here are the most common fixes to try:

1. JSX Syntax Rule Violations #

React uses JSX, which looks like HTML but has strict JavaScript-integrated rules. If you’re writing raw HTML without adapting to these, parsing will fail:

• Self-closing tags: HTML tags like <img> or <br> must be written as <img /> or <br /> in JSX (you can’t omit the trailing slash).
• Keyword conflicts: Replace HTML’s class with className and for with htmlFor — these are reserved JavaScript keywords, so using them directly breaks parsing.
• Single root element requirement: JSX won’t let you return multiple un-wrapped tags. If your component tries to return two <div>s without a container, wrap them in a React fragment (<>) or a parent <div>.

2. Confusing Strings with JSX #

If you’re wrapping your HTML in quotes (e.g., return "<div>Hello</div>"), React will treat it as plain text instead of parsing it as markup. Make sure you’re writing JSX directly without quote wrappers:

// ❌ Wrong (treats as string)
function MyComponent() {
  return "<h1>Hello</h1>"
}

// ✅ Correct (parses as JSX)
function MyComponent() {
  return <h1>Hello</h1>
}

3. File Extension Issues #

React components should use .jsx (or .tsx for TypeScript) as their file extension. While Create React App supports JSX in .js files now, some editor or config quirks can still cause parsing failures. Try renaming your component file to .jsx and see if that fixes it.

4. Accidentally Modified Babel Config (If You Ejected) #

Create React App comes pre-configured with @babel/preset-react to translate JSX into browser-readable JavaScript. If you ran npm run eject and modified the Babel config later, double-check that @babel/preset-react is still listed in your babel.config.js or package.json presets.

Here’s a before-and-after of a broken component vs. fixed version:

// ❌ Broken component
function BrokenComponent() {
  return (
    <div class="card">
      <p>Hi there</p>
      <br>
      <div>Another div</div>
    </div>
    <div>Oops, second root element</div>
  )
}

// ✅ Fixed component
function FixedComponent() {
  return (
    <>
      <div className="card">
        <p>Hi there</p>
        <br />
        <div>Another div</div>
      </div>
      <div>Now wrapped in a fragment!</div>
    </>
  )
}

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