React Folder Structure Ideas
components/ NavBar/ BrandLogo.jsx NavBar.jsx NavBar.text.jsx NavBarMenu.jsx shared/ Alert/ Alert.jsx Alert.test.jsx Button/ Button.jsx Button.test.jsx
Capitalize files that export React components
- Common in several guidelines and boilerplates (e.g. Create-React-App).
- In React, components are named in PascalCase.
- Copying a component name and searching a file name translates better.
See screenshot below in the first comment.
- Searching for files in the IDE is ineffecient because the IDE puts a higher priority to file names compared to file paths.
- Opening several components in the IDE results in a bunch of long tabs that needlessly say
- Searching for some text in all files in the IDE results in a bunch of
- Using "Find All References" results in a bunch of
indexfiles with their file-path cut off.
indexfiles import, so in the future this pattern will be obsolete.
- Importing the component has a double name
import NavBar from 'components/NavBar/NavBar'.
- In practice it's not an issue besides cosmetically, especially when using auto-import's in IDE's.
- When viewing the folder, if there's a lot of files, it takes a second to find the root file of that folder.
- Since the file name is always the same as the folder name, it's an easy habit to get used to.