Промт для создания React-приложения Pokemon App с использованием Redux и Ant Design

Кому нужен этот промт и как он работает?

Этот промт предназначен для разработчиков, которые хотят быстро получить готовый код на React с использованием популярных инструментов: Create React App, yarn, Ant Design, Redux Toolkit, thunk и axios. Особенно полезен он для фронтенд-инженеров, изучающих работу с API и состоянием приложения, а также для тех, кто делает прототипы или учебные проекты.

Промт помогает сгенерировать единый файл index.js, который реализует приложение Pokemon App. Это приложение запрашивает список покемонов и отображает их изображения, используя API PokeAPI. Такой подход экономит время на настройку окружения и написание базового кода, позволяя сразу тестировать и расширять функционал.

Готовый к использованию промт

Как использовать промт и на что обратить внимание

Используйте этот промт, отправляя его нейросети с подробным описанием проекта. Не требуется дополнять запрос — все технологии и задачи указаны явно.

• Внимательно проверяйте финальный код — иногда API изменяется, и потребуется актуализация.
• Промт генерирует весь код в одном файле, что удобно для быстрых прототипов, но не подходит для крупных проектов.
• Если нужно расширить функционал, разбивайте код вручную и добавляйте новые слайсы Redux или компоненты.
• В промте можно изменить описание приложения, поменять API или интерфейс — нейросеть адаптирует код под новые требования.

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

Примеры использования

Два варианта промта, адаптированных для разных задач и API.

Пример 1: Приложение React, показывающее список книг из API с использованием Redux и Ant Design.

Пример 2: Приложение React, которое показывает список пользователей с аватарами из другого API.

Пример ответа нейросети по исходному промту

✅ Пример:
import React, { useEffect } from ‘react’;
import ReactDOM from ‘react-dom’;
import { configureStore, createSlice, createAsyncThunk } from ‘@reduxjs/toolkit’;
import { Provider, useDispatch, useSelector } from ‘react-redux’;
import axios from ‘axios’;
import { List, Avatar, Layout, Typography, Spin } from ‘antd’;

const { Header, Content } = Layout;
const { Title } = Typography;

const fetchPokemons = createAsyncThunk(‘pokemons/fetchPokemons’, async () => {
const response = await axios.get(‘https://pokeapi.co/api/v2/pokemon?limit=10’);
const pokemons = response.data.results;
// Получаем детальные данные, чтобы взять спрайты
const detailed = await Promise.all(
pokemons.map(async p => {
const res = await axios.get(p.url);
return { name: p.name, sprite: res.data.sprites.front_default };
})
);
return detailed;
});

const pokemonsSlice = createSlice({
name: ‘pokemons’,
initialState: { list: [], loading: false, error: null },
reducers: {},
extraReducers: builder => {
builder
.addCase(fetchPokemons.pending, state => {
state.loading = true;
state.error = null;
})
.addCase(fetchPokemons.fulfilled, (state, action) => {
state.list = action.payload;
state.loading = false;
})
.addCase(fetchPokemons.rejected, (state, action) => {
state.loading = false;
state.error = action.error.message;
});
}
});

const store = configureStore({
reducer: { pokemons: pokemonsSlice.reducer }
});

const PokemonList = () => {
const dispatch = useDispatch();
const { list, loading, error } = useSelector(state => state.pokemons);

useEffect(() => {
dispatch(fetchPokemons());
}, [dispatch]);

if (loading) return ;
if (error) return

Ошибка: {error}

;

return (
(

}
title={item.name.charAt(0).toUpperCase() + item.name.slice(1)}
/>

)}
/>
);
};

const App = () => (

);

ReactDOM.render(, document.getElementById(‘root’));

Примечание: результат приблизительный и может отличаться.

Итог: зачем использовать этот промт?

Этот промт помогает быстро получить полноценное React-приложение с современными технологиями без труда и длительной настройки. Он экономит часы разработки и позволяет сосредоточиться на изучении и доработке интерфейса. Промт прозрачен, понятен и легко адаптируется под разные API и задачи.

Главное преимущество: быстрое создание готового кода на React с Redux и Ant Design в одном файле под любой API-проект.