It is a good practice to use one component per file. There is rarely a need to introduce a variable to a module. The developers should declare modules without variable declaration.
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.
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.
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.
Whenever a build system is available to concatenate files, each component should be in its own file. This helps you to more quickly find a component when you need to edit it or review how to use it.
It is always recommended to group all imports of a single path or source in a single import declaration. These usually happen in a codebase when multiple developers are working on the same codebase. It helps improving code refactoring and code readability as well.
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.,
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.