Naming conventions for easy identification of StyledComponent and ReactComponent

Do you have a good idea for a naming convention that makes it easy to distinguish between StyledComponent and ReactComponent?

I’m using StyledComponent in my current job.
In the source code, StyledComponent and ReactComponent have the same n…


This content originally appeared on DEV Community and was authored by itouoti12

Do you have a good idea for a naming convention that makes it easy to distinguish between StyledComponent and ReactComponent?

I'm using StyledComponent in my current job.
In the source code, StyledComponent and ReactComponent have the same naming conventions, making it difficult to determine which type of component it is at a glance.

As my refactoring, I changed the naming as follows.

Example

before

return (
  <ScheduleContainer>
    <Header>
      <Date>
        Hello!
      </Date>
      <TypeSelectorContainer>
        <TypeSelector />
      </TypeSelectorContainer>
    </Header>
  </ScheduleContainer>
);

after

return (
  <Div_ScheduleContainer>
    <Header>   // <-React component
      <H2_Date>
        Hello!
      </H2_Date>
      <Div_TypeSelectorContainer>
        <TypeSelector />  // <-React component
      </Div_TypeSelectorContainer>
    </Header>  // <-React component
  </Div_ScheduleContainer>
);

However, this refactoring violates react/jsx-pascal-case in ESLint.

Do you have any better ideas than this?

Thanks for reading.


This content originally appeared on DEV Community and was authored by itouoti12


Print Share Comment Cite Upload Translate Updates
APA

itouoti12 | Sciencx (2021-10-15T12:27:40+00:00) Naming conventions for easy identification of StyledComponent and ReactComponent. Retrieved from https://www.scien.cx/2021/10/15/naming-conventions-for-easy-identification-of-styledcomponent-and-reactcomponent/

MLA
" » Naming conventions for easy identification of StyledComponent and ReactComponent." itouoti12 | Sciencx - Friday October 15, 2021, https://www.scien.cx/2021/10/15/naming-conventions-for-easy-identification-of-styledcomponent-and-reactcomponent/
HARVARD
itouoti12 | Sciencx Friday October 15, 2021 » Naming conventions for easy identification of StyledComponent and ReactComponent., viewed ,<https://www.scien.cx/2021/10/15/naming-conventions-for-easy-identification-of-styledcomponent-and-reactcomponent/>
VANCOUVER
itouoti12 | Sciencx - » Naming conventions for easy identification of StyledComponent and ReactComponent. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/15/naming-conventions-for-easy-identification-of-styledcomponent-and-reactcomponent/
CHICAGO
" » Naming conventions for easy identification of StyledComponent and ReactComponent." itouoti12 | Sciencx - Accessed . https://www.scien.cx/2021/10/15/naming-conventions-for-easy-identification-of-styledcomponent-and-reactcomponent/
IEEE
" » Naming conventions for easy identification of StyledComponent and ReactComponent." itouoti12 | Sciencx [Online]. Available: https://www.scien.cx/2021/10/15/naming-conventions-for-easy-identification-of-styledcomponent-and-reactcomponent/. [Accessed: ]
rf:citation
» Naming conventions for easy identification of StyledComponent and ReactComponent | itouoti12 | Sciencx | https://www.scien.cx/2021/10/15/naming-conventions-for-easy-identification-of-styledcomponent-and-reactcomponent/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts