Los nombres de los componentes ReactJS deben comenzar con letras mayúsculas?

Estoy jugando con el marco ReactJS en JSBin .

He notado que si el nombre de mi componente comienza con una letra minúscula, no funciona.

Por ejemplo, lo siguiente no representa:

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

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

Pero tan pronto como lo reemplace fmlcon el Fmlrenderizado.

¿Hay alguna razón por la que no puedo comenzar las etiquetas con letras minúsculas?

En JSX, los nombres de etiqueta en minúsculas se consideran etiquetas HTML. Sin embargo, los nombres de etiqueta en minúscula con un punto (descriptor de acceso de propiedad) no lo son.

Ver etiquetas HTML frente a React Components .

• <component />compila a React.createElement('component')(etiqueta html)
• <Component /> compila a React.createElement(Component)
• <obj.component /> compila a React.createElement(obj.component)

@Alexandre Kirszenberg dio una muy buena respuesta, solo quería agregar otro detalle.

React solía contener una lista blanca de nombres de elementos conocidos como divetc., que solía diferenciar entre elementos DOM y componentes React.

Pero debido a que mantener esa lista no es tan divertido, y debido a que los componentes web permiten crear elementos personalizados, establecieron que todos los componentes React deben comenzar con una letra mayúscula o contener un punto .

De la referencia oficial de React :

Cuando un tipo de elemento comienza con una letra minúscula, se refiere a un componente incorporado como o y da como resultado una cadena 'div' o 'span' que se pasa a React.createElement. Tipos que comienzan con una letra mayúscula como compilar en React.createElement (Foo) y corresponden a un componente definido o importado en su archivo JavaScript.

También tenga en cuenta que:

Recomendamos nombrar componentes con mayúscula. Si tiene un componente que comienza con una letra minúscula, asígnelo a una variable en mayúscula antes de usarlo en JSX.

Lo que significa que uno tiene que usar:

const Foo = foo;antes de usar foocomo elemento Componente en JSX.

La primera parte de una JSXetiqueta determina el tipo del elemento Reaccionar, básicamente hay una convención en mayúscula, en minúscula, con notación de puntos .

Los tipos en mayúscula y de notación de puntos indican que la JSXetiqueta se refiere a un componente React, por lo que si utiliza la <Foo />compilación JSX a React.createElement(Foo)
OR
<foo.bar />compila React.createElement(foo.bar)y corresponde a un componente definido o importado en su archivo JavaScript.

Mientras que el tipo en minúscula indica a un componente incorporado como <div>o <span>y da como resultado una cadena 'div'o se 'span'pasa a React.createElement('div').

Reaccionar recomienda nombrar componentes con mayúscula. Si tiene un componente que comienza con una letra minúscula, asígnelo a una variable en mayúscula antes de usarlo JSX.

En JSX, las clases React se capitalizan para hacer que XML sea compatible, de modo que no se confunda con una etiqueta HTML. Si las clases de reacción no están en mayúscula, es una etiqueta HTML como sintaxis JSX predefinida.