Search code examples
javascriptreactjs

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

  • 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 caveats of the createElement API.

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