Les noms des composants ReactJS doivent commencer par des majuscules?

Je joue avec le framework ReactJS sur JSBin .

J'ai remarqué que si le nom de mon composant commence par une lettre minuscule, cela ne fonctionne pas.

Par exemple, ce qui suit ne rend pas:

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

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

Mais dès que je remplace le fmlpar, Fmlil rend.

Y a-t-il une raison pour laquelle je ne peux pas commencer les balises par des minuscules?

Dans JSX, les noms de balises minuscules sont considérés comme des balises HTML. Cependant, les noms de balises minuscules avec un point (accesseur de propriété) ne le sont pas.

Voir les balises HTML et les composants React .

• <component />compile vers React.createElement('component')(balise html)
• <Component /> compile en React.createElement(Component)
• <obj.component /> compile en React.createElement(obj.component)

@Alexandre Kirszenberg a donné une très bonne réponse, je voulais juste ajouter un autre détail.

React contenait auparavant une liste blanche de noms d'élément bien connus comme divetc, qu'il utilisait pour différencier les éléments DOM et les composants React.

Mais parce que maintenir cette liste n'est pas si amusant et que les composants Web permettent de créer des éléments personnalisés, ils en ont fait une règle selon laquelle tous les composants React doivent commencer par une lettre majuscule ou contenir un point .

D'après la référence officielle React :

Lorsqu'un type d'élément commence par une lettre minuscule, il fait référence à un composant intégré tel que ou et se traduit par une chaîne «div» ou «span» passée à React.createElement. Les types qui commencent par une majuscule comme compiler en React.createElement (Foo) et correspondent à un composant défini ou importé dans votre fichier JavaScript.

Notez également que:

Nous vous recommandons de nommer les composants avec une majuscule. Si vous avez un composant qui commence par une lettre minuscule, affectez-le à une variable en majuscule avant de l'utiliser dans JSX.

Ce qui signifie qu'il faut utiliser:

const Foo = foo;avant de l'utiliser foocomme élément Component dans JSX.

La première partie d'une JSXbalise détermine le type de l'élément React, fondamentalement, il existe une convention en majuscules, en minuscules, en notation par points .

Les types en majuscules et en notation par points indiquent que la JSXbalise fait référence à un composant React, donc si vous utilisez la <Foo />compilation JSX pour compiler React.createElement(Foo)
OU et correspondre à un composant défini ou importé dans votre fichier JavaScript.
<foo.bar />React.createElement(foo.bar)

Alors que le type minuscule indique à un composant intégré comme <div>ou <span>et entraîne une chaîne 'div'ou est 'span'passé à React.createElement('div').

React recommande de nommer les composants avec une majuscule. Si vous avez un composant qui commence par une lettre minuscule, affectez-le à une variable en majuscule avant de l'utiliser dans JSX.

Dans JSX, les classes React sont en majuscules pour rendre XML compatible, afin qu'il ne soit pas confondu avec une balise HTML. Si les classes de réaction ne sont pas en majuscules, il s'agit d'une balise HTML en tant que syntaxe JSX prédéfinie.