Compare commits

..

1 Commits

Author SHA1 Message Date
laktionov-as 43aeb40b20 i dont know 2026-06-18 18:53:17 +03:00
5 changed files with 46 additions and 1303 deletions
+9 -1256
View File
File diff suppressed because it is too large Load Diff
-3
View File
@@ -10,7 +10,6 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"info": "^1.0.0",
"react": "^19.1.0", "react": "^19.1.0",
"react-dom": "^19.1.0" "react-dom": "^19.1.0"
}, },
@@ -23,8 +22,6 @@
"eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.19", "eslint-plugin-react-refresh": "^0.4.19",
"globals": "^16.0.0", "globals": "^16.0.0",
"sass": "^1.99.0",
"sass-embedded": "^1.99.0",
"vite": "^6.3.5" "vite": "^6.3.5"
} }
} }
+35 -20
View File
@@ -1,29 +1,44 @@
import styles from './styles/App.module.scss' import { useMutation, QueryClientProvider, QueryClient } from '@tanstack/react-query'
import React, { useState, useCallback } from 'react' import PostAddForm from './components/PostAddForm'
function CounterButton({label, onClick}) { /*
return ( const mutation = useMutation({
<button onClick={onClick} className={styles.counter_button}>{label}</button> mutationFn: newUser => {
) fetch('https://jsonplaceholder.typicode.com/users', {
} method: 'GET',
function CounterDisplay({value}) { headers: {'Content-type':'application/json'},
return (<div className={styles.counter_display}> body: JSON.stringify(newUser),
Значение счетчика: <b>{value}</b> }).then(res => res.json())
</div>) }
})
*/
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() { function App() {
const [counter,setCounter] = useState(0);
const increment = () => setCounter(prev => prev + 1);
const decrement = () => setCounter(prev => prev - 1);
return ( return (
<> <>
<h2>Практика по созданию счетчика с колбэками</h2> {/* Добавьте тестовый контент для проверки */}
<CounterButton label="Увеличить" onClick={increment} /> <h1>Hello, React!</h1>
<CounterButton label="уменьшить" onClick={decrement} /> <QueryClientProvider client={createQueryClient}>
<CounterDisplay value={counter} /> <PostAddForm />
</QueryClientProvider>
</> </>
) )
} }
+1 -1
View File
@@ -1,6 +1,6 @@
import { StrictMode } from 'react' import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client' import { createRoot } from 'react-dom/client'
// удаляем import './index.css'
import App from './App.jsx' import App from './App.jsx'
createRoot(document.getElementById('root')).render( createRoot(document.getElementById('root')).render(
-22
View File
@@ -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;
}
}