18

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>
    );
  }
});
ngstschr
  • 2,119
  • 2
  • 22
  • 38

2 Answers2

19

From some react release notes

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

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 16
    I would think that it would be possible to break the convention. If breaking the convention breaks the code, it's more than a convention. – Oliver Oct 21 '15 at 12:47
  • Probably because it follows other OOP class naming conventions like Java – HaulinOats Feb 24 '17 at 22:03
-2

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

davidawad
  • 1,023
  • 11
  • 20