Compare commits

...

3 Commits

2 changed files with 51 additions and 5 deletions
+51 -3
View File
@@ -1,10 +1,58 @@
// удаляем все, оставляя лишь пустую функцию App ниже
import React from 'react'
class RandomUser extends React.Component {
constructor(props) {
super(props)
this.state = { user: {} }
}
componentDidMount() {
fetch('https://randomuser.me/api')
.then(responce => responce.json())
.then(json => this.setState({ user: json.results[0] }));
console.log('смонтирован')
}
componentDidUpdate(prevProps,prevState) {
console.log(this.state);
console.log('Компонент обнвлен')
}
componentWillUnmount() {
console.log('Компонент таймера размонтирован')
}
render() {
return <div>
{this.state.user &&
this.state.user.name &&
(
<>
<h2>{this.state.user.name.first} {this.state.user.name.last}</h2>
<img src={this.state.user.picture.medium} />
<button onClick={() => {
console.log('Загружаем ... ')
fetch('https://randomuser.me/api')
.then(responce => responce.json())
.then(json => this.setState({ user: json.results[0] }));
}}>Загрузить нового</button>
</>
)
}
</div>
}
}
function App() {
const [showClock, setShowClock] = React.useState(true);
return (
<>
{/* Добавьте тестовый контент для проверки */}
<h1>Hello, React!</h1>
<h1>Домашнее задание: жизненый цикл</h1>
<button onClick={()=> setShowClock(!showClock)}>
{showClock ? 'Скрыть часы' : 'Показать часы' }
</button>
{showClock && <RandomUser />}
</>
)
}
-2
View File
@@ -4,7 +4,5 @@ import { createRoot } from 'react-dom/client'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>
)