使用npm搭建React项目在浏览器运行时出现异常报错求助

Hey there! Let's walk through the issues in your code step by step—these are super common gotchas when starting out with React 😊

1. React组件名必须首字母大写 #

This is the most likely cause of your weird error! React treats any tag starting with a lowercase letter as a native HTML element (like <div> or <p>), not a custom component.

To fix this:

• Update your import in App.js to use a capitalized name:

  import Projects from './components/projects';
  

• Use the capitalized component name when rendering:

  <Projects />
  

2. 补全Projects.js的代码 #

Your Projects.js snippet cuts off mid-import, so let's make sure it's a valid React component. Here's a complete working example (class component style, matching your App.js structure):

// Projects.js
import React, { Component } from 'react';

class Projects extends Component {
  render() {
    return (
      <div className="Projects">
        {/* Add your component content here */}
        My Projects List
      </div>
    );
  }
}

export default Projects;

If you prefer function components (the modern approach), here's that version:

// Projects.js (function component)
import React from 'react';

const Projects = () => {
  return (
    <div className="Projects">
      My Projects List
    </div>
  );
};

export default Projects;

3. 检查文件路径与依赖 #

• Confirm that Projects.js is actually located in a components folder at the same level as App.js (path: ./components/projects.js). Note that file paths are case-sensitive on macOS/Linux, so make sure the folder and file names match exactly.
• Ensure you've installed React correctly by running npm install react react-dom in your project root, and that your package.json lists these dependencies.

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