sass - 如何在 React 应用程序中构造和命名文件?

我想请教您对文件结构和文件名的意见。

我是一个初级 React 程序员,我对经验丰富的开发人员的意见很感兴趣。

关于结构和名称本身,您有什么不喜欢的吗?

└── 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

在这个特定项目中使用了以下技术:

  • React 创建应用
  • 打字稿
  • Redux Toolkit
  • Redux 传奇
  • Sass

谢谢你的每一个建议。

回答1

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

“如果您刚刚开始一个项目,请不要在选择文件结构上花费超过五分钟。选择上述任何一种方法(或提出您自己的方法)并开始编写代码!您可能需要重新考虑无论如何,在你写了一些真正的代码之后。”

回答2

你的结构很好。就像已经说过的那样,不要想太多。

尽管如此,正如您所问的,我个人喜欢像您一样将与相同功能相关的组件放在一起。

相似文章