React Classes starting with a Lowercase don't call any methods inside the class.

[giantelk]

If a React Class name starts with a lowercase letter then no methods inside the class get called, i.e. nothing Renders, and you don't get any error message in the Browser console. You will see the element in the DOM, but just empty contents, in this case myHeader. If you rename the Class to MyHeader, and change it here too, then it works: React.render(<MyHeader />, document.body).

See the simple example below, you get nothing in the browser console or web page, until change myHeader to MyHeader.

btw - this drove me nuts for about 30mins until I ran out of things to try and thought, there's no way it could be a lower VS upper-case issue.

var myHeader = React.createClass({
    componentWillMount: function() {
        console.log("myHeader(), componentWillmount()");
    },
    componentDidMount: function() {
        console.log("myHeader(), componentDidMount()");
    },
    render: function() {
        console.log("myHeader(), render()");
        return (
            <div>
                Test
            </div>
        );
    }
});

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

[kmeht]

I believe JSX has a convention in which lowercase tags are considered to be primitives, and so it's transformed into React.createElement('myHeader', ...). If a React element's type is a string, I think it's rendered into the DOM as given. IIRC, this was to support things like SVG and other potential additions to HTML without having to maintain a whitelist of tags.

With uppercase JSX tags, it's transformed into React.createElement(MyHeader, ...) and this refers to the component.

[jimfb]

@kmeht Yes, you're correct. It has always been a convention that classnames start with an uppercase, and it's one that JSX enforces. Otherwise, there would be namespace collisions and no way for us to determine if the user intended to insert a component or a DOM node.

It's documented here: https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components

And the design justification is discussed here: https://gist.github.com/sebmarkbage/f1f4ba40816e7d7848ad

[giantelk]

Thanks, I checked the docs here, so missed the more detailed info you provided:
https://facebook.github.io/react/docs/top-level-api.html#react.createclass

[sophiebits]

@giantelk Want to send a PR to make the docs clearer?

[giantelk]

Hi @spicyj,

Here's a PR for the docs:
#4704

Why not throw a warning msg in the browser console if declare a React Component starting with a lower-case character?

[zpao]

We did warn in a previous version but we only kept it for one version. We no longer support our transform tools so we won't be adding any more warnings about this.

[giantelk]

That sucks. No error, no warning. Whoever is supporting the transform tools
should be aware. Even plain old JavaScript barks at the moon if a variable
is not of the expected case.

On Tue, Aug 25, 2015 at 12:53 AM, Paul O’Shannessy <notifications@github.com

wrote:

We did warn in a previous version but we only kept it for one version. We
no longer support our transform tools so we won't be adding any more
warnings about this.

—
Reply to this email directly or view it on GitHub
#4695 (comment).

Cheers,
Flying Horse Dancing

[sophiebits]

We can probably warn if you have a lowercase displayName…

[jimbolla]

@spicyj Warn on lowercase displayName sounds like it would throw a false positive if displayName is being set automatically from the filename and the filename is something like "./UserDashboard/index.jsx" and being included with import UserDashboard from './UserDashboard'.

[sophiebits]

@jimbolla That's true. We recommend doing

var UserDashboard = ...;

module.exports = UserDashboard;

though.

[jimbolla]

Eh. I don't like that. It's just adding redundancy and an extra line of code to every file. The ideal situation would be to have the ability to customize how displayName gets generated because the value that would actually be useful for display name is the full relative path of the source file, equivalent to something like displayName: "AppCenter/Admin/UserDashboard/index.jsx" because that tells me more information about where I need to go in my source, but now this is off topic. :/

[gaearon]

I’m closing this as it doesn’t appear like we’d have a good way of warning for functional components or classes anyway, and supporting this only for createClass seems inconsistent and not very useful.

We can’t warn on the declaration site because the components are defined by the user, and we can’t warn in createElement because if the person used the lowercase tag, it’s too late anyway, and they will get a custom element.

This can probably be implemented as a lint rule in https://github.com/yannickcr/eslint-plugin-react so please feel free to suggest this idea there.