Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Folder Structure Ideas

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.
@alexilyaev

This comment has been minimized.

Copy link
Owner Author

@alexilyaev alexilyaev commented Nov 26, 2020

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

file-search-in-vs-code

2. Opening several components with the file name index:

image

3. Searching for some text in all files:

image

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

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment