‹ view all

I don't plan the structure of a React project in advance. I used to try and design a file 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.

I write everything in one file and when it starts to feel too long and unwieldy, I extract something out into another file. Whatever feels most natural at that point, you'll want to pick something that's loosely coupled and easy to conceptualise in isolation. 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. Easier to delete, too, which I think is a property of good code.

I can't remember if it was Doug Crockford or Bret Victor who talked about files being the wrong level of abstraction for code. How the fundamental units 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.