Compare commits

..

2 Commits

8 changed files with 104 additions and 119 deletions
+1 -59
View File
@@ -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
View File
@@ -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",
+90 -21
View File
@@ -1,28 +1,97 @@
import { Suspense, lazy } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import React from 'react'
import styles from './App.module.scss'
const HomePage = lazy(() => import('./pages/HomePage'))
const AboutPage = lazy(() => import('./pages/AboutPage'))
const ContactPage = lazy(() => import('./pages/ContactPage'))
const AdminPanel = lazy(() => import('./pages/AdminPanel'))
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = { date: new Date() };
}
componentDidMount() {
this.timerId = setInterval( () => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.timerId)
}
tick() {
this.setState({ date: new Date() })
}
render() {
return <div>{this.state.date.toLocaleTimeString()}</div>
}
}
function Clock2() {
const [date, setDate] = React.useState(new Date());
React.useEffect(()=>{
const timerId = setInterval(()=> setDate(new Date()),1000);
return () => clearInterval(timerId);
},[])
return <div>{date.toLocaleTimeString()}</div>
}
function MouseTracker() {
const [x,setX] = React.useState(0);
const [y,setY] = React.useState(0);
const mouseMoveHandler = event => {
setX(event.clientX);
setY(event.clientY);
}
React.useEffect(()=>{
document.addEventListener('mousemove', mouseMoveHandler);
return () => {
document.removeEventListener('mousemove',mouseMoveHandler);
}
},[]);
return <div className={styles.container}>
<p>Координаты мыши:<br /> X:<b>{x}</b>, Y:<b>{y}</b></p>
</div>
}
function DataFetcher() {
const [posts,setPosts] = React.useState([]);
const [users,setUsers] = React.useState([]);
const getPosts = async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
setUsers(data.reduce((acc, value) => {
if (!(value.userId in acc))
return [...acc,value.userId]
return acc
}))
console.log(users);
setPosts(data.slice(1,10));
}
React.useEffect(() => {
console.log("Компонент создан");
getPosts();
return () => {console.log("Компонент удален");setPosts([])};
},[])
return <div><ol>{posts.map(post => <li id={post.id}>{post.title}</li>)}</ol></div>
}
function App() {
const [tracker,setTracker] = React.useState(false);
const [dataFetcher,setDataFetcher] = React.useState(false);
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>
<Clock />
<Clock2 />
<button onClick={() => setTracker(!tracker)}>Показать/Скрыть трекер</button>
{ tracker && <MouseTracker /> }
<button onClick={() => setDataFetcher(!dataFetcher)}>Показать/Скрыть посты</button>
{ dataFetcher && <DataFetcher /> }
</>
)
}
+11
View File
@@ -0,0 +1,11 @@
.container {
width: 300px;
height: 200px;
border: 2px dashed grey;
margin: 10px;
text-align: center;
p {
margin-top: 20%;
}
}
-9
View File
@@ -1,9 +0,0 @@
export function MyComponent() {
return (
<>
<h1>About Page</h1>
</>
)
}
export default MyComponent
-9
View File
@@ -1,9 +0,0 @@
export function MyComponent() {
return (
<>
<h1>Admin Page</h1>
</>
)
}
export default MyComponent
-9
View File
@@ -1,9 +0,0 @@
export function MyComponent() {
return (
<>
<h1>Contact Page</h1>
</>
)
}
export default MyComponent
-9
View File
@@ -1,9 +0,0 @@
export function MyComponent() {
return (
<>
<h1>Home Page</h1>
</>
)
}
export default MyComponent