PascalCasefor user-defined JSX components JS-0426
It is recommended to use PascalCase for user-defined React JSX components since it uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.
Components without children can be self-closed to avoid the unnecessary extra closing tag. In JSX, closing tags are required when the component has children example
<MyComponent>...</MyComponent> and if there are no child component between these tags, then this component can be self closed using
<MyComponent />. It is recommended as it improves readability, and it is more compact to use self-closing for these types of components.
ES2015 allows for the renaming of references in import and export statements as well as destructuring assignments. This gives programmers a concise syntax for performing these operations while renaming these references.
The issue is raised when the analyzer encounters a string literal inside a react component. We recommend wrapping the string literals in a JSX Container, e.g.,
When using a module, avoid using a variable and instead use chaining with the getter syntax. It produces readable code and avoids variable collisions or leaks.