Как правильно разместить компонент кнопки в React-проекте, используя FSD?

Как правильно организовать структуру папок для различных вариантов кнопок, таких как GoogleButton и GithubButton, а также для текстовых полей, таких как EmailTextBox и PasswordTextBox, при использовании методологии Feature-Sliced Design?
  • 28 октября 2023 г. 12:49
Ответы на вопрос 1
При использовании методологии Feature-Sliced Design (FSD) в React-проекте, вам необходимо организовать структуру папок следующим образом:

1. Создайте папку `components` в корне вашего проекта.
2. Внутри папки `components` создайте папку `buttons` и папку `textFields`, чтобы разделить компоненты на две категории: кнопки и текстовые поля.
3. Внутри папки `buttons` создайте папку `GoogleButton` и папку `GithubButton`, чтобы отдельно разместить компоненты для каждой из кнопок.
4. Внутри папки `textFields` создайте папку `EmailTextBox` и папку `PasswordTextBox`, чтобы отдельно разместить компоненты для каждого из текстовых полей.

Структура папок выглядит следующим образом:

```
src
└── components
    ├── buttons
    │   ├── GoogleButton
    │   │   ├── GoogleButton.js
    │   │   └── GoogleButton.css
    │   └── GithubButton
    │       ├── GithubButton.js
    │       └── GithubButton.css
    └── textFields
        ├── EmailTextBox
        │   ├── EmailTextBox.js
        │   └── EmailTextBox.css
        └── PasswordTextBox
            ├── PasswordTextBox.js
            └── PasswordTextBox.css
```

В папках каждого компонента (`GoogleButton`, `GithubButton`, `EmailTextBox`, `PasswordTextBox`) разместите файлы с расширениями `.js` и `.css`, которые будут содержать код React-компонента и стили для этого компонента соответственно.

Такая структура позволит вам легко добавлять и настраивать новые компоненты, а также более удобно искать и использовать уже существующие компоненты в проекте.
Похожие вопросы