React页面与组件命名规则差异及小写组件命名报错疑问

React在JSX语法里有个硬性规则：自定义组件的名称必须首字母大写，否则会被识别为HTML原生标签，而原生标签里不存在signin这类标签，所以会触发报错。

为什么教程里可以用小写？ #

大概率是这几种情况：

• 教程作者没有用JSX标签的方式调用组件，而是直接把它当普通函数执行，比如写{signin()}而不是<signin/>，这种调用方式不需要首字母大写。
• 教程用的是非常老旧的React版本（v0.12及更早），当时还没引入首字母大写的规范，现在的React版本（v0.13+）都严格执行这个规则了。
• 可能你看错了，教程里的组件变量名其实是大写的（比如Signin），只是文件名用了小写——文件名的大小写不影响React的识别，它只关心你定义的组件变量名。

解决方法 #

最规范的做法是遵循React的要求，把组件名改成首字母大写：

// 文件名可以保持signin.js不变
import React from 'react'

const Signin = () => {
    return (
        <></>
    )
}

export default Signin

导入和调用时也用大写：

import Signin from "./signin";

// 在JSX中使用
<Signin />

如果非要保留小写变量名，那调用时不要用JSX标签，直接执行函数：

import signin from "./signin";

// 作为函数调用
{signin()}

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