1 Создайте React приложение с Vite

# Создаем проект
npm create vite@latest todo-app -- --template react-ts

# Переходим в директорию
cd todo-app

# Устанавливаем зависимости
npm install

# Устанавливаем дополнительные библиотеки
npm install axios @tanstack/react-query

2 Структура проекта

todo-app/
├── src/
│   ├── api/
│   │   └── todos.ts          # API функции
│   ├── components/
│   │   ├── TodoList.tsx      # Список задач
│   │   ├── TodoItem.tsx      # Одна задача
│   │   └── AddTodo.tsx       # Форма добавления
│   ├── types/
│   │   └── todo.ts           # TypeScript типы
│   ├── App.tsx               # Главный компонент
│   └── main.tsx              # Entry point
├── package.json
└── vite.config.ts

1 Зарегистрируйтесь на LightBox API

Перейдите на lightboxapi.ru и создайте бесплатный аккаунт.

2 Создайте workspace

В dashboard создайте новый workspace с именем todo-app.

3 Настройте endpoints

Endpoint 1: GET /todos

{
  "todos": [
    {
      "id": "1",
      "title": "Изучить React Query",
      "completed": false,
      "createdAt": "2025-10-21T10:00:00Z"
    },
    {
      "id": "2",
      "title": "Интегрировать Mock API",
      "completed": true,
      "createdAt": "2025-10-21T09:00:00Z"
    }
  ]
}

Endpoint 2: POST /todos

{
  "id": "{randomUUID}",
  "title": "{body.title}",
  "completed": false,
  "createdAt": "{$timestamp}"
}

Endpoint 3: PUT /todos/:id

{
  "id": "{params.id}",
  "title": "{body.title}",
  "completed": {body.completed},
  "updatedAt": "{$timestamp}"
}

Endpoint 4: DELETE /todos/:id

{
  "success": true,
  "message": "Todo deleted"
}

1 Создайте типы TypeScript

// src/types/todo.ts
export interface Todo {
  id: string;
  title: string;
  completed: boolean;
  createdAt: string;
  updatedAt?: string;
}

export interface CreateTodoDTO {
  title: string;
}

export interface UpdateTodoDTO {
  title?: string;
  completed?: boolean;
}

2 Настройте Axios

// src/api/client.ts
import axios from 'axios';

const API_URL = 'https://yourdomain.lightboxapi.ru';

export const apiClient = axios.create({
  baseURL: API_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

// Можно добавить interceptors для логирования
apiClient.interceptors.request.use((config) => {
  console.log('API Request:', config.method?.toUpperCase(), config.url);
  return config;
});

apiClient.interceptors.response.use(
  (response) => {
    console.log('API Response:', response.status, response.data);
    return response;
  },
  (error) => {
    console.error('API Error:', error.message);
    return Promise.reject(error);
  }
);

1 Создайте API функции

// src/api/todos.ts
import { apiClient } from './client';
import { Todo, CreateTodoDTO, UpdateTodoDTO } from '../types/todo';

// GET /todos - Получить все задачи
export const getTodos = async (): Promise => {
  const response = await apiClient.get<{ todos: Todo[] }>('/todos');
  return response.data.todos;
};

// POST /todos - Создать задачу
export const createTodo = async (data: CreateTodoDTO): Promise => {
  const response = await apiClient.post('/todos', data);
  return response.data;
};

// PUT /todos/:id - Обновить задачу
export const updateTodo = async (
  id: string,
  data: UpdateTodoDTO
): Promise => {
  const response = await apiClient.put(`/todos/${id}`, data);
  return response.data;
};

// DELETE /todos/:id - Удалить задачу
export const deleteTodo = async (id: string): Promise => {
  await apiClient.delete(`/todos/${id}`);
};

1 Настройте QueryClient

// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import App from './App';
import './index.css';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: 1,
      staleTime: 5 * 60 * 1000, // 5 минут
    },
  },
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  
    
      
      
    
  
);

2 Создайте Custom Hooks

// src/hooks/useTodos.ts
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import {
  getTodos,
  createTodo,
  updateTodo,
  deleteTodo,
} from '../api/todos';
import { CreateTodoDTO, UpdateTodoDTO } from '../types/todo';

// Hook для получения всех задач
export const useTodos = () => {
  return useQuery({
    queryKey: ['todos'],
    queryFn: getTodos,
  });
};

// Hook для создания задачи
export const useCreateTodo = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (data: CreateTodoDTO) => createTodo(data),
    onSuccess: () => {
      // Обновляем список задач
      queryClient.invalidateQueries({ queryKey: ['todos'] });
    },
  });
};

// Hook для обновления задачи
export const useUpdateTodo = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: ({ id, data }: { id: string; data: UpdateTodoDTO }) =>
      updateTodo(id, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['todos'] });
    },
  });
};

// Hook для удаления задачи
export const useDeleteTodo = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (id: string) => deleteTodo(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['todos'] });
    },
  });
};

3 Используйте в компонентах

// src/App.tsx
import { useState } from 'react';
import {
  useTodos,
  useCreateTodo,
  useUpdateTodo,
  useDeleteTodo,
} from './hooks/useTodos';
import './App.css';

function App() {
  const [newTodoTitle, setNewTodoTitle] = useState('');

  // Queries
  const { data: todos, isLoading, error } = useTodos();

  // Mutations
  const createMutation = useCreateTodo();
  const updateMutation = useUpdateTodo();
  const deleteMutation = useDeleteTodo();

  const handleAddTodo = (e: React.FormEvent) => {
    e.preventDefault();
    if (newTodoTitle.trim()) {
      createMutation.mutate({ title: newTodoTitle });
      setNewTodoTitle('');
    }
  };

  const handleToggle = (id: string, completed: boolean) => {
    updateMutation.mutate({ id, data: { completed: !completed } });
  };

  const handleDelete = (id: string) => {
    deleteMutation.mutate(id);
  };

  if (isLoading) return 
Загрузка...
;
  if (error) return 
Ошибка: {error.message}
;

  return (
    

      
📝 Todo App

      {/* Форма добавления */}
      

         setNewTodoTitle(e.target.value)}
          placeholder="Добавить задачу..."
          className="todo-input"
        />
        
          {createMutation.isPending ? 'Добавление...' : 'Добавить'}
        
      

      {/* Список задач */}
      

        {todos?.map((todo) => (
          

             handleToggle(todo.id, todo.completed)}
              disabled={updateMutation.isPending}
            />
            
              {todo.title}
            
             handleDelete(todo.id)}
              disabled={deleteMutation.isPending}
              className="delete-button"
            >
              🗑️
            
          
        ))}
      

      {todos?.length === 0 && (
        
Нет задач. Добавьте первую!
      )}
    
  );
}

export default App;

1 Добавьте Toast уведомления

npm install react-hot-toast

// src/main.tsx
import { Toaster } from 'react-hot-toast';

// В рендер добавьте:
<>
  
  

// src/hooks/useTodos.ts
import toast from 'react-hot-toast';

export const useCreateTodo = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (data: CreateTodoDTO) => createTodo(data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['todos'] });
      toast.success('Задача добавлена');
    },
    onError: (error) => {
      toast.error(`Ошибка: ${error.message}`);
    },
  });
};

1 Подготовьте проект

# Инициализируйте git
git init
git add .
git commit -m "Initial commit"

# Загрузите на GitHub
git remote add origin https://github.com/yourusername/todo-app.git
git push -u origin main

2 Deploy на Vercel

1. Перейдите на vercel.com
2. Подключите GitHub репозиторий
3. Нажмите Deploy
4. Готово! Приложение доступно через 30 секунд

❓ Можно ли использовать fetch вместо axios?

Ответ: Да! Просто замените axios на fetch:

export const getTodos = async (): Promise => {
  const response = await fetch('https://yourdomain.lightboxapi.ru/todos');
  const data = await response.json();
  return data.todos;
};

❓ Как добавить авторизацию?

Ответ: Добавьте заголовок Authorization:

apiClient.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

❓ Как мигрировать на real API?

Ответ: Замените только URL:

// Было:
const API_URL = 'https://yourdomain.lightboxapi.ru';

// Стало:
const API_URL = 'https://api.yourapp.com';

Всё остальное работает без изменений! 🎉