Nazwy komponentów ReactJS muszą zaczynać się wielkimi literami?

Bawię się frameworkiem ReactJS na JSBin .

Zauważyłem, że jeśli nazwa mojego komponentu zaczyna się od małej litery, to nie działa.

Na przykład następujące elementy nie są renderowane:

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

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

Ale jak tylko wymienić fmlz Fmlnim nie render.

Czy istnieje powód, dla którego nie mogę zaczynać tagów od małych liter?

W JSX nazwy znaczników pisane małymi literami są traktowane jako znaczniki HTML. Jednak nazwy znaczników pisane małymi literami z kropką (akcesor właściwości) nie są.

Zobacz tagi HTML a komponenty React .

• <component />kompiluje się do React.createElement('component')(tag html)
• <Component /> kompiluje się do React.createElement(Component)
• <obj.component /> kompiluje się do React.createElement(obj.component)

@Alexandre Kirszenberg udzielił bardzo dobrej odpowiedzi, chciał tylko dodać kolejny szczegół.

React zawierał białą listę dobrze znanych nazw elementów, takich jak divetc, których używał do rozróżniania elementów DOM od komponentów React.

Ale ponieważ utrzymywanie tej listy nie jest takie zabawne, a ponieważ komponenty internetowe umożliwiają tworzenie niestandardowych elementów, uczynili regułę, że wszystkie komponenty React muszą zaczynać się od dużej litery lub zawierać kropkę .

Z oficjalnego odniesienia w React :

Gdy typ elementu zaczyna się od małej litery, odwołuje się do wbudowanego komponentu, takiego jak lub, i skutkuje przekazaniem ciągu „div” lub „span” do React.createElement. Typy zaczynające się wielką literą, np. Kompiluj do React.createElement (Foo) i odpowiadające komponentowi zdefiniowanemu lub zaimportowanemu w pliku JavaScript.

Pamiętaj również, że:

Zalecamy nazywanie komponentów wielką literą. Jeśli masz komponent zaczynający się małą literą, przypisz go do zmiennej zapisywanej wielkimi literami przed użyciem jej w JSX.

Co oznacza, że ​​należy użyć:

const Foo = foo;przed użyciem foojako elementu komponentu w JSX.

Pierwsza część JSXtagu określa typ elementu React, w zasadzie istnieje pewna konwencja: wielkie litery, małe litery, notacja kropkowa .

Typy pisane wielką literą i z kropką wskazują, że JSXtag odwołuje się do komponentu React, więc jeśli używasz <Foo />kompilacji JSX do kompilacji React.createElement(Foo)
OR do komponentu zdefiniowanego lub zaimportowanego w pliku JavaScript i odpowiadaj temu.
<foo.bar />React.createElement(foo.bar)

Podczas gdy małe litery wskazują na wbudowany składnik, taki jak <div>lub, <span>i skutkuje ciągiem znaków 'div'lub 'span'przekazaniem do React.createElement('div').

React zaleca nazwanie komponentów wielką literą. Jeśli masz komponent rozpoczynający się małą literą, przypisz go do zmiennej zapisywanej wielkimi literami przed użyciem w JSX.

W JSX klasy React są pisane wielkimi literami, aby były zgodne z XML, więc nie są mylone ze znacznikami HTML. Jeśli klasy reakcji nie są pisane wielkimi literami, jest to znacznik HTML w postaci wstępnie zdefiniowanej składni JSX.