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

jsx element div has no corresponding closing tag

Question

Estoy jugando con el marco JSBin 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 reemplazo el fml con Fml se renderiza.

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

Answer 1

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 foo como elemento Componente en JSX.

Answer 2

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.

Answer 3

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 vs React Components .

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

Answer 4

La primera parte de una etiqueta JSX determina el tipo del elemento React, básicamente hay alguna 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 etiqueta JSX se refiere a un componente React, por lo que si usa la compilación JSX <Foo /> para React.createElement(Foo)
O
<foo.bar /> compila a React.createElement(foo.bar) y corresponde a un componente definido o importado en tu 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 ''span'' pasada 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 en JSX .

Answer 5

@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 div , etc., 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 .