15
votes

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>
    );
  }
});
2

2 Answers

15
votes

From some react release notes

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

-1
votes

React is actually just case sensitive.

There's a relevant github issue here where someone asks the same question. https://github.com/reactjs/React.NET/issues/76