Имена компонентов ReactJS должны начинаться с заглавных букв?

Я играю с ReactJS фреймворком на JSBin .

Я заметил, что если имя моего компонента начинается со строчной буквы, оно не работает.

Например, следующее не отображает:

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

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

Но как только я заменить fmlс Fmlней действительно делают.

Есть ли причина, по которой я не могу начинать теги со строчных букв?

В JSX имена тегов в нижнем регистре считаются тегами HTML. Тем не менее, строчные имена тегов с точкой (свойство accessor) не являются.

Смотрите HTML-теги против React Components .

• <component />компилируется в React.createElement('component')(html tag)
• <Component /> компилируется в React.createElement(Component)
• <obj.component /> компилируется в React.createElement(obj.component)

@ Александр Кирзенберг дал очень хороший ответ, просто хотел добавить еще одну деталь.

React раньше содержал белый список с хорошо известными именами элементов, такими как и divт. Д., Который он использовал для различения элементов DOM и компонентов React.

Но поскольку поддерживать этот список не так уж и весело, а веб-компоненты позволяют создавать собственные элементы, они установили правило, согласно которому все компоненты React должны начинаться с заглавной буквы или содержать точку .

Из официальной ссылки React :

Когда тип элемента начинается со строчной буквы, он ссылается на встроенный компонент, такой как или, и приводит к строке 'div' или 'span', передаваемой в React.createElement. Типы, которые начинаются с заглавной буквы, такие как compile to React.createElement (Foo) и соответствуют компоненту, определенному или импортированному в вашем файле JavaScript.

Также обратите внимание, что:

Мы рекомендуем называть компоненты заглавными буквами. Если у вас есть компонент, который начинается со строчной буквы, присвойте его заглавной переменной перед использованием в JSX.

Что означает, что нужно использовать:

const Foo = foo;перед использованием fooв качестве компонента компонента в JSX.

Первая часть JSXтега определяет тип элемента React, в основном, существует соглашение с заглавными буквами, строчными буквами и точками .

Типы с JSXзаглавными буквами и точечные обозначения указывают, что тег ссылается на компонент React, поэтому, если вы используете JSX- <Foo />компиляцию для React.createElement(Foo)
ИЛИ-
<foo.bar />компиляции React.createElement(foo.bar)и соответствуют компоненту, определенному или импортированному в вашем файле JavaScript.

В то время как строчные буквы указывают на встроенный компонент, такой как <div>или, в <span>результате получается строка 'div'или 'span'передается React.createElement('div').

Реактив рекомендует именовать компоненты с заглавной буквы. Если у вас есть компонент, который начинается со строчной буквы, присвойте его заглавной переменной, прежде чем использовать в JSX.

В JSX классы React пишутся с заглавной буквы, чтобы сделать XML-совместимым, чтобы его нельзя было принять за тег HTML. Если классы реакции не пишутся с заглавной буквы, это HTML-тег как предопределенный синтаксис JSX.