Rule proposal: warn on <lowerCaseFirstLetterInJSX /> when a binding with this name exists in scope

React currently treats JSX types starting with lowercase letter as Web Components. This is documented but beginners often miss that section. I think in 99% cases using a Web Component is not what people want, and it trips them bad.

I propose the following heuristic. If we see <lowerCaseFirstLetterInJSX />, this is not one of the known HTML tags, and a binding with the same name already exists in scope (e.g. as an import, class, function, etc), we are pretty certain the user meant to use their React component, and not a Web Component.

This would not warn:

function MyApp() {
  return <lol /> // no such binding in scope, assuming Web Component
}

function MyApp() {
  var i = 0;
  return <i /> // binding exists but `i` is a known HTML tag
}

This would warn:

import { lol } from 'react-bootstrap'

function MyApp() {
  return <lol /> // likely not what you meant
}

var lol = React.createClass(...)

function MyApp() {
  return <lol /> // likely not what you meant
}

I think flagging any binding is fair game because even if you do intend to use Web Components, having a variable named the same way in the same file is super confusing and just asking for misinterpretation.

---

I originally filed this as https://github.com/facebookincubator/create-react-app/issues/299, and @alexzherdev would be interested in implementing it.

[yannickcr]

It would requires us to keep an up to date whitelist but I think it should not be too hard to maintain such list.

Maybe we could do a generic rule about component naming? (and replace jsx-pascal-case which is very specific).

[ljharb]

I’m not sure if this is still relevant.

Unfortunately, we don’t currently have a rule that warns on <foo /> for a foo value that isn’t a valid HTML element - such a rule would be useful, but since React usually warns on it and it’s an obvious mistake, it hasn’t been that necessary.

I think such a rule, with an explicit allow list for the web components that users have knowingly globally registered, would be reasonable. It would be most ideal if the list of valid HTML tag names was shared by us and React core - ideally through a common package.

@gaearon if you think this rule would still be valuable, would it be possible to make such a list available?

@alexzherdev are you still willing to implement this rule, assuming the previous question is a yes?