Member-only story
Nine months ago, I published an article titled “Optimal file structure for React applications,” which has since become my most widely read article ever written. I published it with the promise that it would be a living document, updating as best practices are discovered, described, and justified. Today, I have updated it to reflect what has worked best for the AWS CloudWatch Logs team in shipping the new design of the console.
This article will discuss the changes to the optimal file structure for React applications. You can read the remaining best practices as well as these changes in the original article.
Flattened asset directories 🥿
Originally, assets, such as images and SASS mixins, were put into an assets directory, e.g. assets/images/image-name.png. It offered no benefits to have an assets top-level directory and only served to cause confusion when attempting to categorize non-asset files, such as Redux reducers. For extensibility purposes, this directory has been flattened to just images, scss, reducers, or whatever category you need. Your directory structure is now simply src/CATEGORY/module-name.
Directory barrels 🎁
Directories that contain JavaScript imports are given “barrels,” or index.js files…
