DEV Community

Discussion on: 10 Tips for Structuring a React Native Project

View post
Collapse
 
sushmeet profile image
sushmeet sunger •

On Step 9. Would you perhaps consider having a folder called Component 1 under components which would contain. I am not sure if it adds anything or if having a flatter structure like the way you presented is fine.
Component1.tsx
Component1.styles.ts

Collapse
 
kadikraman profile image
Kadi Kraman • • Edited

That's a really valid point! I have actually done this in the past, but keeping the components flat is intentional. Basically you have 4 options:

1) Name the root file index.tsx:

/components
  /Component1
    index.tsx
    index.styles.ts
    index.test.ts
Enter fullscreen mode Exit fullscreen mode

This will enable you to still import it like

import Component1 from "src/component/Component1";
Enter fullscreen mode Exit fullscreen mode

This was my preferred method in the past. The downside of this is is that every component is named index.tsx which is very unpleasant to work with in VSCode in particular. Have you ever tried to search a component by file name in a codebase where everything is called index? Even though the path includes the name, VSCode search isn't really built to handle it well. Also, every tab is called index.tsx which makes it hard to tell at a glance which files you have open.

2) Keep the component name, but add an index.ts for exporting it

/components
  /Component1
    Component1.tsx
    Component1.styles.ts
    Component1.test.ts
    index.ts
Enter fullscreen mode Exit fullscreen mode

Here, index.ts just imports Component1 and default exports it. The downside is that you have to remember the convention and you have a lot of extra files just for exporting components.

3) Keep the component named

/components
  /Component1
    Component1.tsx
    Component1.styles.ts
    Component1.test.ts
Enter fullscreen mode Exit fullscreen mode

This isn't too bad, and I do that occasionally, but the downside here is that the import will look like this, with the component name listed twice in the path:

import Component1 from "src/component/Component1/Component1";
Enter fullscreen mode Exit fullscreen mode

4) Keep the folder structure flat as I suggested. The obvious downside is that the list of components will get long twice as fast (or 3x if as fast if you write tests!).

So they all have pros and cons. I used to do option 1 before I started using VSCode which really doesn't work well with index.js files. Now I do option 4 and occasionally option 3 is I need to add more files to a single component.

Collapse
 
sushmeet profile image
sushmeet sunger •

Thanks very much. This is an extremely detailed explanation. Option 1 definitely the points you highlighted I have found to be painful. The opening of multiple tabs with index.js was an extreme pain point for my eyes. Option 2 again, I remember when seeing the pattern for the first time I found it quite tedious and just the mental mindset of doing this every time you add new components wasn't pleasing. Yup after reading all this I do see the value and the simplicity Option 4 will bring to the workflow. Having read this I actually think it almost makes for a very nice blog post in itself. Thanks