sunmeat

App.jsx:

import {BrowserRouter, Routes, Route, Link} from 'react-router';
import './App.css';

function Home() {
    return <h1 className="page-title home-title">Главная</h1>;
}

function About() {

sunmeat

import { BrowserRouter, Routes, Route } from 'react-router';
// npm install react-router
// ранее было npm install react-router-dom, впрочем этот пакет тоже пока рабочий
// https://www.npmjs.com/package/react-router

// компонент домашней страницы
function Home() {
    return <h1>Привет, это главная страница!</h1>;
}

sunmeat

App.jsx:

import React, {Component} from 'react';
import {QueryClient, QueryClientProvider, useQuery, useMutation, useQueryClient} from '@tanstack/react-query'; // npm install @tanstack/react-query
import Dexie from 'dexie'; // npm install dexie
import './App.css';

const db = new Dexie('CartDatabase');
db.version(1).stores({
    cart: 'id, title, price, image, quantity',

sunmeat

import React, {useState, useEffect} from 'react';
import './App.css';

const getTimeWithMicroseconds = () => {
    const now = new Date();
    const micros = Math.floor(performance.now() * 1000) % 1000000;
    return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}.${micros.toString().padStart(6, '0')}`;
};

const FunctionalButton = ({width, height, color, text}) => {

sunmeat

import React, {useState, useEffect} from 'react';
import './App.css';

// время с микросекундами
const getTimeWithMicroseconds = () => {
    const now = new Date();
    const micros = Math.floor(performance.now() * 1000) % 1000000;
    return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}.${micros.toString().padStart(6, '0')}`;
};

sunmeat

App.jsx:

import React, {useState} from 'react';
import './App.css';

const FunctionalButton = ({width, height, color, text}) => {
    const [clickCount, setClickCount] = useState(0);

    const handleClick = () => {
        setClickCount(clickCount + 1);

sunmeat

App.jsx:

import {useState, useEffect, useCallback, useMemo} from 'react';
import {QueryClient, QueryClientProvider, useQuery, useMutation, useQueryClient} from '@tanstack/react-query';
import Dexie from 'dexie'; // npm install dexie
import './App.css';

const db = new Dexie('CartDatabase');
db.version(1).stores({
    cart: 'id, title, price, image, quantity',

sunmeat

import {useState} from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
    const [count, setCount] = useState(0)

    return (
        <>

sunmeat

import { render, screen, fireEvent } from '@testing-library/react' // импорт функций для рендеринга компонентов и взаимодействия с DOM
import App from './App' // импорт компоненты App, которую будем тестировать

describe('App component', () => { // группа тестов для компонента App
    it('renders Vite and React logos', () => { // тест: проверяет, что логотипы Vite и React отображаются
        render(<App />) // рендерим компонент App в виртуальный DOM
        expect(screen.getByAltText('Vite logo')).toBeInTheDocument() // ожидаем, что изображение с alt "Vite logo" присутствует в документе
        expect(screen.getByAltText('React logo')).toBeInTheDocument() // ожидаем, что изображение с alt "React logo" присутствует в документе
    })

sunmeat

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import vitest from 'eslint-plugin-vitest'
import vitestGlobals from 'globals'

export default [
  { ignores: ['dist'] },
  {