I would avoid default exports at all cost.
Delightful React file/directory structure
11–20 of 53 posts
Re: Delightful React file/directory structure
#12Earlier quoted context omitted.
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 Then import is easy, and feels less redundant import { mywidget, mycomplexwidget } from '@foo/components'
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…
> 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.
Re: Delightful React file/directory structure
#13Earlier quoted context omitted.
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…
> 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.
here's a screenshot from my VS Code right now: 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.
Re: Delightful React file/directory structure
#14When it comes to the index.js issue, I’m partial to “unwrapping” component directories. For example, if a Post component has a few one off sub-components, they’re placed in Post subdirectory:
src/
components/
Post.jsx
Post/
PostHeader.jsx
PostActions.jsx
import Post from “components/Post.js”
import PostActions from “components/Post/PostAction.js”
Re: Delightful React file/directory structure
#15I would avoid default exports at all cost.
All the tutorials which I have been following always default export it. Whats the reason to avoid default export ?
Re: Delightful React file/directory structure
#16I would avoid default exports at all cost.
If your whole file is semantically the default export, then why not?
There are advantages with default exports, e.g. you can name it at usage site the way you want without the `:` syntax. Also some things like `React.lazy` only works with default exports.
Re: Delightful React file/directory structure
#17> Finally, in terms of organization, I want things to be organized by function, not by feature.
In my experience, writing a game in mostly React, separating things by feature is more intuitive down the line. Mostly because after some time has passed, finding something is pretty easy and I don't get completely lost in code. And yes, this means having custom hooks in the same file as the actual component sometimes.
I also purposefully let convoluted import statements with lots of '../../../' just exist because my IDE (VS Code) takes care of it and if you really think about it, you never really spend too much time on them.
Then again, I've come to the realization that different things work for different folks. And different projects. If anything, I just encourage more people to try different structures until something 'clicks' with you.
Re: Delightful React file/directory structure
#18Kinda wish Josh would mention how he structures his tests in his projects. Something I'm currently struggling at work is that within our code repos, the pattern that everyone seems to copy is mimic the src/ directory for the test/ directory, rather than co-locating tests along with components. This means a structure for components: src/ components/ Button/ Button.tsx Is just copied ad-hoc for tests, so we get this: t…
I think people do the "separate directory for tests" thing because test runners have, in the past, shipped with a default configuration to target a test directory, rather than match test files by suffix. Colocation of test files is the hands down winner and encourages the writing of tests. When you're making a change to a code file, you probably won't think to scour the codebase for relevant tests. If you see the tes…
When you make a change to a code file, you should run your tests. Why else do you have them? A test failure should result in you going to fix that or, if appropriate, change assumptions of the test. I don't see how it is harder to add tests either.
Re: Delightful React file/directory structure
#19Kinda wish Josh would mention how he structures his tests in his projects. Something I'm currently struggling at work is that within our code repos, the pattern that everyone seems to copy is mimic the src/ directory for the test/ directory, rather than co-locating tests along with components. This means a structure for components: src/ components/ Button/ Button.tsx Is just copied ad-hoc for tests, so we get this: t…
If they're using something like create-react-app, it may force that structure on them. I remember in earlier versions it was harder to configure other folders to put tests in. I prefer your ideal structure as well, if you're going to co-locate files relating to Button, do it properly, makes it much easier to find things and in this case see if there are tests for your component.
Re: Delightful React file/directory structure
#20I prefer using fractal-style component structure, avoiding folders like `components` for single-use components. It looks like this:
src/
App/
screens/
Login/
component.tsx
index.tsx
model.tsx
styles.scss
Dashboard/
SomeDashboardPart/
component.tsx
index.tsx
SomeOtherDashboardPart/
component.tsx
index.tsx
helpers/
someHelper.tsx
component.tsx
index.tsx
model.tsx
components/
Button/
component.tsx
index.tsx