Начинаю второй модуль, посвящённый базе веб-технологий и выбору стека. В уроке я создаю проект на React и Vite, подключаю Tailwind CSS и задаю базовые правила в файле cursor rules. Затем выношу весь текст сайта в отдельный файл contentConfig.js и собираю «двигатель блоков»: набор компонентов, который выводит данные из этого файла. Одним промптом переделываю сайт под студию автодетейлинга, меняю цвета и добавляю иконки. В конце настраиваю React Router, страницы услуг по адресу вида /services/:slug и динамические title и description. В конспекте к уроку лежат команды, тексты промптов и ссылки на документацию. Урок подойдёт SEO-специалистам, которые хотят собирать сайты без ручной вёрстки.
0:00–1:07 План урока и создание проекта. Использую React и Vite, потому что это быстрый и распространённый стандарт. Запускаю команду создания проекта, соглашаюсь с вопросами установщика и открываю демо-страницу. 1:07–3:02 Установка Tailwind CSS и файл cursor rules. Tailwind даёт готовые классы, которые прописываются прямо в HTML-тегах. Сначала я установил пакет не в той папке, поэтому перешёл в папку проекта и повторил установку. В cursor rules записываю правила: React и Tailwind, семантическая вёрстка, разбивка на мелкие компоненты, никакого текста внутри компонентов. 3:02–4:35 Данные отдельно от кода. Цену или заголовок удобно менять в одном файле, не разыскивая их в HTML. Прошу Cursor сгенерировать…
🔒
Этот материал доступен участникам Клуба. Войдите или оформите доступ,
чтобы читать целиком, открывать видео и комментировать.
