I nomi dei componenti di ReactJS devono iniziare con le lettere maiuscole?

Sto giocando con il framework ReactJS su JSBin .

Ho notato che se il nome del mio componente inizia con una lettera minuscola, non funziona.

Ad esempio, non viene visualizzato quanto segue:

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

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

Ma non appena lo sostituisco fmlcon il Fmlrendering.

C'è un motivo per cui non posso iniziare i tag con lettere minuscole?

In JSX, i nomi dei tag minuscoli sono considerati tag HTML. Tuttavia, i nomi dei tag in minuscolo con un punto (accessor proprietà) non lo sono.

Vedi tag HTML e componenti di React .

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

@Alexandre Kirszenberg ha dato un'ottima risposta, volevo solo aggiungere un altro dettaglio.

React usato per contenere una whitelist di nomi di elementi noti come divetc, che usava per differenziare tra elementi DOM e componenti React.

Ma poiché mantenere tale elenco non è poi così divertente e poiché i componenti Web rendono possibile la creazione di elementi personalizzati, hanno reso una regola che tutti i componenti di React devono iniziare con una lettera maiuscola o contenere un punto .

Dal riferimento ufficiale di React :

Quando un tipo di elemento inizia con una lettera minuscola, fa riferimento a un componente incorporato come o e risulta in una stringa 'div' o 'span' passata a React.createElement. Tipi che iniziano con una lettera maiuscola come compilare in React.createElement (Foo) e corrispondono a un componente definito o importato nel file JavaScript.

Si noti inoltre che:

Raccomandiamo di nominare i componenti con una lettera maiuscola. Se hai un componente che inizia con una lettera minuscola, assegnalo a una variabile maiuscola prima di usarlo in JSX.

Ciò significa che bisogna usare:

const Foo = foo;prima di utilizzare foocome elemento Component in JSX.

La prima parte di un JSXtag determina il tipo di elemento React, fondamentalmente esiste una convenzione maiuscola, minuscola, notazione con punti .

I tipi in maiuscolo e di notazione a punti indicano che il JSXtag si riferisce a un componente React, quindi se si utilizza la <Foo />compilazione JSX su React.createElement(Foo)
OR
<foo.bar />compilare React.createElement(foo.bar)e corrispondere a un componente definito o importato nel file JavaScript.

Mentre il tipo minuscolo indica un componente incorporato come <div>o <span>e risulta in una stringa 'div'o 'span'passato a React.createElement('div').

React consiglia di nominare i componenti con una lettera maiuscola. Se si dispone di un componente che inizia con una lettera minuscola, assegnarlo a una variabile maiuscola prima di utilizzarlo JSX.

In JSX, le classi React sono capitalizzate per rendere XML compatibile, in modo che non venga scambiato per un tag HTML. Se le classi di reazione non sono maiuscole, si tratta di un tag HTML come sintassi JSX predefinita.