Naming conventions for easy identification of StyledComponent and ReactComponent
itouoti12
Posted on October 15, 2021
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.
💖 💪 🙅 🚩
itouoti12
Posted on October 15, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
discuss Naming conventions for easy identification of StyledComponent and ReactComponent
October 15, 2021