Compare commits

..

3 Commits

4 changed files with 82 additions and 86 deletions
+1 -69
View File
@@ -9,9 +9,7 @@
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"react": "^19.1.0", "react": "^19.1.0",
"react-dom": "^19.1.0", "react-dom": "^19.1.0"
"react-error-boundary": "^6.1.2",
"react-router-dom": "^7.17.0"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.25.0", "@eslint/js": "^9.25.0",
@@ -1602,19 +1600,6 @@
"dev": true, "dev": true,
"license": "MIT" "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": { "node_modules/cross-spawn": {
"version": "7.0.6", "version": "7.0.6",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2476,15 +2461,6 @@
"react": "^19.1.0" "react": "^19.1.0"
} }
}, },
"node_modules/react-error-boundary": {
"version": "6.1.2",
"resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-6.1.2.tgz",
"integrity": "sha512-3DpCr5HVdZ0caUjYE/kIHBEJN0mNP3ZCgf16c48uJ5TbWjorKVp+YG8W3XqlJ7vJAVNw6wNIImyPXmFydwmyng==",
"license": "MIT",
"peerDependencies": {
"react": "^18.0.0 || ^19.0.0"
}
},
"node_modules/react-refresh": { "node_modules/react-refresh": {
"version": "0.17.0", "version": "0.17.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -2495,44 +2471,6 @@
"node": ">=0.10.0" "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": { "node_modules/resolve-from": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -2606,12 +2544,6 @@
"semver": "bin/semver.js" "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": { "node_modules/shebang-command": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+1 -3
View File
@@ -11,9 +11,7 @@
}, },
"dependencies": { "dependencies": {
"react": "^19.1.0", "react": "^19.1.0",
"react-dom": "^19.1.0", "react-dom": "^19.1.0"
"react-error-boundary": "^6.1.2",
"react-router-dom": "^7.17.0"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.25.0", "@eslint/js": "^9.25.0",
+64 -11
View File
@@ -1,25 +1,78 @@
import { Suspense, lazy } from 'react' import { useState, createContext, useContext } from 'react'
import { ErrorBoundary } from 'react-error-boundary' import styles from './App.module.scss'
const LazyComponent = lazy(() => import('./MyComponent')) const UserContext = createContext('')
function ErrorFallBack({error, resetErrorBoundary }) { function UserProvider({ children }) {
const [name,setName] = useState('');
const toggleName = (newName) => {
setName(newName);
}
return (
<UserContext.Provider value={{name, toggleName}}>
{children}
</UserContext.Provider>
)
}
function Form() {
const {name, toggleName} = useContext(UserContext)
const [newName,setNewName] = useState('');
const handleSubmit = (event) => {
event.preventDefault();
toggleName(event.target[0].value)
}
const handlerChange = (event) => {
setNewName(event.target.value);
}
return (
<form onSubmit={handleSubmit}>
<input type='text' value={newName} onChange={handlerChange} />
<button type='submit'>Войти</button>
</form>
)
}
function ExitButton() {
const {name, toggleName} = useContext(UserContext)
return (
<button onClick={() => toggleName('')}>Выход</button>
)
}
function Toolbar() {
const {name, toggleName} = useContext(UserContext)
return(
<div className={styles.container}>
<h3>Панель пользователя</h3>
{name && `Привет ${name}`}
{name ? <ExitButton /> : <Form /> }
</div>
)
}
function Page() {
return ( return (
<div> <div>
<h2>Что то сломалось</h2> <h1 style={{textAlign: 'center'}}>Главная страница</h1>
<button onClick={resetErrorBoundary}></button> <Toolbar />
</div> </div>
) )
} }
function App() { function App() {
return ( return (
<> <>
<ErrorBoundary FallBackComponent={ErrorFallBack}> {/* Добавьте тестовый контент для проверки */}
<Suspense fallback={<div>Загрузка ...</div>}> <h1>Hello, React!</h1>
<LazyComponent /> <UserProvider>
</Suspense> <Page />
</ErrorBoundary> </UserProvider>
</> </>
) )
} }
+13
View File
@@ -0,0 +1,13 @@
.container {
height: 500px;
border: 1px solid black;
border-radius: 10px;
background-color: lightblue;
}
.item {
font-size: 16pt;
border: 1px dotted gray;
/*margin: 5px 10px;
padding: 10px;*/
border-radius: 5px;
}