为什么react组件首字母要大写

之前在写react遇到过这样的报错

Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. in app (at src/index.tsx:6)

这是因为react组件没有大写导致的。为什么react组件首字母要大写？

首先我们要知道jsx到js的转换。

这里用到了react的createElement方法。

官网给的解释如下

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

这里我们主要看第一个参数string/ReactClass type。我们具体看一下在什么情况下会用到string类型，什么情况下用到ReactClass type类型

• string 类型react会觉得他是一个原生dom节点
• ReactClass type 类型 自定义组件

例如（string）：在jsx中我们写一个

<div></div>

转换为js的时候就变成了

React.createElement("div", null)

例如（ReactClass type）：在jsx中我们写一个

function MyDiv() {
    return (<div><div>)
}
<MyDiv></MyDiv>

转换为js的时候就变成了

function MyDiv() {
  return React.createElement("div", null);
}

React.createElement(MyDiv, null);

上边的例子中如果将MyDiv中的首字母小写，如下

function myDiv() {
    return (<div><div>)
}
<myDiv></myDiv>

转换为js的时候就变成了

function MyDiv() {
  return React.createElement("div", null);
}

React.createElement("myDiv", null);

由于找不到myDiv这个dom，所以就会报错

大家也可以在babeljs中尝试。