Os nomes dos componentes do ReactJS devem começar com letras maiúsculas?

Estou brincando com a estrutura ReactJS no JSBin .

Percebi que, se o nome do meu componente começar com uma letra minúscula, ele não funcionará.

Por exemplo, o seguinte não é renderizado:

var fml = React.createClass({
  render: function () {
    return <a href='google.com'>Go</a>
  }
});

React.render(<fml />, document.body);

Mas assim que eu substituir o fmlcom Fmlele se torna.

Existe um motivo para eu não poder começar as tags com letras minúsculas?

No JSX, os nomes de marcas minúsculas são considerados marcas HTML. No entanto, os nomes de tags em minúsculas com um ponto (acessador de propriedade) não são.

Veja tags HTML versus componentes de reação .

• <component />compila para React.createElement('component')(tag html)
• <Component /> compila para React.createElement(Component)
• <obj.component /> compila para React.createElement(obj.component)

@Alexandre Kirszenberg deu uma resposta muito boa, só queria acrescentar outro detalhe.

O React costumava conter uma lista de desbloqueio de nomes de elementos conhecidos como divetc, usados ​​para diferenciar elementos DOM e componentes do React.

Mas como manter essa lista não é tão divertida e como os componentes da Web possibilitam a criação de elementos personalizados, eles estabeleceram uma regra de que todos os componentes do React devem começar com uma letra maiúscula ou conter um ponto .

Da referência oficial do React :

Quando um tipo de elemento começa com uma letra minúscula, ele se refere a um componente interno como ou e resulta em uma string 'div' ou 'span' passada para React.createElement. Tipos que começam com uma letra maiúscula como compilar em React.createElement (Foo) e correspondem a um componente definido ou importado no seu arquivo JavaScript.

Observe também que:

Recomendamos nomear componentes com uma letra maiúscula. Se você tiver um componente que comece com uma letra minúscula, atribua-o a uma variável em maiúscula antes de usá-lo em JSX.

O que significa que é preciso usar:

const Foo = foo;antes de usar foocomo um elemento Component em JSX.

A primeira parte de uma JSXtag determina o tipo do elemento React, basicamente existe uma convenção com letras maiúsculas, minúsculas e notação de pontos .

Tipos de notação emJSX maiúsculas e pontos indicam que a tag está se referindo a um componente React, portanto, se você usar a <Foo />compilação JSX para compilar React.createElement(Foo)
OU
<foo.bar />compilar React.createElement(foo.bar)e corresponder a um componente definido ou importado em seu arquivo JavaScript.

Enquanto o tipo em minúscula indica para um componente interno como <div>ou <span>e resulta em uma sequência 'div'ou 'span'transmitida para React.createElement('div').

React recomenda nomear componentes com uma letra maiúscula. Se você tiver um componente que comece com uma letra minúscula, atribua-o a uma variável em maiúscula antes de usá-lo JSX.

No JSX, as React Classes são capitalizadas para tornar o XML compatível, para que não seja confundido com uma tag HTML. Se as classes de reação não estiverem em maiúsculas, é uma tag HTML como sintaxe JSX predefinida.