Why Must ReactJS Component Names Begin with a Capital Letter?

Why Do ReactJS Component Names Require Capital Letters?

While experimenting with the ReactJS framework, it has been observed that component names starting with lowercase letters fail to render. To illustrate, the following code doesn't render:

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

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

However, changing "fml" to "Fml" resolves the issue. This begs the question: why can't component tags start with lowercase letters?

Answer:

In JSX, lowercase tag names are interpreted as HTML tags. For example, is compiled as React.createElement('component'). In contrast, uppercase tags are interpreted as React components, such as which compiles as React.createElement(Component).

There are exceptions, though. If a lowercase tag name is followed by a period (property accessor), it's not considered an HTML tag. For instance, compiles as React.createElement(obj.component).

The above is the detailed content of Why Must ReactJS Component Names Begin with a Capital Letter?. For more information, please follow other related articles on the PHP Chinese website!