Vite搭建React项目时自定义greeting组件无法加载如何解决

React 的 JSX 语法有强制规则：自定义组件必须以大写字母开头，小写开头的标签会被解析器识别为原生 HTML 标签，不会关联你编写的组件逻辑，这是组件无法加载的核心原因，和 Vite 构建配置无关。

• 修改 greeting.jsx 中的组件定义，将函数名从小写的 greeting 改为大写开头的 Greeting，同步修改导出语句：

import React from 'react';

function Greeting() {
  return (
    <div>
      Hello World!
    </div>
  );
}

export default Greeting;

• 修改 App.jsx 中的导入名和组件使用标签，同步替换为大写开头的 Greeting：

import React from 'react';
import Greeting from "./greeting";


function App() {
  return (
    <main>
      React⚛️ + Vite⚡ + Replit🌀
      <Greeting />
    </main>
  );
}

export default App;

• 你的入口渲染文件 main.jsx 写法完全正确，不需要做任何调整，保存修改后刷新页面，组件就可以正常渲染显示。

规则补充：JSX 解析时会通过首字母大小写区分元素类型：小写开头对应内置 DOM 元素（如 <div>、<main>），大写开头才会被识别为自定义 React 组件。你之前写的 <greeting /> 会被当成不存在的原生HTML标签处理，自然不会加载组件内容。

内容的提问来源于stack exchange，提问作者Wyatt G. Railey