Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 43aeb40b20 |
Generated
+9
-1256
File diff suppressed because it is too large
Load Diff
+1
-4
@@ -4,13 +4,12 @@
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"info": "^1.0.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0"
|
||||
},
|
||||
@@ -23,8 +22,6 @@
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.19",
|
||||
"globals": "^16.0.0",
|
||||
"sass": "^1.99.0",
|
||||
"sass-embedded": "^1.99.0",
|
||||
"vite": "^6.3.5"
|
||||
}
|
||||
}
|
||||
|
||||
+35
-20
@@ -1,29 +1,44 @@
|
||||
import styles from './styles/App.module.scss'
|
||||
import React, { useState, useCallback } from 'react'
|
||||
import { useMutation, QueryClientProvider, QueryClient } from '@tanstack/react-query'
|
||||
import PostAddForm from './components/PostAddForm'
|
||||
|
||||
function CounterButton({label, onClick}) {
|
||||
return (
|
||||
<button onClick={onClick} className={styles.counter_button}>{label}</button>
|
||||
)
|
||||
}
|
||||
function CounterDisplay({value}) {
|
||||
return (<div className={styles.counter_display}>
|
||||
Значение счетчика: <b>{value}</b>
|
||||
</div>)
|
||||
/*
|
||||
const mutation = useMutation({
|
||||
mutationFn: newUser => {
|
||||
fetch('https://jsonplaceholder.typicode.com/users', {
|
||||
method: 'GET',
|
||||
headers: {'Content-type':'application/json'},
|
||||
body: JSON.stringify(newUser),
|
||||
}).then(res => res.json())
|
||||
}
|
||||
})
|
||||
*/
|
||||
|
||||
const createQueryClient = () => {
|
||||
new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
staleTime: 5 * 60*1000,
|
||||
retry: 1,
|
||||
gcTime: 10*60*1000,
|
||||
refetchOnWindowFocus: false,
|
||||
},
|
||||
mutations: {
|
||||
retry:0,
|
||||
onError: error => {console.error('Mutation error:',error.message)}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [counter,setCounter] = useState(0);
|
||||
|
||||
const increment = () => setCounter(prev => prev + 1);
|
||||
const decrement = () => setCounter(prev => prev - 1);
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2>Практика по созданию счетчика с колбэками</h2>
|
||||
<CounterButton label="Увеличить" onClick={increment} />
|
||||
<CounterButton label="уменьшить" onClick={decrement} />
|
||||
<CounterDisplay value={counter} />
|
||||
{/* Добавьте тестовый контент для проверки */}
|
||||
<h1>Hello, React!</h1>
|
||||
<QueryClientProvider client={createQueryClient}>
|
||||
<PostAddForm />
|
||||
</QueryClientProvider>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
|
||||
// удаляем import './index.css'
|
||||
import App from './App.jsx'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
.container {
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
border: 1px solid black;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
p {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
}
|
||||
.counter {
|
||||
&_display{
|
||||
border: 1px solid black;
|
||||
border-width: 3px;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
width: 300px;
|
||||
}
|
||||
&_button{
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user