sunmeat

import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';
// npm install redux react-redux

// редьюсер для счетчика
const counterReducer = (state = { count: 0 }, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return { count: state.count + 1 };
        case 'DECREMENT':

sunmeat

App.jsx:

import {
    BrowserRouter,
    Routes,
    Route,
    NavLink,
    Link,
    Outlet,
    Navigate,

Vladislav-Melenchuk

App.jsx

import logo from './assets/logo.jpg';
import './App.css'
import ContactInfo from "./ContactInfo.jsx";
import Title from "./Title.jsx";

function App() {
 return (

sunmeat

...

function NotFound() {
    return (
        <div className="page-content">
            <h1 className="page-title">404 - Страница не найдена</h1>
            <p className="about-text">Извините, запрашиваемая страница не существует.</p>
            <div className="link-group">
                <Link to="/" className="page-link">Вернуться в ленту</Link>
                <Link to="/profile" className="page-link">Профиль</Link>

sunmeat

App.jsx:

import {BrowserRouter, Routes, Route, NavLink, Link, Outlet, Navigate} from 'react-router';
import './App.css';
import {useState} from "react";

function Home() {
    return (
        <div className="page-content">
            <h1 className="page-title home-title">Лента</h1>

sunmeat

App.jsx:

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

function Home() {
    return (
        <div className="page-content">
            <h1 className="page-title home-title">Лента</h1>
            <div className="post">

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')}`;
};