Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 8cc72afd7b | |||
| a520406547 | |||
| 38f7195ed4 |
Generated
+1
-59
@@ -9,8 +9,7 @@
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-router-dom": "^7.17.0"
|
||||
"react-dom": "^19.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.25.0",
|
||||
@@ -1601,19 +1600,6 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cookie": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
|
||||
"integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||
@@ -2485,44 +2471,6 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "7.17.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.17.0.tgz",
|
||||
"integrity": "sha512-FDELK7rTMlCHO5+reyXsPlmfr7N1F91lPHsWYfMEGQm/KQ+F4JFM8jGoeQDmDvdTs93Fw9aSilH+uKRb4/jXvQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"cookie": "^1.0.1",
|
||||
"set-cookie-parser": "^2.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "7.17.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.17.0.tgz",
|
||||
"integrity": "sha512-fyU2yjGups/hE6Xz0I5ZYbVL8Gx29eCjgpHaRaTaVU+OOAdfRX05KsvyRm0GO8YQwOkhpU3MurW1jyMUJn+zSw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"react-router": "7.17.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/resolve-from": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
|
||||
@@ -2596,12 +2544,6 @@
|
||||
"semver": "bin/semver.js"
|
||||
}
|
||||
},
|
||||
"node_modules/set-cookie-parser": {
|
||||
"version": "2.7.2",
|
||||
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
|
||||
"integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/shebang-command": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||
|
||||
+2
-3
@@ -4,15 +4,14 @@
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-router-dom": "^7.17.0"
|
||||
"react-dom": "^19.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.25.0",
|
||||
|
||||
+39
-21
@@ -1,28 +1,46 @@
|
||||
import { Suspense, lazy } from 'react'
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom'
|
||||
import React, { useMemo, useCallback, useState } from 'react'
|
||||
|
||||
const HomePage = lazy(() => import('./pages/HomePage'))
|
||||
const AboutPage = lazy(() => import('./pages/AboutPage'))
|
||||
const ContactPage = lazy(() => import('./pages/ContactPage'))
|
||||
const AdminPanel = lazy(() => import('./pages/AdminPanel'))
|
||||
const TodoItem = React.memo(({ item, onToggle, onDelete }) => {
|
||||
console.log(`rendred ${item.id}`);
|
||||
return <li>
|
||||
{item.name}
|
||||
<button onClick={() => onToggle(item.id)}>Done</button>
|
||||
<button onClick={() => onDelete(item.id)}>remove</button>
|
||||
</li>
|
||||
})
|
||||
|
||||
function ItemList({ items }) {
|
||||
|
||||
const handleToggle = useCallback(id => {
|
||||
items.done = true;
|
||||
console.log(`Item ${id} done`)
|
||||
console.log(id)
|
||||
},[]);
|
||||
|
||||
const handleDelete = useCallback(id => {
|
||||
items.pop(id);
|
||||
},[]);
|
||||
return (
|
||||
<>
|
||||
<h3>List items</h3>
|
||||
{items.map(item => (
|
||||
<TodoItem key={item.id} item={item}
|
||||
onToggle={handleToggle} onDelete={handleDelete} />
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<div>
|
||||
<nav><a href='/'>Главная</a> <a href='/about'>О нас</a> <a href='/contact'>Контакты</a></nav>
|
||||
<main>
|
||||
<Suspense fallback={<div>Загрузка ...</div>}>
|
||||
<Routes>
|
||||
<Route path='/' element={<HomePage />} />
|
||||
<Route path='/about' element={<AboutPage />} />
|
||||
<Route path='/contact' element={<ContactPage />} />
|
||||
<Route path='/admin' element={<AdminPanel />} />
|
||||
</Routes>
|
||||
</Suspense>
|
||||
</main>
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
<>
|
||||
{/* Добавьте тестовый контент для проверки */}
|
||||
<h1>Hello, React!</h1>
|
||||
<ItemList items={[
|
||||
{id:1,name:'Первый',done:false},
|
||||
{id:2,name:'Второй',done:false}
|
||||
]} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,5 @@ import { createRoot } from 'react-dom/client'
|
||||
import App from './App.jsx'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>
|
||||
)
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
export function MyComponent() {
|
||||
return (
|
||||
<>
|
||||
<h1>About Page</h1>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default MyComponent
|
||||
@@ -1,9 +0,0 @@
|
||||
export function MyComponent() {
|
||||
return (
|
||||
<>
|
||||
<h1>Admin Page</h1>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default MyComponent
|
||||
@@ -1,9 +0,0 @@
|
||||
export function MyComponent() {
|
||||
return (
|
||||
<>
|
||||
<h1>Contact Page</h1>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default MyComponent
|
||||
@@ -1,9 +0,0 @@
|
||||
export function MyComponent() {
|
||||
return (
|
||||
<>
|
||||
<h1>Home Page</h1>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default MyComponent
|
||||
Reference in New Issue
Block a user