6 примеров того, как ChatGPT поможет начинающему фронтенд-разработчику

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

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

1. ChatGPT генерирует интерфейсы на основе данных, полученных из API-запросов

Интеграция данных из внешних источников является частью почти всех (если не всех) веб-приложений. Чтобы обеспечить типовую безопасность, следует генерировать интерфейсы/типы на основе входящего JSON. Если данные простые, то проблемы не возникают. К сожалению (для разработчиков), обычно это не так.

Можем использовать данные из Dummy JSON в качестве примера функциональности.

Давайте используем ChatGPT и создадим интерфейсы для безопасной типизации на фронтенде.

Промт:

Generate a TypeScript interface for following data:

{ "id": 1, "title": "iPhone 9", "description": "An apple mobile which is nothing like apple", "price": 549, "discountPercentage": 12.96, "rating": 4.69, "stock": 94, "brand": "Apple", "category": "smartphones", "thumbnail": "<https://i.dummyjson.com/data/products/1/thumbnail.jpg>", "images": [ "<https://i.dummyjson.com/data/products/1/1.jpg>", "<https://i.dummyjson.com/data/products/1/2.jpg>", ] }

Ответ:

Мы пришли к корректному решению примерно на 20 минут быстрее, чем если бы набирали все вручную. Благодаря ИИ мы набрали данные уже через несколько секунд после отправки запроса.

ОНЛАЙН-ПРАКТИКУМ

ЗАПУСК DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ

ЧТО БУДЕТ НА ОБУЧЕНИИ?

• ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
• Где и как применять? Потестируем модель после установки на разных задачах
• Как дообучить модель под себя?

Участвовать бесплатно

2. ChatGPT помогает тестировать функции и хуки React

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

Промт:

Write tests for this code:

export const firstLetterUppercase = (str: string): string => { if (!str) { return ''; } return str.toLowerCase() .split(' ') .map((word) => { return word[0].toUpperCase() + word.substring(1); }) .join(' '); };

Первый ответ:

Результат получился не самый лучший. Давайте попросим ChatGPT внести изменения.

Промт:

Test this method against null, undefined, empty string and numbers.

Второй ответ:

Теперь выглядит лучше. Можем скопировать и вставить эти тесты в IDE и запустить их с помощью Jest.

Если у ИИ нет правильного контекста, мы не получим идеального ответа. В отличие от человека, ИИ часто не может правильно придумать информацию, которой у него нет.

3. ChatGPT ускорит процесс подготовки документации к коду

Вам или коллегам когда-нибудь приходилось работать над проектом с небольшим количеством документации или вообще без нее? Некоторым разработчикам не нравится тратить время на документирование кода для других. Это отнимает много ресурсов, а отдачи мало или вообще нет. Поэтому лучше, чтобы ИИ написал документацию для вас сам.

Промт:

Prepare docs for the given function:

export function mergeDirections( columns: string[], directions: ColumnDirectionModel, direction: ColumnDirectionType, ): ColumnDirectionModel { const items = columns.reduce((acc: ColumnDirectionModel, column: string) => { acc[column] = direction; return acc; }, {}); return { ...directions, ...items }; }

Ответ:

Готово! Как будто документацию писал человек.

4. ChatGPT поможет со стилизацией

Tailwind — это CSS-фреймворк, который позволяет разработчикам стилизовать компоненты с помощью HTML-классов. Он (почти) всеми любим за простоту и возможности настройки. Приятный бонус: очень простое центрирование div. А использование ChatGPT, например, для создания цветовой палитры, похоже на читерство.

Промт:

Create Tailwind CSS styles for 3 centred boxes using flexbox keeping mind the RWD principles

Ответ:

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

ChatGPT улучшит читаемость кода и поможет сохранить KISS

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

Лучше стремиться к тому, чтобы этот участок кода был написан по принципу KISS (Keep it Simple, Silly — делай проще, глупыш) и стал более читабельным. Именно тогда мы можем обратиться к GPT и попробовать упростить код и сделать его более понятным.

Промт:

This is a search box React component. Make it easier to read and remove unnecessary elements, add i18n for hardcoded texts and use Tailwind for styles:

import React, { FC, useState, useCallback } from 'react'; import { SearchIcon } from '../../icons'; import { FormControl, InputGroup } from 'react-bootstrap'; interface SearchProps { onChange: () => void; onReset: () => void; register: any; formControl?: { palceholder: string; ariaLabel: string; ariaDescribedBy: string; name: string; }; } const searchIconStyles = { display: 'flex', alignItems: 'center', border: '1px solid #ced4da', borderRight: 0, paddingLeft: '5px', }; const Search: FC<SearchProps> = ({ register, onChange, onReset, formControl, children }) => { const [isFocused, setIsFocused] = useState(false); const handleOnBlur = useCallback(() => { setIsFocused(false); }, []); const handleOnFocus = useCallback(() => { setIsFocused(true); }, []); return ( <InputGroup size="sm" style={{ width: '400px' }}> <InputGroup.Prepend style={{ ...searchIconStyles, borderColor: isFocused ? '#80bdff' : '#ced4da' }}> <SearchIcon /> </InputGroup.Prepend> <FormControl aria-label={formControl?.ariaLabel ?? 'Search control'} aria-describedby={formControl?.ariaDescribedBy ?? 'search-control'} type="text" name={formControl?.name ?? 'search'} ref={register} onChange={onChange} placeholder={formControl?.palceholder ?? 'Search'} className="border-right-0 border-left-0" style={{ boxShadow: 'none' }} onFocus={handleOnFocus} onBlur={handleOnBlur} /> <InputGroup.Append> <InputGroup.Text color="#007bff" style={{ cursor: 'pointer', color: '#80bdff', backgroundColor: 'white', border: isFocused ? '1px solid #80bdff' : '1px solid #ced4da', }} onClick={onReset} > x </InputGroup.Text> </InputGroup.Append> </InputGroup> ); }; export default Search;

Ответ:

import React, { FC, useState, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { SearchIcon } from '../../icons'; import { FormControl, InputGroup } from 'react-bootstrap'; interface SearchProps { onChange: () => void; onReset: () => void; register: any; formControl?: { placeholder: string; ariaLabel: string; ariaDescribedBy: string; name: string; }; } const Search: FC<SearchProps> = ({ register, onChange, onReset, formControl }) => { const { t } = useTranslation(); const [isFocused, setIsFocused] = useState(false); const handleOnBlur = useCallback(() => { setIsFocused(false); }, []); const handleOnFocus = useCallback(() => { setIsFocused(true); }, []); return ( <InputGroup size="sm" className="w-64"> <InputGroup.Prepend className={`flex items-center border border-gray-300 border-r-0 pl-2 ${isFocused ? 'border-blue-500' : ''}`}> <SearchIcon /> </InputGroup.Prepend> <FormControl aria-label={formControl?.ariaLabel || t('searchControl')} aria-describedby={formControl?.ariaDescribedBy || 'search-control'} type="text" name={formControl?.name || 'search'} ref={register} onChange={onChange} placeholder={formControl?.placeholder || t('searchPlaceholder')} className="border-r-0 border-l-0 focus:outline-none focus:shadow-none" onFocus={handleOnFocus} onBlur={handleOnBlur} /> <InputGroup.Append> <InputGroup.Text className={`cursor-pointer ${isFocused ? 'text-blue-500 border-blue-500' : 'text-gray-500 border-gray-300'}`} onClick={onReset} > x </InputGroup.Text> </InputGroup.Append> </InputGroup> ); }; export default Search;

В этом случае можно быстро увидеть множество изменений.

5. ChatGPT может нам все объяснить

Промт:

What is useCallback and when I should use it?

Ответ:

6. ChatGPT оптимизирует React-компоненты

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

Промт:

Optimize this part of React component code in order to get better performance:

import React, { useState } from "react"; function MyComponent({ data }) { const [filter, setFilter] = useState(""); const filteredData = () => { // Perform some expensive filtering here return data.filter((item) => item.includes(filter)); }; return ( <div> <input value={filter} onChange={(e) => setFilter(e.target.value)} /> {filteredData.map((item) => ( <div key={item}>{item}</div> ))} </div> ); }

Ответ:

import React, { useState, useMemo } from 'react'; function MyComponent({ data }) { const [filter, setFilter] = useState(''); const filteredData = useMemo(() => { // Perform some expensive filtering here return data.filter(item => item.includes(filter)); }, [data, filter]); return ( <div> <input value={filter} onChange={e => setFilter(e.target.value)} /> {filteredData.map((item, index) => ( <div key={index}>{item}</div> ))} </div> ); }

Вы можете оптимизировать компонент несколькими способами:

Мемоизация. Вместо того чтобы пересчитывать отфильтрованные данные при каждом рендере, можете использовать хук useMemo из React. Этот хук гарантирует, что дорогостоящие вычисления будут выполняться только при необходимости — в частности, при изменении данных или фильтра.

Атрибут key. Убедитесь, что ваш ключ уникален. Если элемент не уникален, то в качестве ключа следует использовать что-то другое, например, индекс или id. Не следует использовать индекс в качестве ключа в дочерних div, чтобы избежать ненужных повторных рендеров компонента. Поэтому всегда следует дважды проверять правильность ответа ChatGPT.

Заключение

До эпохи искусственного интеллекта у нас были эксперты, специализирующиеся в конкретных технических областях, таких как Frontend, Backend, базы данных и т. д. С помощью ChatGPT вы можете стать «универсалов», обладающим знаниями во многих областях. Кажется, что все знания находятся (или находятся) на расстоянии одного запроса.

Кроме того, вы можете потратить меньше денег и времени на подготовку PoC или MVP, используя одного человека с ChatGPT, а также увеличить скорость разработки благодаря использованию, например, GPT-based Copilot.

Использование искусственного интеллекта для генерации идеально оптимизированного кода React — это будущее фронтенд-разработки. Давайте исследовать это будущее вместе. Просто присоединяйтесь к сообществу студентов «Зерокодер» и откройте для себя совершенно новый мир разработки!