0

I am at loss how to name my components so that it would look good on the page and not have super long names. For example, I have an app where I have a UsersSidebar component and inside there are User components. But I also have a UserList and inside there is also User components but different components. And then I may have another different User component on the page. So they are 3 different User components but they are all called User. How could I solve this problem?

Should I call it users-sidebar-user and user-list-user because that looks very long and clunky. What if I have 2 different user-sidebar components? Should I call it general-user-sidebar and forum-user-sidebar and then forum-user-sidebar-user?

// Here the <user> is a sidebar item <li>username</li>
<users-sidebar>
    <user>
    <user>
    <user>
</users-sidebar>

// Here the <user> is a different component <div><h1>username</h1></div
<user-list>
    <user>
    <user>
    <user>
</user-list>


// And here <user> is <div class="card">username</user>
<user>
Liga
  • 3,291
  • 5
  • 34
  • 59
  • 1
    I can't see any possible component names here... ["In JSX, lower-case tag names are considered to be HTML tags. However, lower-case tag names with a dot (property accessor) aren't."](https://stackoverflow.com/a/30373505/14357) – spender Feb 21 '19 at 10:53
  • If `UserSidebar` is local to *users* feature and cannot be confused with other sidebars in the app, it can be named `Sidebar`. And so on. You can always do `Sidebar as UserSidebar` on import if there's ambiguity. – Estus Flask Feb 21 '19 at 10:56

2 Answers2

0

You can try refactor your directory i.e. create a folder named user then create different components in it and bootstrap them in /User/Index.js. This way you will be able to skip 'user-' in files.

Hope it helps.

Kunal Virk
  • 132
  • 5
0

Airbnb has a React Styling guide that could be helpful to you:

Airbnb React Styleguide

Good luck with your naming! :)

Diego
  • 192
  • 1
  • 12