react: Warn if the rendered DOM node is HTMLUnknownElement

I’ve just been bit by

React’s JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.

and as an after-thought I remembered something about lower-case/upper-case jsx tags. As a good React citizen, I’ve searched for it on the React site and found it documented here: https://facebook.github.io/react/docs/jsx-in-depth.html

I’m not new to React, but this took me around 10 minutes to trace down. I generally follow the convention, but I just developed a simple centered component for a mostly static site, that simply clones it’s children and adds margin: 0 auto; max-width: 900 to each of them. So I thought of this as a simple utility and therefore I lower-cased it.

I understand this might not change, but it’s worth at least adding a warning on uncommon html tag names, or better yet, on lowercase jsx tags that are also local variables.

About this issue

  • Original URL
  • State: closed
  • Created 9 years ago
  • Comments: 15 (8 by maintainers)

Commits related to this issue

Most upvoted comments

@kevinSuttle I would guess it would be, there’s an issue open for jsdom regarding web components: https://github.com/tmpvar/jsdom/issues/1030