I would like to ask for your opinion on the file structure and file names.

I am a beginning React programmer and I am interested in the opinion of experienced developers.

Is there anything you don't really like about the structure and the names themselves?

└── src
    ├── components
    │   ├── layout
    │   │   └── ThemeSwitcher.tsx
    │   ├── movieDetail
    │   │   ├── BackToHomepage.tsx
    │   │   ├── FavoriteMovieButton.tsx
    │   │   ├── MovieLoader.tsx
    │   │   └── MovieTable.tsx
    │   └── movieList
    │   │   ├── MoviesList.tsx
    │   │   ├── PaginationBar.tsx
    │   │   └── SearchBar.tsx
    ├── img
    │   ├── favorite-active.png
    │   └── favorite-inactive.png
    ├── layout
    │   ├── Header.tsx
    │   └── Main.tsx
    ├── pages
    │   ├── Detail.tsx
    │   ├── Favorites.tsx
    │   └── Homepage.tsx
    ├── redux
    │   ├── movieDetail
    │   │   ├── movieDetailSaga.tsx
    │   │   ├── movieDetailSlice.tsx
    │   │   └── movieDetailTypes.tsx
    │   └── movieList
    │   │   ├── moviesListSaga.tsx
    │   │   ├── moviesListSlice.tsx
    │   │   └── moviesListTypes.tsx
    │   ├── rootSaga.tsx
    │   └── store.tsx
    ├── styles
    │   ├── abstracts
    │   │   ├── mixin.scss
    │   │   └── variables.scss
    │   ├── base
    │   │   ├── reset.scss
    │   │   └── typography.scss
    │   ├── components
    │   │   ├── layout
    │   │   │   └── ThemeSwitcher.scss
    │   │   ├── movieDetail
    │   │   │   ├── BackToHomepage.scss
    │   │   │   ├── FavoriteMovieButton.scss
    │   │   │   ├── MovieLoader.scss
    │   │   │   └── MovieTable.scss
    │   │   └── movieList
    │   │   │   ├── MoviesList.scss
    │   │   │   ├── PaginationBar.scss
    │   │   │   └── SearchBar.scss
    │   ├── pages
    │   │   ├── Detail.scss
    │   │   ├── Favorites.scss
    │   │   └── Homepage.scss
    │   └── main.scss
    ├── .d.ts
    ├── App.tsx
    └── index.tsx

The following technologies were used in this particular project:

• React create app
• Typescript
• Redux Toolkit
• Redux Saga
• Sass

Thank you for every suggestion.

CodePudding user response：

https://reactjs.org/docs/faq-structure.html

"If you’re just starting a project, don’t spend more than five minutes on choosing a file structure. Pick any of the above approaches (or come up with your own) and start writing code! You’ll likely want to rethink it anyway after you’ve written some real code."

CodePudding user response：

Your structure is fine. Like it's already said, do not overthink it.

Despite that, as you asked, I personally like to put components related to same feature together as you did.