javascript - ¿Los nombres de los componentes de ReactJS deben comenzar con mayúscula?

Estoy jugando con el framework 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 se muestra:

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

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

Pero tan pronto como reemplazo el fml con Fml, sí se renderiza.

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

Respuesta #1

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

Vea las advertencias de la API createElement.

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

Respuesta #2

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

React solía contener una lista blanca de nombres de elementos bien conocidos como div, etc., que usaba para diferenciar entre elementos del DOM y componentes de React.

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

Respuesta #3

De la referencia oficial de React:

Cuando un tipo de elemento comienza con una letra minúscula, se refiere a un componente incorporado como <div> o <span> y resulta en una cadena 'div' o 'span' que se pasa a React.createElement. Los tipos que comienzan con una letra mayúscula como <Foo /> se compilan a React.createElement(Foo) y corresponden a un componente definido o importado en tu archivo de JavaScript.

También tenga en cuenta que:

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

Lo que significa que uno tiene que usar:

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