I nomi dei componenti ReactJS devono iniziare con lettere maiuscole?

Question

Sto giocando con il framework ReactJS su JSBin.

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

ad esempio i seguenti non rende:

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

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

Ma non appena si sostituisce la fml con Fml lo fa il rendering.

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

Answer 1

In JSX, i nomi di tag in lettere minuscole sono considerati tag HTML. Tuttavia, i nomi di tag in lettere minuscole con un punto (accesso proprietà) non lo sono.

Vedere HTML tags vs React Components.

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

Answer 2

Morphaus ha dato una risposta molto buona, volevo solo aggiungere un altro dettaglio. React utilizzato per contenere una whitelist di nomi di elementi noti come div ecc., Utilizzato per distinguere tra elementi DOM e componenti React.

Ma poiché mantenere tale elenco non è così divertente e poiché i componenti Web consentono di creare elementi personalizzati, hanno stabilito che tutti i componenti React devono iniziare con una lettera maiuscola o contenere un punto.

Answer 3

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

Answer 4

La prima parte di un tag JSX determina il tipo di elemento React, in pratica c'è qualche convenzione in maiuscolo, in minuscolo, dot-notazione.

tipi capitalizzati e dot-notazione indicano che il tag JSX si riferisce a un componente Reagire, quindi se si utilizza il JSX <Foo /> compilare per React.createElement(Foo)
O
<foo.bar /> compilare per React.createElement(foo.bar) e corrispondono ad un componente definito o importato nel tuo file JavaScript.

Mentre il tipo minuscola indicano un componente integrato come <div> o <span> e si traduce in una stringa 'div' o 'span' passato a React.createElement('div').

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