Frontend разработка без Backend: полное руководство 2026

// UsersList.jsx
import React from 'react';

const UsersList = () => {
  // Захардкоженные данные
  const users = [
    { id: 1, name: 'Иван Иванов', email: 'ivan@example.com', role: 'Admin' },
    { id: 2, name: 'Мария Петрова', email: 'maria@example.com', role: 'User' },
    { id: 3, name: 'Алексей Сидоров', email: 'alex@example.com', role: 'User' }
  ];

  return (
    

      
Список пользователей
      {users.map(user => (
        

          
{user.name}
          
{user.email}
          {user.role}
        
      ))}
    
  );
};

export default UsersList;

# Установка
npm install -g json-server

# Создание db.json
cat > db.json << EOF
{
  "users": [
    { "id": 1, "name": "Иван Иванов", "email": "ivan@example.com" },
    { "id": 2, "name": "Мария Петрова", "email": "maria@example.com" }
  ],
  "posts": [
    { "id": 1, "userId": 1, "title": "Первый пост", "body": "Содержание..." }
  ]
}
EOF

# Запуск сервера
json-server --watch db.json --port 3001

import React, { useEffect, useState } from 'react';

const UsersList = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('http://localhost:3001/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      })
      .catch(error => console.error('Error:', error));
  }, []);

  if (loading) return 
Загрузка...
;

  return (
    

      
Список пользователей
      {users.map(user => (
        

          
{user.name}
          
{user.email}
        
      ))}
    
  );
};

export default UsersList;

import React, { useEffect, useState } from 'react';

const MOCK_API_URL = 'https://xxxxx.mock.pstmn.io';

const UsersList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch(`${MOCK_API_URL}/users`, {
      headers: {
        'x-mock-match-request-body': 'true'
      }
    })
      .then(res => res.json())
      .then(data => setUsers(data.users))
      .catch(error => console.error('Error:', error));
  }, []);

  return (
    

      {users.map(user => (
        
{user.name}
      ))}
    
  );
};

# 1. Опишите API (OpenAPI спецификация)
openapi: 3.0.0
info:
  title: Users API
  version: 1.0.0
paths:
  /users:
    get:
      summary: Get all users
      responses:
        '200':
          description: Success
          content:
            application/json:
              schema:
                type: array
                items:
                  type: object
                  properties:
                    id:
                      type: integer
                    name:
                      type: string
                    email:
                      type: string
                    role:
                      type: string

# 2. Импортируйте в LightBox API (через UI)
# 3. Получите URL: https://username.lightboxapi.com/users
# 4. Готово! Mock API работает ✅