ReactJS-Komponentennamen müssen mit Großbuchstaben beginnen?

Ich spiele mit dem ReactJS-Framework auf JSBin herum .

Ich habe festgestellt, dass mein Komponentenname, der mit einem Kleinbuchstaben beginnt, nicht funktioniert.

Zum Beispiel wird Folgendes nicht gerendert:

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

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

Aber sobald ich ersetzen die fmlmit Fmlihm nicht machen.

Gibt es einen Grund, warum ich Tags nicht mit kleinen Buchstaben beginnen kann?

In JSX werden Tag-Namen in Kleinbuchstaben als HTML-Tags betrachtet. Tag-Namen in Kleinbuchstaben mit einem Punkt (Eigenschafts-Accessor) sind dies jedoch nicht.

Siehe HTML-Tags vs React Components .

• <component />Kompiliert zu React.createElement('component')(HTML-Tag)
• <Component /> kompiliert zu React.createElement(Component)
• <obj.component /> kompiliert zu React.createElement(obj.component)

@Alexandre Kirszenberg gab eine sehr gute Antwort, wollte nur ein weiteres Detail hinzufügen.

React enthielt früher eine Whitelist bekannter Elementnamen wie divetc, mit der zwischen DOM-Elementen und React-Komponenten unterschieden wurde.

Da das Verwalten dieser Liste nicht allzu viel Spaß macht und Webkomponenten das Erstellen benutzerdefinierter Elemente ermöglichen, wurde die Regel festgelegt, dass alle React-Komponenten mit einem Großbuchstaben beginnen oder einen Punkt enthalten müssen .

Aus der offiziellen React-Referenz :

Wenn ein Elementtyp mit einem Kleinbuchstaben beginnt, verweist er auf eine integrierte Komponente wie oder und führt zu einer Zeichenfolge 'div' oder 'span', die an React.createElement übergeben wird. Typen, die mit einem Großbuchstaben wie "Kompilieren" in "React.createElement" (Foo) beginnen und einer in Ihrer JavaScript-Datei definierten oder importierten Komponente entsprechen.

Beachten Sie auch Folgendes:

Wir empfehlen, Komponenten mit einem Großbuchstaben zu benennen. Wenn Sie eine Komponente haben, die mit einem Kleinbuchstaben beginnt, weisen Sie sie einer großgeschriebenen Variablen zu, bevor Sie sie in JSX verwenden.

Was bedeutet, dass man verwenden muss:

const Foo = foo;vor der Verwendung fooals Komponentenelement in JSX.

Der erste Teil eines JSXTags bestimmt den Typ des React-Elements. Grundsätzlich gibt es eine Konvention Groß- und Kleinschreibung .

Aktiviert und Punktnotation Typen zeigen an, dass der JSXTag eine Komponente bezieht Reaktion, wenn Sie also die JSX verwenden <Foo />kompilieren React.createElement(Foo)
ODER
<foo.bar />kompilieren React.createElement(foo.bar)und entspricht eine Komponente definiert oder importiert in Ihrer JavaScript - Datei.

Während der Kleinbuchstaben-Typ auf eine integrierte Komponente wie <div>oder hinweist <span>und zu einer Zeichenfolge führt 'div'oder an 'span'übergeben wird React.createElement('div').

Reagieren Sie, Komponenten mit einem Großbuchstaben zu benennen. Wenn Sie eine Komponente haben, die mit einem Kleinbuchstaben beginnt, weisen Sie sie einer großgeschriebenen Variablen zu, bevor Sie sie in verwenden JSX.

In JSX werden Reaktionsklassen großgeschrieben, um XML-kompatibel zu machen, damit sie nicht mit einem HTML-Tag verwechselt werden. Wenn die Reaktionsklassen nicht groß geschrieben werden, handelt es sich um ein HTML-Tag als vordefinierte JSX-Syntax.