4 ms·

I do something similar, except I directly use index.tsx as the widget in a directory structure, like this: components Button.tsx Menu i

I do something similar, except I directly use index.tsx as the widget in a directory structure, like this: components Button.tsx Menu index.tsx <-- menu component Link.tsx <-- "Link" component only used within Menu That way if I want to break out the Button component into multiple sub-components, I don't need to change the imports, but I also don't need to add a re-exporting index.ts in every single folder (it gets annoying once you're up to dozens of folders). Also, for funsies I have both a components directory for reusable components and a separate "app" directory for the core containers that make up the first-class functionality. index.tsx in that folder is what would normally be the App.tsx, so the JSX nesting structure of the app is mirrored in the directory structure: app index.tsx <-- entrypoint Login.tsx Register.tsx routes index.tsx <-- core router Home.tsx etc... This also makes SSR easy because then in the root 'src' directory that contains all this I can have a server.tsx with ReactDOM.render and a client.tsx with ReactDOM.hydrate, and each can use their respective isomorphic context providers. Also I don't know if this is standard nowadays but aliasing "src" to the source root and adding it as a baseDir in tsconfig.json means you can use absolute imports.

dsmmcken 5y ago
I think his criticism of that approach is that you end up with a bunch of index.tsx tabs open in your IDE and it can be hard to tell what is what. My approach is similar to his, but is simplified to have one index at the top of the components folder for all the components: components index.tsx <- wrapper exports all components mywidget.tsx myotherwidget.tsx mycomplexwidget mycomplexwidget.tsx subpart.tsx Then import is easy, and feels less redundant import { mywidget, mycomplexwidget } from '@foo/components'
- beaconstudios 5y ago
  That issue with too many index.ts files used to be a major issue but nowadays I use VS Code which disambiguates matching filenames with their parent directory. I think I just don't really like using re-exporting index files if I can avoid them, because I don't see much of a positive cost/benefit in most cases. In your example I'd be doing something like this instead: import { mywidget } from '@foo/components/mywidget'; import { mycomplexwidget } from '@foo/components/mycomplexwidget'; I could fish for pseudo-objective arguments for this but honestly I think it's mostly just personal preference!
  - deanc 5y ago
    > That issue with too many index.ts files used to be a major issue but nowadays I use VS Code which disambiguates matching filenames with their parent directory. Any source on that. I'm in vscode right now with several index.tsx files open and no disambiguation in the tabs.
    - beaconstudios 5y ago
      here's a screenshot from my VS Code right now: https://imgur.com/a/kTbBjJP https://imgur.com/a/kTbBjJP it's controlled by the "workbench.editor.labelFormat" setting, but the default will disambiguate when two files share a name.

dsmmcken 5y ago

I think his criticism of that approach is that you end up with a bunch of index.tsx tabs open in your IDE and it can be hard to tell what is what. My approach is similar to his, but is simplified to have one index at the top of the components folder for all the components: components index.tsx <- wrapper exports all components mywidget.tsx myotherwidget.tsx mycomplexwidget mycomplexwidget.tsx subpart.tsx Then import is easy, and feels less redundant import { mywidget, mycomplexwidget } from '@foo/components'

beaconstudios 5y ago
That issue with too many index.ts files used to be a major issue but nowadays I use VS Code which disambiguates matching filenames with their parent directory. I think I just don't really like using re-exporting index files if I can avoid them, because I don't see much of a positive cost/benefit in most cases. In your example I'd be doing something like this instead: import { mywidget } from '@foo/components/mywidget'; import { mycomplexwidget } from '@foo/components/mycomplexwidget'; I could fish for pseudo-objective arguments for this but honestly I think it's mostly just personal preference!
- deanc 5y ago
  > That issue with too many index.ts files used to be a major issue but nowadays I use VS Code which disambiguates matching filenames with their parent directory. Any source on that. I'm in vscode right now with several index.tsx files open and no disambiguation in the tabs.
  - beaconstudios 5y ago
    here's a screenshot from my VS Code right now: https://imgur.com/a/kTbBjJP https://imgur.com/a/kTbBjJP it's controlled by the "workbench.editor.labelFormat" setting, but the default will disambiguate when two files share a name.