ReactJS component names must begin with capital letters?

I am playing around with the ReactJS framework on JSBin.

I have noticed that if my component name starts with a lowercase letter it does not work.

For instance the following does not render:

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

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

But as soon as I replace the fml with Fml it does render.

Is there a reason I cannot begin tags with small letters?

Solution 1:

In JSX, lower-case tag names are considered to be HTML tags. However, lower-case tag names with a dot (property accessor) aren't.

See HTML tags vs React Components.

• <component /> compiles to React.createElement('component') (html tag)
• <Component /> compiles to React.createElement(Component)
• <obj.component /> compiles to React.createElement(obj.component)

Solution 2:

@Alexandre Kirszenberg gave a very good answer, just wanted to add another detail.

React used to contain a whitelist of well-known element names like div etc, which it used to differentiate between DOM elements and React components.

But because maintaining that list isn't all that fun, and because web components makes it possible to create custom elements, they made it a rule that all React components must start with a upper case letter, or contain a dot.

Solution 3:

From the official React reference:

When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

Also note that:

We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

Which means one has to use:

const Foo = foo; before using foo as a Component element in JSX.