Clarify ReactDOM's case warning for html tags

[wherestheguac]

References git issue: #12527

Changed the html tag casing warning to be more explicit.

[nickserv]

Thanks for jumping on this! My idea for a warning was a bit more verbose:

Warning: looks like an HTML or web component element because it starts with a lowercase letter, but it has uppercase letters instead of dashes. Use PascalCase for React components, or lowercase letters and dashes for HTML.

I think we might want to adjust your warning to add a note specifically about custom components since it could get confusing (even though it's an unusual use case), but I like how straightforward your wording is.

[wherestheguac]

Hey @nickmccurdy. I liked your original suggestion, I only changed the first part of it to make sense for cases such as <IMG>. I’ve mentioned custom elements in the warning 😄

[gaearon]

Hey @nicolevy! Thanks for the PR.

I would prefer if we omitted custom elements here since most people don't use them with React, and so this might confuse a person who's already a bit confused even further. We don't have to mention the dashes—people using custom elements probably know this anyway (and if they don't, they'd need to learn about custom elements elsewhere as this is not a React-specific tip).

Let's change the last part to:

Use PascalCase for React components, or lowercase letters for HTML elements.

[wherestheguac]

@gaearon sure thing, updated now!

[nickserv]

Thanks I like that improvement.

Minor nitpick: How about removing letters so it's Use PascalCase for React components, or lowercase for HTML elements.?

[gaearon]

I like that. @nicolevy mind updating one last time?

[wherestheguac]

@nickmccurdy I think that change makes sense for the flow of the sentence, just pushed that.

@gaearon just saw your comment, done!

[nickserv]

💯

[gaearon]

Thanks @nicolevy!