Промт для подробного комментирования кода React-компонента

Кому нужен этот промт и как он работает?

Этот промт создан для разработчиков, которые пишут React-компоненты или задачи и хотят структурировать код с помощью подробных микро-комментариев. Его основная цель — помочь систематически описать каждый блок кода, чтобы потом быстро заменить комментарии на реальный синтаксис. Такой подход полезен при планировании разработки, обучении или подготовке структуры кода перед его написанием.

Промт решает проблему неструктурированного кода и позволяет избежать лишних деталей на раннем этапе. Он помогает сфокусироваться на логике, а не на синтаксисе, что облегчает командную работу и ускоряет реализацию.

Промт работает так: нейросеть генерирует чёткие, краткие комментарии, описывая назначение каждого блока, начиная с описания задачи и заканчивая экспортом. Это гарантирует понятный и организованный код без излишних деталей.

Готовый к использованию промт

Как использовать промт и на что обратить внимание

Используйте данный промт как шаблон для планирования структуры React-компонентов или отдельных функций. Обязательно придерживайтесь порядка комментариев — это облегчает понимание и упрощает последующую реализацию кода.

Рекомендуется дополнительно адаптировать промт под конкретный проект, добавляя специфичные пункты, если они необходимы (например, стили или контекст). Не пытайтесь сразу написать весь код, идите от общих комментариев к деталям, соблюдая принципы KISS (простота) и DRY (избегание повторов).

• Внимательно проверяйте, хватает ли комментариев для понимания логики.
• Избегайте излишних подробностей, чтобы не усложнять структуру.
• Промт не генерирует код — только комментарии. Это значит, что итоговая работа по написанию синтаксиса остаётся за разработчиком.
• В случаях сложной логики или большого объёма кода результат может получиться менее точным.

Примеры использования

Пример 1. Планирование компонента формы для регистрации пользователя

Этот пример помогает разработчику представить структуру формы, избежать пропусков важных этапов и упорядочить работу.

Пример 2. Создание задачи для обработки списка задач с фильтрацией

Данный пример подойдет для методичного разбиения задачи фильтрации на понятные этапы.

Пример вывода нейросети по данному промту

✅ Example:
// 1. Краткое описание: Компонент отображает список задач с фильтром по статусу.
// 2. Импорт: React, useState, типы для задач.
// 3. Типы: интерфейс Task с id, title, completed.
// 4. Константы/хуки: состояние списка задач и выбранного фильтра.
// 5. Основная логика: фильтрация задач по выбранному фильтру.
// 6. Вспомогательные функции: подсчёт активных задач по статусу.
// 7. Возврат JSX: отображение фильтров и списка задач.
// 8. Экспорт: экспорт компонента для использования в приложении.

Примечание: результат приблизительный и может варьироваться.

Итог: зачем использовать этот промт?

Использование промта позволяет структурировать процесс создания React-компонентов и связанных с ними задач. Он помогает избежать хаоса в коде, делает его понятным не только автору, но и коллегам, помогает быстрее перейти от идеи к реализации. Такой метод особенно полезен при командной разработке и обучении React.

Основное преимущество: чёткая и упорядоченная структура кода без излишков, упрощающая разработку и поддержку проекта.