Additionally, every screen in the app can use Avatar.js and Icon.js. Note Admin/shared Reports and Users can both access the shared Here is our growing app with some new shared, and not Share any components with each other or the parent, we put the sharedĬode in "shared". So what about when you've got some shared componentsĮvery screen also has a "shared" generic directory. These components are used only in the current screen, not even theĬhild screens. In other words, we've introduced "scope" into our applicationĮach will probably have a components directory. With this structure, each screen has its own directory to hold its Some top-level application bootstrapping stuff at the root, like That handles the entry into the screen, also known as a "Route Handler" Next, each of these screens has an index.js file, which is the file We would now set up our directories like this: app Only have one "feature" folder but many "generic" folders. If weĬonsider all folders being either a "generic" or a "feature" folder, we It's inverted from the model that we've used in other systems.
The file structure maps directly to the route hierarchy, which maps
It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app. While this gist has been shared and followed for years, I regret not giving more background.