Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Delightful React file/directory structure

joshwcomeau.com

Post reply on HN
Print view View original

21–30 of 53 posts

Re: Delightful React file/directory structure

#22

Post by toastercat »

throwaway284534 wrote: post #14

When 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 Then import as: import Post from “components/Post.js” And within the component: import PostActions from “components/Post/PostAction.js” I’ve felt this approach elimi…

I used to do this as a newb before I learned about how index.js works. In hindsight, it makes a lot of sense (especially when you consider browser parity), and I find it amusing how common the use of index.js is in React codebases, when Ryan Dahl named index.js one of his greatest mistakes when creating Node.

Re: Delightful React file/directory structure

#24

Post by notapenny »

Keep it as flat as possible until you really, really need to structure it.

A folder for components and a maybe separate one for pages or containers is probably all you need (and even those you could probably stick in components until some structure arises). Have seen quite a lot of code-bases that suffered from people trying to structure their folders around a certain model too early on, change their mind, change it again, result: a mess.

Re: Delightful React file/directory structure

#25

Post by kakuri »

zheksoon wrote: post #20

I 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 `model.tsx`…

I have a bit of a preference for this approach as well, but having worked on numerous large projects I have to agree with Josh's arguments against it. Maybe on a small personal project it can succeed but on large ongoing projects I favor organizing by function rather than feature.

Re: Delightful React file/directory structure

#26

Post by azemetre »

zelphirkalt wrote: post #18
d357r0y3r wrote: post #8

Earlier quoted context omitted.

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.

It's not that it's impossible to test, it's just more of "out of sight, out of mind." Couple this with a poor engineering culture in general, it's easier for me to understand how this pattern encourages very poor testing.

Re: Delightful React file/directory structure

#27

Post by azemetre »

notapenny wrote: post #19
azemetre wrote: post #6

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

hmm. I honestly never used CRA outside of an interview assessment and don't really remember much. Early on in my web career I was encouraged to create my own scaffolding tools, that practice just always stuck with me.

Kinda curious to learn how they enforced directory structures. I know now they co-locate tests, but IIRC CRA always used jest and with jest you just set the globs you want to use in the config file. Hardly hardcoded or strictly enforced, but I could be wrong.

Re: Delightful React file/directory structure

#28

Post by neurotrace »

> Finally, in terms of organization, I want things to be organized by function, not by feature.

I found this super surprising. I much prefer doing things by feature than by function. Where it goes is a function of which page/view/route it's on. If it's a general purpose component that is used on multiple pages (like `Button`) then, sure, it goes in `src/components`. Otherwise, it goes in `src/routes/app-section/components`. Truth be told, I've taken to doing a setup like this:

    src/
    - routes/
      - app-section/
        - effects/
          - some-action.effect.ts
        - ui/
          - app-section.component.tsx
          - index.ts
          - some-component.component.tsx
        - app-section.route.ts
        - app-section.types.ts
        - index.ts
`effects` basically holds your business logic, `ui` contains section specific components and exports the top-level component via `ui/index.ts`, `thing.route` hooks up the route to state management, `index.ts` provides a bundle for hooking up the effects to your effect system and the route component itself. The `name.type.extension` naming scheme clears up the tab name confusion problem. Maybe I should write my own article about this ;)

Re: Delightful React file/directory structure

#29

Post by striking »

azemetre wrote: post #6

Kinda 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…

Workplace puts tests in a __tests__ folder next to the thing under test (e.g. `Button/Button.tsx` is tested by `Button/__tests__/Button.test.tsx`).

Re: Delightful React file/directory structure

#30

Post by notapenny »

azemetre wrote: post #27
notapenny wrote: post #19

Earlier quoted context omitted.

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.

hmm. I honestly never used CRA outside of an interview assessment and don't really remember much. Early on in my web career I was encouraged to create my own scaffolding tools, that practice just always stuck with me. Kinda curious to learn how they enforced directory structures. I know now they co-locate tests, but IIRC CRA always used jest and with jest you just set the globs you want to use in the config file. Har…

Could also be that I'm remembering it wrong, but I recall having some issues with CRA and structuring tests at some point. In any case, CRA sets up a separate src and test folder, so I guess a lot of people just think they should structure their tests that way.
Post reply on HN