diff --git a/src/App.jsx b/src/App.jsx index 6bf3ac6..a8a2f15 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,98 @@ -// удаляем все, оставляя лишь пустую функцию App ниже +import { useState, useRef, useEffect } from 'react' +function Example() { + const myRef = useRef(null); + const counterRef = useRef(0); + const [text, setText] = useState(''); + + useEffect(() => { + myRef.current?.focus(); + },[]); + + const handlerFocus = () => { + if(myRef.current) { + myRef.current.focus(); + } + }; + + const handlerChange = (event) => { + setText(event.target.value); + } + counterRef.current += 1; + return
+
+ Количество рендров: {counterRef.current}
+ + +
+} + +function ClickCounter() { + const countRef = useRef(0); + + function handlerClick() { + countRef.current += 1; + //alert(`Нажали ${countRef.current} раз.`); + } + return ; +} + +function TimerComponent() { + const timerIdRef = useRef(null); + + useEffect(() => { + timerIdRef.current = setTimeout(() => { + alert("Прошло 3 секунды"); + }, 3000); + return () => { + clearTimeout(timerIdRef.current); + } + },[]); +} + +function PrevValue({ value }) { + const prevValueRef = useRef(); + + useEffect(() => { + prevValueRef.current = value; + }); + return ( +
+ Текущее значение: {value}
+ Предыдущее значение: {prevValueRef.current} +
+ ) +} + +function ScrollList() { + const listRef = useRef(null); + + const scrollToBottom = () => { + if(listRef.current) { + listRef.current.scrollTop = listRef.current.scrollHeight; + } + } + + return ( + <> +
+ {[...Array(20)].map((_,i)=>( +
Элемент № {i + 1}
+ ))} +
+ + + ) +} + function App() { + + return ( <> - {/* Добавьте тестовый контент для проверки */}

Hello, React!

+ ) } diff --git a/src/main.jsx b/src/main.jsx index 950e96a..7e925e8 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -4,7 +4,5 @@ import { createRoot } from 'react-dom/client' import App from './App.jsx' createRoot(document.getElementById('root')).render( - - )