Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 43aeb40b20 |
Generated
+9
-1256
File diff suppressed because it is too large
Load Diff
@@ -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
@@ -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
@@ -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(
|
||||||
|
|||||||
@@ -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