Directory Structure of CRA:
- Entry point file
- CSS files
- Node modules
TSX is the file extension for TypeScript files containing JSX code.
./index.tsx:The entry point of the project. This is where I initialize the libraries I use, such as the theme provider (from styled-components), the store (Redux, Apollo, or your library of choice), the router (React Router) and I also include my
<App />component, obviously.
<Router />component. This is also where I implement my features (mostly containers, but we will learn about that later) that are used across the whole app, such as the modal system, the notification container, service workers, etc.
./router.tsx:Composed of a
<Switch />and the main components of my project. If I need sub-routes, they are handled by the containers using them.
If an asset is used only in a specific container, it belongs to a folder with the container’s name.
For instance, if my app uses a logo, it can probably be used anywhere in my project. For this reason, this one belongs to the root of the .assets folder. But a background image that is only used in the Auth container belongs to the .auth sub-folder.
This method also makes it easier to find assets that are not used anymore. It shouldn’t be a problem in the first place, but let’s be honest: We often forget to clean this folder.
How should you group your components?
A lot of different tastes here. React’s documentation suggests two solutions:
- Group files by feature or routes.
- Or group files by type (CSS, components, tests, etc.).