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
- Fix #3596: Add warning for components not following proper case convention — committed to eblin/react by eblin 8 years ago
- Fix #3596: Moved warning into devtool as per @jimfb suggestion. Added stack trace and reference to element which causes the warning. — committed to eblin/react by eblin 8 years ago
- Fix #3596: Refactoring warning message + renamed devtool: ReactDOMComponentCaseDevtool -> ReactDOMUnknownComponentDevtool — committed to eblin/react by eblin 8 years ago
@kevinSuttle I would guess it would be, there’s an issue open for jsdom regarding web components: https://github.com/tmpvar/jsdom/issues/1030