import {VK} from "vk"
const Component = () => {
const vkRef = useRef(null);
useEffect(() => {
if (vkRef.current) {
VK.Widgets.Group(vkRef.current, {mode: 0, width: "220", height: "400"}, 1);
}
}, [vkRef])
return <div ref={vkRef}></div>
}<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.12/sass.sync.min.js"></script>
<style type="scss">
@mixin l2d($color,$strength){
background:linear-gradient(lighten($color,$strength),darken($color,$strength));
&:active{
background:linear-gradient(darken($color,$strength),lighten($color,$strength));
}
}
body{
@include l2d(#aa2424,10%);
min-height:100vh;
}
#hello{
margin:auto auto auto auto;
width:96vw;
user-select:none;
&:after{
content:" ";
}
}
</style>
<script>
Sass.compile(document.querySelector("style[type=scss]").innerHTML,function(res){
var s=document.createElement("style");
s.innerHTML=res.text;
res.formatted&&console.error(res.formatted); //if error console.error it.
res.text&&document.head.appendChild(s);// append style element only if no error.
});
</script>
</head>
<body>
<h1 id="hello">Hello, this is styled using SCSS.</h1>
</body>
</html><link rel="stylesheet" type="scss" href="style.scss">const [list, setItem] = useState([]);
const keys = LocalStKeys();
let tasks = [];
for (let taskText of keys) {
let ob = {text: taskText, key: Date.now()};
tasks.push(ob);
}
setItem(tasks)
console.log(list)<Routes>
<Route path='/' element={<MainPage />} />
<Route path='/classical' element={<Classical />}>
<Route index element={<January />} />
<Route path='january' element={<January />} />
</Route>
<Route path='/page_2' element={<Page2 />} />
<Route path='/page_3' element={<Page3 />} />
<Route path='*' element={<Error404Page />} />
</Routes>import { Outlet } from 'react-router-dom';
export const ClassicalPage = () => {
return (
<div>
<Outlet />
</div>
);
};export const JanuaryPage = () => {
return (
<div>
Содержимое страницы
</div>
);
};<head> или перед</body> html документа. Этот подход даст единообразие подключения скриптов, а также все скрипты будут в одном месте. Если необходимо подключение библиотеки, вероятно, лучше воспользоваться map зависимостей в сборщике приложения. В некоторых сборщиках имеется возможность импорта напрямую по URL в файл содержащий компонент. Вы также можете написать свой метод для подключения скриптов.
<FormikTextField formik={formik} name={nickname} label="Nick Name" />export default function FormikTextField({formik, name, label}) {
return (
<TextField
name={name}
required
id={name}
label={label}
sx={{width:1}}
value={formik.values[name]}
onChange={formik.handleChange}
error={formik.touched[name] && Boolean(formik.errors[name])}
helperText={formik.touched[name] && formik.errors[name]}
/>
);
}<picture>
<source
media="(max-width: 480px)"
srcset="
cropped-bears-480x270.jpg 480w,
cropped-bears-960x540.jpg 960w
"
/>
<source
media="(max-width: 960px)"
srcset="bears-960x540.jpg 960w, bears-1920x1080.jpg 1920w"
/>
<img src="bears-1920x1080.jpg" alt="bears" />
</picture>