Why Do ReactJS Component Names Need to Start with a Capital Letter?

Component Naming Conventions in ReactJS: Why Do Names Start with Capitals?

When working with ReactJS, you may have noticed an unusual behavior: component names must start with capital letters, otherwise the component will fail to render. Take the following example:

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

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

This component will not render because 'fml' starts with a lowercase letter. However, if you change it to 'Fml', it will work as expected.

The reason for this convention lies in JSX (JavaScript XML), which is the syntax used to create React components. In JSX, lowercase tag names are interpreted as HTML tags, not React components. To differentiate between them, React requires component names to start with capital letters.

Understanding the createElement API Caveats

The createElement API, which is used to create React elements, has specific caveats regarding tag names:

• will compile to React.createElement('component'), which is an HTML tag.
• will compile to React.createElement(Component), which is a React component.
• will compile to React.createElement(obj.component), which is a component accessed through an object.

By using capital letters for component names, you ensure that JSX interprets them correctly as React components and not HTML tags. This convention helps prevent errors and maintain consistency in your React codebase.

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