Why do components in react need to be capitalized? [duplicate]

Question

So, when you declare a component in react with a lowercase first letter, it doesn't show up, without throwing an error. When you capitalise the component name, it does work.

What is it implemented like this? To avoid collision with existing html elements, or is this a bug?

var test = React.createClass({
  render: function() {
    return (
      <div>Test</div>
    );
  }
});

var Screen = React.createClass({
  render: function() {
    return (
      <div>
        <test/>
      </div>
    );
  }
});

When I change test to Test, it works:

var Test = React.createClass({
  render: function() {
    return (
      <div>Test</div>
    );
  }
});

var Screen = React.createClass({
  render: function() {
    return (
      <div>
        <Test/>
      </div>
    );
  }
});

Answer 1

From some react release notes

the JSX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components).