Содержание
- 1. ChatGPT генерирует интерфейсы на основе данных, полученных из API-запросов
- 2. ChatGPT помогает тестировать функции и хуки React
- 3. ChatGPT ускорит процесс подготовки документации к коду
- 4. ChatGPT поможет со стилизацией
- ChatGPT улучшит читаемость кода и поможет сохранить KISS
- 5. ChatGPT может нам все объяснить
- 6. ChatGPT оптимизирует React-компоненты
- Заключение
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 минут быстрее, чем если бы набирали все вручную. Благодаря ИИ мы набрали данные уже через несколько секунд после отправки запроса.
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 — это будущее фронтенд-разработки. Давайте исследовать это будущее вместе. Просто присоединяйтесь к сообществу студентов «Зерокодер» и откройте для себя совершенно новый мир разработки!