Использование ChatGPT для создания функционального приложения react

Этот документ предназначен для тех, кто хочет начать работу с react js (используя typescript или javascript) и создать приложение за несколько минут.

Снова! Я очарован точностью и интеллектом этого инструмента искусственного интеллекта. Я backend-разработчик, но мне интересно изучать и frontend-технологии, поэтому после небольшого самостоятельного изучения я обратился к этому инструменту, чтобы он помог мне создать простое приложение на реакте. В качестве примера рассмотрим простую форму регистрации для клиента.

Эта регистрационная форма будет иметь некоторые поля ввода, такие как - текст, выпадающие (select), чекбокс и кнопки.

Позже я попрошу AI также сгенерировать css.

Шаг 1. Давайте сформулируем требование, которое нужно скормить chatGPT -

"Создайте форму регистрации в react, используя typescript. Эта форма содержит следующие поля - Имя, Возраст, Пол, Email, Пароль.

Используйте соответствующие типы для входов"

Ответ -

ChatGPT генерирует код в соответствии с запросом (в typescript)

Шаг 2. Откройте вашу любимую IDE, я использую Visual Studio Code. Откройте новую папку/рабочее пространство и запустите create react app в терминале, чтобы у нас было приложение react, запущенное на локальном компьютере. В это приложение мы включим вышеуказанный компонент. И снова я воспользуюсь помощью chatGPT, чтобы создать приложение react и использовать ответ, сгенерированный в шаге 1.

Ниже приведен ответ -

Итак, давайте следовать тому, что говорит ИИ!

И вот результат...

Шаг 3. Теперь мы включим сгенерированную выше форму в наше только что созданное приложение react.

Шаг 4. Создайте папку components и создайте новый файл - RegistrationForm.tsx и скопируйте код, который был сгенерирован в шаге 1.

Шаг 5. Замените index.js и запустите приложение с помощью команды

Npm start

Успешное развертывание должно выглядеть следующим образом.

Если вы заметили выше, наше приложение работает на localhost:3001, поэтому откройте браузер и нажмите http://localhost:3001.

Шаг 6. Это выглядит некрасиво, поэтому попросим AI применить немного css

Шаг 7. Создаем файл css, копируем сгенерированный АИ код и применяем к форме

Окончательный результат -

Неплохо!

Для тех, кто только начинает работать с react js или для тех, кто не хочет тратить много времени на написание такого простого кода, это будет полезно. Итак, в течение нескольких минут у меня есть красивая (почти!) страница регистрации.

Шаг 8. Итак, давайте проверим, работает ли основной функционал или нет

Мы видим, что в консоль выводится лог. Вуаля!

Следующие шаги - Мы можем аналогичным образом попросить chatGPT помочь нам создать новые вкладки, а затем передать данные между вкладками (мы можем использовать redux) и много других подобных требований.

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