React Folder Structure Ideas

react-folder-structure-ideas.md

React Folder Structure Ideas

Suggested structure

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

1. Common in several guidelines and boilerplates (e.g. Create-React-App).
2. In React, components are named in PascalCase.
3. Copying a component name and searching a file name translates better.

No index files

See screenshot below in the first comment.

1. Searching for files in the IDE is ineffecient because the IDE puts a higher priority to file names compared to file paths.
2. Opening several components in the IDE results in a bunch of long tabs that needlessly say index.
3. Searching for some text in all files in the IDE results in a bunch of index file matches.
4. Using "Find All References" results in a bunch of index files with their file-path cut off.
5. JavaScript ES Modules don't support implicit index files import, so in the future this pattern will be obsolete.

Downsides

• 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.

1. Searching for a component name when the file name is index:

2. Opening several components with the file name index:

3. Searching for some text in all files:

4. Running "Find All References" on a component: