sunmeat

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/setupTests.js',
  },

sunmeat

🛒 Интернет-магазин на React (аналог Rozetka)

📖 Описание проекта

Проект должен представлять собой полноценный интернет-магазин, аналогичный Rozetka, разработанный с использованием React (функциональные компоненты) и современных инструментов фронтенд-разработки. Должны быть реализованы:

• Главная страница
• Страницы категорий и товаров
• Корзина
• Оформление заказа

sunmeat

App.jsx (client side):

import { useState, useRef } from 'react';

const SERVER_URL = 'https://netserver-dkf4.onrender.com/send';

function App() {
    const [inputValue, setInputValue] = useState('5');
    const [isSending, setIsSending] = useState(false);
    const [messages, setMessages] = useState([]);

sunmeat

https://www.pythonanywhere.com/user/sunmeat/files/home/sunmeat/alex.py?edit:

from flask import Flask, jsonify
from flask_cors import CORS 

app = Flask(__name__)

# Enable CORS for all routes, allowing all origins
CORS(app, resources={r"/api/*": {"origins": "*"}})

sunmeat

import { useState, useEffect, useRef } from 'react';
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';
import './App.css';

const API_URL = 'http://sunmeat.atwebpages.com/react/api.php';
const queryClient = new QueryClient();

const truncateText = (text, maxLength) =>
    text.length > maxLength ? text.slice(0, maxLength) + '...' : text;

sunmeat

создать папку files в папке react

=======================================================================================

App.jsx:

import { useState, useEffect } from 'react';
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';
import './App.css';

sunmeat

import {useState, useEffect} from 'react';
import {QueryClient, QueryClientProvider, useQuery} from '@tanstack/react-query';
import Dexie from 'dexie';
import './App.css';

// инициализация Dexie, npm install dexie
// https://dexie.org/
const db = new Dexie('CartDatabase');
db.version(1).stores({
    cart: '++id, title, price, image', // схема для таблицы корзины

sunmeat

import {useState, useEffect} from 'react';
import {QueryClient, QueryClientProvider, useQuery} from '@tanstack/react-query';
import './App.css';

const truncateText = (text, maxLength) => {
    if (text.length > maxLength) {
        return text.slice(0, maxLength) + '...';
    }
    return text;
};

sunmeat

App.jsx:

import {useState} from 'react';
import {QueryClient, QueryClientProvider, useQuery} from '@tanstack/react-query'; // npm install @tanstack/react-query
import './App.css';

// https://tanstack.com/query/latest

// экземпляр QueryClient
const queryClient = new QueryClient(); // https://tanstack.com/query/latest/docs/framework/react/quick-start

sunmeat

когда говорят, что функция "оборачивается в промис", имеют в виду, что при использовании async функция автоматически возвращает промис,
даже если внутри просто возвращается значение. это синтаксический сахар над использованием конструктора Promise.

такой код:

async function bar() {
  const result = await someAsyncFunction();
  return result + 1;
}