‹ start


I never plan the directory structure of a React project ahead of time. I used to try and plan a structure, on a piece of paper, with little squares representing components nested inside each other. And more squares on the periphery with lines and labeled arrows wrapping them all together. The filenames had strong linguistic relationships to each other, they embodied real-world metaphors, they all lived in the same semantic universe.

My strategy now is to structure ad hoc and on the fly.

With a new React project I write everything in App.js. Only when it starts to feel too long and unwieldy will I extract something out into another file. Whatever feels most natural at that point. You'll want to pick something that's loosely coupled, easy to conceptualise in isolation and big enough that extracting it means App.js no longer feels unwieldy. Keep writing and repeat. Write, extract.

You end up with a structure that's not quite as poetic but is far easier to work with, extend and return to.

I can't remember if it was Douglas Crockford or Bret Victor who talked about files being the wrong level of abstraction for code. How the fundamental units of code are Expression, Function, Class, etc. A file is a representation of the underlying hardware, an implementation detail, and one that's late in being abstracted away.