# Урок №3: Генерация кода с помощью Claude. Часть 2

В предыдущем уроке мы исследовали, как ChatGPT может помочь нам в генерации кода. В этом уроке мы продолжим расширять наши знания и умения, используя ChatGPT для создания и стилизации кнопки в нашем веб-приложении.

Для начала рассмотрим этот процесс на примере html:

1. **Создание кнопки**

Для начала, нам необходимо создать кнопку. Спросим у ChatGPT, как создать простую кнопку в HTML. В данном случае, запрос может быть примерно таким: "ChatGPT, как я могу создать кнопку в HTML?" ChatGPT предоставит вам пример кода, который вы сможете использовать:

<figure><img src="https://content.gitbook.com/content/wImEff4lsN1NRsCNByAQ/blobs/mpMxSwtpWEk9ROBVJpZh/0.png" alt=""><figcaption></figcaption></figure>

![](https://content.gitbook.com/content/wImEff4lsN1NRsCNByAQ/blobs/ma61BIxHEux4p0ps8TQU/1.png)

Вставьте этот код в ваш HTML файл и обновите страницу. Теперь вы увидите кнопку на вашем веб-сайте.

2. **Стилизация кнопки**

Теперь, когда у нас есть кнопка, давайте поработаем над ее стилем. Мы хотим изменить цвет этой кнопки на голубой. Спросим у ChatGPT, как это сделать. Запрос может быть примерно таким: "ChatGPT, как я могу изменить цвет кнопки на голубой в HTML?"

ChatGPT снова предоставит нам пример кода:&#x20;

<figure><img src="https://content.gitbook.com/content/wImEff4lsN1NRsCNByAQ/blobs/Vn9sVn0rNR2V6gqfO4P7/2.png" alt=""><figcaption></figcaption></figure>

![](https://content.gitbook.com/content/wImEff4lsN1NRsCNByAQ/blobs/DsGa8imeGUn2S1JjGrZa/3.png)

Вставьте этот код в ваш HTML файл и обновите страницу. Теперь ваша кнопка голубого цвета. Если вы хотите использовать другой оттенок голубого, вы можете продолжать консультироваться с ChatGPT, и он предложит вам различные варианты цветовых кодов.

Теперь давайте посмотрим, как мы можем осуществить то же самое в React:

1. **Создание кнопки в React**

Начнем с создания кнопки. Мы можем спросить у ChatGPT, как создать простую кнопку в React. В данном случае, запрос может быть примерно таким: "ChatGPT, как я могу создать кнопку в React?"

ChatGPT предоставит вам пример кода, который вы сможете использовать:

![](https://content.gitbook.com/content/wImEff4lsN1NRsCNByAQ/blobs/qX46PJ9s5MHhE7sPvZLO/4.png)

![](https://content.gitbook.com/content/wImEff4lsN1NRsCNByAQ/blobs/c6yiOiEHW0Q8o4BxZIkW/5.png)

![](https://content.gitbook.com/content/wImEff4lsN1NRsCNByAQ/blobs/9LZRSnbgekIS0lLlrdg6/6.png)

Вставьте этот код в ваш React файл. Теперь вы увидите кнопку на вашем веб-приложении.

2. **Стилизация кнопки в React**

Теперь, когда у нас есть кнопка, давайте поработаем над ее стилем. Мы хотим изменить цвет этой кнопки на голубой. Спросим у ChatGPT, как это сделать. Запрос может быть примерно таким: "ChatGPT, как я могу изменить цвет кнопки на голубой в React?"

ChatGPT снова предоставит нам пример кода:

![](https://content.gitbook.com/content/wImEff4lsN1NRsCNByAQ/blobs/JWyWzJ0ybjRNhEtkOZRg/7.png)

![](https://content.gitbook.com/content/wImEff4lsN1NRsCNByAQ/blobs/dDfzKB4gmCI9g0FudL6l/8.png)

![](https://content.gitbook.com/content/wImEff4lsN1NRsCNByAQ/blobs/caH0MygY4IaO9uweTpbc/9.png)

Вставьте этот код в ваш React файл. Теперь ваша кнопка голубого цвета. Если вы хотите использовать другой оттенок голубого, вы можете продолжать консультироваться с ChatGPT, и он предложит вам различные варианты цветовых кодов.

Важно помнить, что ChatGPT не сохраняет контекст между разными сессиями, так что если вы хотите продолжать обсуждение с сохранением контекста, убедитесь, что вы делаете это в одной и той же сессии.

А теперь попробуйте сами!

**Практическое задание**

**Задача:** Попробуйте создать веб-приложение React с двумя кнопками разного цвета, используя ChatGPT для генерации кода.

**Инструкция:**

1. Попросите ChatGPT рассказать как создать приложение с названием my-app с использованием vite.
2. Создайте новое приложение React, используя команду "npm create vite my-app" в командной строке.
3. Выбрать React, а затем выбрать javascript.
4. В терминале ввести cd my-app.
5. Далее ввести npm install и npm run dev.
6. Используйте ChatGPT и дайте ему запрос “Добавь на главный экран приложения две кнопки “Привет” и “Пока”.”

![](https://content.gitbook.com/content/wImEff4lsN1NRsCNByAQ/blobs/OY7VXmsCL3mzAaYqS0nN/10.png)

1. А затем попросите сделать его одну кнопку зеленой, а другую - красной.

![](https://content.gitbook.com/content/wImEff4lsN1NRsCNByAQ/blobs/a9qMKzlHw58M4pxGCOXa/11.png)

2. Если нужно, запросите у него пояснение:

![](https://content.gitbook.com/content/wImEff4lsN1NRsCNByAQ/blobs/csxsB0bFAOZoWBtKchbx/12.png)

3. Далее попросим ChatGPT сделать так, чтобы при клике на первую кнопку выводился текст “Привет”, а на вторую - “Пока”:

<figure><img src="https://content.gitbook.com/content/wImEff4lsN1NRsCNByAQ/blobs/XMQBB5Qavc2HkUarB9iy/13.png" alt=""><figcaption></figcaption></figure>

![](https://content.gitbook.com/content/wImEff4lsN1NRsCNByAQ/blobs/g2gNfBiugUyfbDEw3REQ/14.png)

В этом примере мы создали две кнопки: одну голубую и одну красную. Помните, что ваши кнопки могут быть любого цвета, который вы выберете.

**Заключение**

Как мы видели, использование Chat GPT позволяет генерировать код, предлагать стили и решения для создания сайта, играя роль своего рода помощника разработчика. И хотя чат бот может иногда ошибаться, он может быть неоценимым инструментом при правильном использовании и задавании вопросов.