¿Los nombres de los componentes de 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 reemplazo, fmlse Fmlrenderiza.

¿Hay algún motivo por el que no puedo empezar las etiquetas con letras minúsculas?

May 21 '15 19:05 shaunakde

@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 usaba para diferenciar entre elementos DOM y componentes de React.

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

May 21 '2015 12:05 Anders Ekdahl

De la referencia oficial de React :

Cuando un tipo de elemento comienza con una letra minúscula, se refiere a un componente integrado como o y da como resultado una cadena 'div' o 'span' pasada a React.createElement. Los 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 los componentes con letra 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 hay que utilizar:

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

Mar 14 '2018 09:03 0leg

Los componentes definidos por el usuario deben estar en mayúscula

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

React recomienda nombrar los 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.

Por ejemplo, este código no se ejecutará como se esperaba:

import React from 'react';

// Wrong! This is a component and should have been capitalized:
function hello(props) {
  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:
  return <hello toWhat="World" />;
}

Para solucionar este problema, cambiaremos el nombre de hola a Hola y usaremos <Hello />cuando nos referimos a él:

import React from 'react';

// Correct! This is a component and should be capitalized:
function Hello(props) {
  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // Correct! React knows <Hello /> is a component because it's capitalized.
  return <Hello toWhat="World" />;
}

Aquí está la referencia

May 23 '2021 10:05 Malik Haseeb