React-компонент по паттерну Container/Presentation

6 сентября 2026

Разделяет логику и отображение: хук с состоянием, «глупый» презентационный компонент, типы и история Storybook.

Описание

РазработкаБесплатно

Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.

React
архитектура
Storybook

Название

React-компонент по паттерну Container/Presentation

Категория

Разработка

Источник

awesome-copilot — react-container-presentation-component skill · MIT

Где работает

ChatGPT, Claude и другие ИИ-ассистенты

Объём

24 строки · 174 слова · 1 273 символа

Переменные

Значения сразу появятся в превью, коде и при копировании.

[ИМЯ КОМПОНЕНТА]

[ui ИЛИ features]

[ОПИСАНИЕ]

[CSS Modules / SCSS / Tailwind]

Как использовать

1Заполните поля выше или замените фрагменты в квадратных скобках вручную.
2Скопируйте промпт — он попадёт в буфер обмена целиком.
3Вставьте его в чат с ИИ: ChatGPT, Claude или любой другой ассистент.
4Уточняйте ответ короткими репликами, не переписывая промпт заново.

Что внутри

Создай React-компонент по паттерну Container/Presentation.

Имя компонента (PascalCase): [ИМЯ КОМПОНЕНТА]
Тип: [ui ИЛИ features]
Что делает: [ОПИСАНИЕ]
Стили: [CSS Modules / SCSS / Tailwind]

Если чего-то из этого не хватает — сначала спроси.

Правила классификации:
- ui — только отображение: получает данные и колбэки через пропсы, без состояния приложения, запросов и побочных эффектов;
- features — есть состояние, запросы, контекст или стор, бизнес-логика.
Даже если я указал ui, но компоненту нужна логика, — предложи сделать его features или вынести логику в родителя.

Порядок:
1. Проверь, нет ли уже компонента с таким именем в src/components/ui или src/components/features. Если есть — не перезаписывай, спроси меня.
2. Создай файлы:
   - ui: index.tsx, стили, index.stories.tsx;
   - features: index.tsx (контейнер), useИмя.tsx (хук с состоянием и эффектами), presentation.tsx (отображение), types.ts, стили и presentation.stories.tsx.
3. Презентационный компонент не импортирует хуки данных и стор — всё через пропсы.
4. Истории Storybook: основное состояние, загрузка, пусто, ошибка.
5. Запусти сборку и линтер, исправь ошибки в новых файлах.

Отчёт: список файлов, пример использования, почему выбран ui или features, где живут состояние, эффекты и отрисовка.

```text
Создай React-компонент по паттерну Container/Presentation.

Имя компонента (PascalCase): [ИМЯ КОМПОНЕНТА]
Тип: [ui ИЛИ features]
Что делает: [ОПИСАНИЕ]
Стили: [CSS Modules / SCSS / Tailwind]

Если чего-то из этого не хватает — сначала спроси.

Правила классификации:
- ui — только отображение: получает данные и колбэки через пропсы, без состояния приложения, запросов и побочных эффектов;
- features — есть состояние, запросы, контекст или стор, бизнес-логика.
Даже если я указал ui, но компоненту нужна логика, — предложи сделать его features или вынести логику в родителя.

Порядок:
1. Проверь, нет ли уже компонента с таким именем в src/components/ui или src/components/features. Если есть — не перезаписывай, спроси меня.
2. Создай файлы:
   - ui: index.tsx, стили, index.stories.tsx;
   - features: index.tsx (контейнер), useИмя.tsx (хук с состоянием и эффектами), presentation.tsx (отображение), types.ts, стили и presentation.stories.tsx.
3. Презентационный компонент не импортирует хуки данных и стор — всё через пропсы.
4. Истории Storybook: основное состояние, загрузка, пусто, ошибка.
5. Запусти сборку и линтер, исправь ошибки в новых файлах.

Отчёт: список файлов, пример использования, почему выбран ui или features, где живут состояние, эффекты и отрисовка.
```

{
  "messages": [
    {
      "role": "user",
      "content": "Создай React-компонент по паттерну Container/Presentation.\n\nИмя компонента (PascalCase): [ИМЯ КОМПОНЕНТА]\nТип: [ui ИЛИ features]\nЧто делает: [ОПИСАНИЕ]\nСтили: [CSS Modules / SCSS / Tailwind]\n\nЕсли чего-то из этого не хватает — сначала спроси.\n\nПравила классификации:\n- ui — только отображение: получает данные и колбэки через пропсы, без состояния приложения, запросов и побочных эффектов;\n- features — есть состояние, запросы, контекст или стор, бизнес-логика.\nДаже если я указал ui, но компоненту нужна логика, — предложи сделать его features или вынести логику в родителя.\n\nПорядок:\n1. Проверь, нет ли уже компонента с таким именем в src/components/ui или src/components/features. Если есть — не перезаписывай, спроси меня.\n2. Создай файлы:\n   - ui: index.tsx, стили, index.stories.tsx;\n   - features: index.tsx (контейнер), useИмя.tsx (хук с состоянием и эффектами), presentation.tsx (отображение), types.ts, стили и presentation.stories.tsx.\n3. Презентационный компонент не импортирует хуки данных и стор — всё через пропсы.\n4. Истории Storybook: основное состояние, загрузка, пусто, ошибка.\n5. Запусти сборку и линтер, исправь ошибки в новых файлах.\n\nОтчёт: список файлов, пример использования, почему выбран ui или features, где живут состояние, эффекты и отрисовка."
    }
  ]
}

Действия

prompt.txt· заполнено 0 из 4

Создай React-компонент по паттерну Container/Presentation.
Имя компонента (PascalCase): [ИМЯ КОМПОНЕНТА]
Тип: [ui ИЛИ features]
Что делает: [ОПИСАНИЕ]
Стили: [CSS Modules / SCSS / Tailwind]
Если чего-то из этого не хватает — сначала спроси.
Правила классификации:
- ui — только отображение: получает данные и колбэки через пропсы, без состояния приложения, запросов и побочных эффектов;
- features — есть состояние, запросы, контекст или стор, бизнес-логика.
Даже если я указал ui, но компоненту нужна логика, — предложи сделать его features или вынести логику в родителя.
Порядок:
1. Проверь, нет ли уже компонента с таким именем в src/components/ui или src/components/features. Если есть — не перезаписывай, спроси меня.
2. Создай файлы:
- ui: index.tsx, стили, index.stories.tsx;
- features: index.tsx (контейнер), useИмя.tsx (хук с состоянием и эффектами), presentation.tsx (отображение), types.ts, стили и presentation.stories.tsx.
3. Презентационный компонент не импортирует хуки данных и стор — всё через пропсы.
4. Истории Storybook: основное состояние, загрузка, пусто, ошибка.
5. Запусти сборку и линтер, исправь ошибки в новых файлах.
Отчёт: список файлов, пример использования, почему выбран ui или features, где живут состояние, эффекты и отрисовка.

Описание

РазработкаБесплатно

Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.

React
архитектура
Storybook

Название

React-компонент по паттерну Container/Presentation

Категория

Разработка

Источник

awesome-copilot — react-container-presentation-component skill · MIT

Где работает

ChatGPT, Claude и другие ИИ-ассистенты

Объём

24 строки · 174 слова · 1 273 символа

Переменные

Значения сразу появятся в превью, коде и при копировании.

[ИМЯ КОМПОНЕНТА]

[ui ИЛИ features]

[ОПИСАНИЕ]

[CSS Modules / SCSS / Tailwind]

Как использовать

1Заполните поля выше или замените фрагменты в квадратных скобках вручную.
2Скопируйте промпт — он попадёт в буфер обмена целиком.
3Вставьте его в чат с ИИ: ChatGPT, Claude или любой другой ассистент.
4Уточняйте ответ короткими репликами, не переписывая промпт заново.

Что внутри

Создай React-компонент по паттерну Container/Presentation.

Имя компонента (PascalCase): [ИМЯ КОМПОНЕНТА]
Тип: [ui ИЛИ features]
Что делает: [ОПИСАНИЕ]
Стили: [CSS Modules / SCSS / Tailwind]

Если чего-то из этого не хватает — сначала спроси.

Правила классификации:
- ui — только отображение: получает данные и колбэки через пропсы, без состояния приложения, запросов и побочных эффектов;
- features — есть состояние, запросы, контекст или стор, бизнес-логика.
Даже если я указал ui, но компоненту нужна логика, — предложи сделать его features или вынести логику в родителя.

Порядок:
1. Проверь, нет ли уже компонента с таким именем в src/components/ui или src/components/features. Если есть — не перезаписывай, спроси меня.
2. Создай файлы:
   - ui: index.tsx, стили, index.stories.tsx;
   - features: index.tsx (контейнер), useИмя.tsx (хук с состоянием и эффектами), presentation.tsx (отображение), types.ts, стили и presentation.stories.tsx.
3. Презентационный компонент не импортирует хуки данных и стор — всё через пропсы.
4. Истории Storybook: основное состояние, загрузка, пусто, ошибка.
5. Запусти сборку и линтер, исправь ошибки в новых файлах.

Отчёт: список файлов, пример использования, почему выбран ui или features, где живут состояние, эффекты и отрисовка.

```text
Создай React-компонент по паттерну Container/Presentation.

Имя компонента (PascalCase): [ИМЯ КОМПОНЕНТА]
Тип: [ui ИЛИ features]
Что делает: [ОПИСАНИЕ]
Стили: [CSS Modules / SCSS / Tailwind]

Если чего-то из этого не хватает — сначала спроси.

Правила классификации:
- ui — только отображение: получает данные и колбэки через пропсы, без состояния приложения, запросов и побочных эффектов;
- features — есть состояние, запросы, контекст или стор, бизнес-логика.
Даже если я указал ui, но компоненту нужна логика, — предложи сделать его features или вынести логику в родителя.

Порядок:
1. Проверь, нет ли уже компонента с таким именем в src/components/ui или src/components/features. Если есть — не перезаписывай, спроси меня.
2. Создай файлы:
   - ui: index.tsx, стили, index.stories.tsx;
   - features: index.tsx (контейнер), useИмя.tsx (хук с состоянием и эффектами), presentation.tsx (отображение), types.ts, стили и presentation.stories.tsx.
3. Презентационный компонент не импортирует хуки данных и стор — всё через пропсы.
4. Истории Storybook: основное состояние, загрузка, пусто, ошибка.
5. Запусти сборку и линтер, исправь ошибки в новых файлах.

Отчёт: список файлов, пример использования, почему выбран ui или features, где живут состояние, эффекты и отрисовка.
```

{
  "messages": [
    {
      "role": "user",
      "content": "Создай React-компонент по паттерну Container/Presentation.\n\nИмя компонента (PascalCase): [ИМЯ КОМПОНЕНТА]\nТип: [ui ИЛИ features]\nЧто делает: [ОПИСАНИЕ]\nСтили: [CSS Modules / SCSS / Tailwind]\n\nЕсли чего-то из этого не хватает — сначала спроси.\n\nПравила классификации:\n- ui — только отображение: получает данные и колбэки через пропсы, без состояния приложения, запросов и побочных эффектов;\n- features — есть состояние, запросы, контекст или стор, бизнес-логика.\nДаже если я указал ui, но компоненту нужна логика, — предложи сделать его features или вынести логику в родителя.\n\nПорядок:\n1. Проверь, нет ли уже компонента с таким именем в src/components/ui или src/components/features. Если есть — не перезаписывай, спроси меня.\n2. Создай файлы:\n   - ui: index.tsx, стили, index.stories.tsx;\n   - features: index.tsx (контейнер), useИмя.tsx (хук с состоянием и эффектами), presentation.tsx (отображение), types.ts, стили и presentation.stories.tsx.\n3. Презентационный компонент не импортирует хуки данных и стор — всё через пропсы.\n4. Истории Storybook: основное состояние, загрузка, пусто, ошибка.\n5. Запусти сборку и линтер, исправь ошибки в новых файлах.\n\nОтчёт: список файлов, пример использования, почему выбран ui или features, где живут состояние, эффекты и отрисовка."
    }
  ]
}