add counter

src/App.js

@@ -1,26 +1,71 @@
 import React, { Component } from "react";
 
-import Layuot from "./layout";
-import Header from "./header";
-import HideBlock from "./hideBlock";
-import Button from "./button";
+import Counter from "./counter";
 
-export class App extends Component {
-	state = { showBlock: false };
+export default class App extends Component {
+	constructor(props) {
+		super(props);
+		console.log("constructor");
+		this.state = {
+			counter: 0,
+			id: null,
+			time: new Date().toLocaleTimeString(),
+			random: 0
+		};
+	}
+
+	tick = () => this.setState({ time: new Date().toLocaleTimeString() });
+
+	UNSAFE_componentWillMount() {
+		console.log("componentWillMount");
+	}
+
+	static getDerivedStateFromProps(nextProps, prevState) {
+		console.log("getDerivedStateFromProps");
+		return null;
+	}
+
+	async componentDidMount() {
+		console.log("componentDidMount");
+
+		const id = setInterval(this.tick, 1000);
+		console.log("id", id);
+		this.setState({ id });
+	}
+
+	componentWillUnmount() {
+		console.log("componentWillUnmount");
+		clearInterval(this.state.id);
+	}
+
+	shouldComponentUpdate(nextProps, nextState, nextContext) {
+		console.log("shouldComponentUpdate");
+		return true;
+	}
+
+	getSnapshotBeforeUpdate(prevProps, prevState) {
+		console.log("getSnapshotBeforeUpdate");
+		return null;
+	}
+
+	async componentDidUpdate(prevProps, prevState, snapshot) {
+		console.log("componentDidUpdate");
+	}
+
+	inc = () => this.setState(prevState => ({ counter: prevState.counter + 1 }));
+	dec = () => this.setState(prevState => ({ counter: prevState.counter - 1 }));
 
-	handler = () => this.setState(prevState => ({ showBlock: !prevState.showBlock }));
+	random = () => this.setState({ random: Math.floor(Math.random() * 10 + 1) });
 
 	render() {
-		const { showBlock } = this.state;
-		// return (
-		// 	<div className="container">
-		// 		<Header toggle={this.handler} />
-		// 		{showBlock && <HideBlock />}
+		return (
+			<div>
+				<button onClick={this.random}>Random</button>
 
-		// 		<Button text={!showBlock ? "show" : "hide"} onClick={this.handler} />
-		// 	</div>
-		// );
+				<Counter counter={this.state.counter} inc={this.inc} dec={this.dec} random={this.state.random} />
 
-		return <Layuot footer>{showBlock && <HideBlock />}</Layuot>;
+				<h1>Date now {this.state.time}</h1>
+			</div>
+		);
 	}
 }

src/counter.js

@@ -0,0 +1,28 @@
+import React, { Component } from "react";
+
+export default class Counter extends Component {
+	componentDidMount() {
+		console.log("componentDidMount child");
+	}
+
+	shouldComponentUpdate(nextProps) {
+		if (nextProps.random === 10) {
+			console.log("BOOOM");
+
+			return false;
+		}
+
+		return true;
+	}
+
+	render() {
+		const { counter, inc, dec } = this.props;
+		return (
+			<div>
+				<button onClick={inc}>in-crease</button>
+				<button onClick={dec}>de-crease</button>
+				<span>{counter}</span>
+			</div>
+		);
+	}
+}

src/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-import { App } from "./App";
+import App from "./App";
 import * as serviceWorker from "./serviceWorker";
 
 import "./style.scss";