Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 15, 2021 12:27 pm GMT

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 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.


Original Link: https://dev.to/itouoti12/naming-conventions-for-easy-identification-of-styledcomponent-and-reactcomponent-49fk

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To