在 React 中定义组件时，组件名的首字母是否一定要大写？请说明背后的原因。

回答思路

1. 【回答框架 1】在 React 中，组件名的首字母大写是约定俗成的规范，而非硬性语法要求。核心原因在于 JSX 的编译规则：当 JSX 元素以小写字母开头时，如 <div> 或 <span>，Babel 等编译器会将其视为原生 DOM 标签，直接生成对应的字符串类型，而大写字母开头的元素则被视为自定义组件，编译器会将其转换为对该组件变量或函数的引用。
2. 【回答框架 2】如果组件名首字母小写，JSX 编译器会将其当作内置 HTML 标签处理，导致组件不会被正确渲染，而是被当作未知的 DOM 元素输出到页面上，从而引发渲染错误或空白内容。因此，为了确保组件被正确识别和渲染，必须将组件名的首字母大写。
3. 【回答框架 3】从实践角度，大写开头也是代码可读性的重要体现，能清晰区分组件与普通 HTML 标签，便于团队协作和维护。尽管存在某些环境下可能因配置或转译差异而表现不同，但遵循此规范是 React 社区的标准做法，也是 React 官方文档明确建议的。
4. 【回答框架 4】此外，自定义组件也可以使用点号表示法，如 <MyComponents.DatePicker>，此时组件名仍以大写或点号分隔，但同样遵循首字母大写的约定，以确保 JSX 正确解析。
5. 【回答框架 5】因此，组件名首字母必须大写，这是由 JSX 编译机制决定的，既是技术上的必要，也是社区最佳实践。
6. 【关键点 1】JSX 编译时将小写标签视为原生 DOM 元素，大写视为自定义组件引用。
7. 【关键点 2】首字母小写会导致组件被当作 HTML 标签处理，无法正确渲染。
8. 【关键点 3】大写开头是 React 官方规范，也是保证代码可读性和可维护性的重要实践。
9. 【易错点 1】不能认为首字母大写只是代码风格问题，它直接影响 JSX 编译结果。
10. 【易错点 2】避免误以为在任意配置下小写组件名都能正常工作，转译规则是固定的。