How are you adding the slight bounce animation on your file explorer? its pretty neat.
The file exporer's source code is at the bottom of the page. It looks like it's animated using framer-motion.
Delightful React file/directory structure
41–50 of 53 posts
Re: Delightful React file/directory structure
#42Kinda 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 agree! I'd do `Button.test.tsx` right inside the component directory. Managing a mirrored structure feels like a lot of wasted effort. Same for Storybook stories (`Button.story.tsx`).
That said, I'm not 100% sold on the value of testing React components, outside of some very specific cases (eg. a very complex component with lots of internal state). I prefer to write integration / e2e tests that check views/pages/flows as a whole. And so for those, since they aren't connected to specific components, I do have a separate `/tests` folder.
Re: Delightful React file/directory structure
#43I 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`…
Ah yes, so if I have three component.tsx files open in different tabs its impossible to tell which one is which
Re: Delightful React file/directory structure
#44Kinda 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…
Co-location does not matter much if you are used to JetBrains IDE shortcuts to navigate the project ex: CTR + E : Recent files and etc.
Checkout talk about Mouseless Driven Development by Hadi Hariri[1]
Re: Delightful React file/directory structure
#45When 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.
It is a mistake. Index.js re-exports cannot be tree-shaken by bundlers unless the module is explicitly declared free of side effects.
If you import { foo } you actually import everything. Check your bundle.
Re: Delightful React file/directory structure
#46Keep 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…
I agree. I'll make a new folder when I see a pattern and I don't hesitate to move things around if I realize something's not working. I find a similar folder structure develops across my apps over time but it really depends on which libraries and the app. Usually a separate folder for high level screens. A components folder. Models and services get their own folder. State management too sometimes depending on complexity. Then the app itself might have some clearly defined sections or features that get foldered up.
I heavily use the quick file open feature in vscode so file location ultimately doesn't matter. Too often people groom this kind of stuff instead of getting work done.
Re: Delightful React file/directory structure
#47Kinda 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…
Co-location does not matter much if you are used to JetBrains IDE shortcuts to navigate the project ex: CTR + E : Recent files and etc. Checkout talk about Mouseless Driven Development by Hadi Hariri[1] [1] https://www.youtube.com/watch?v=UH6YVv9js3s
Never seen this talk, will definitely watch it later today.
One thing I am reluctant about is having a project dictated by your IDE/editor. I think this is an antipattern. Not everyone uses JetBrains products, I myself use vim. It just makes me sad that some people prefer to have their linting, testing, and other automated checks handled by their IDE rather than using proper git hooks or scripting in general.
I'm mostly a web developer so maybe other types of projects this makes sense.
Will check out the video, always happy to be exposed to new ways of doing things!
Re: Delightful React file/directory structure
#48Can we please stop describing technical things using feelings-based words? It's foppish, it makes tech sound really really disingenuous and fake, and it cheapens the words as well. "Clean," "well-organized," "atomic" ... all adjectives, all descriptive, zero emotion
"Clean" is used in this blog post. I think it is kind of weird to ask folks not to use feelings-based words when the point here is that they are describing their opinions. When Josh writes > Well, there is no one “right” way, but I've tried lots of different approaches in the 7+ years I've been using React, and I've iterated my way to a solution I'm really happy with. how would you prefer he have phrased it? The iter…
Then can we at least stick to words with precision, and not the thesaurus drivel popularized by marketing people?
The other thing is that while "delightful" might be as such to him, I have personally found that my opinions simply do not align with people who speak like this. Using that sort of vocabulary is likely to get you written off as a moron among some folks
Technical writing should be simple and plain.
And yes I am judging entirely by the title.
Re: Delightful React file/directory structure
#49Can we please stop describing technical things using feelings-based words? It's foppish, it makes tech sound really really disingenuous and fake, and it cheapens the words as well. "Clean," "well-organized," "atomic" ... all adjectives, all descriptive, zero emotion
Whenever I see the word 'beautiful', I often find that thing is not beautiful. But it gets used, a _lot_. The only explanation I can come up with, is they are simply assuming that you are incapable of forming your own thoughts, and need to be told what to feel.
Copywriters have destroyed the meaning of "beautiful"
Re: Delightful React file/directory structure
#50Kinda 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`).
Yes, I've seen this as well. I will admit I do using a __tests__ or __mocks__ folder to "separate" helper files for testing; but I think now I prefer core tests to be in the component directory entirely.