From db97e67a2e23374fe64b9c4dde1c0c247e8ab7b0 Mon Sep 17 00:00:00 2001 From: Masatoshi Date: Mon, 22 Mar 2021 22:05:48 +0900 Subject: [PATCH 1/7] first_point_cleared --- hooks/src/App.js | 26 ++++++++++------- hooks/src/components/ClassCounterOne.js | 38 +++++++++++++++++++++++++ hooks/src/components/ClassMouse.js | 34 ++++++++++++++++++++++ hooks/src/components/HookCounterOne.js | 19 +++++++++++++ hooks/src/components/HookMouse.js | 30 +++++++++++++++++++ hooks/src/components/MouseContainer.js | 15 ++++++++++ 6 files changed, 152 insertions(+), 10 deletions(-) create mode 100644 hooks/src/components/ClassCounterOne.js create mode 100644 hooks/src/components/ClassMouse.js create mode 100644 hooks/src/components/HookCounterOne.js create mode 100644 hooks/src/components/HookMouse.js create mode 100644 hooks/src/components/MouseContainer.js diff --git a/hooks/src/App.js b/hooks/src/App.js index 50e4dd5..04d8a97 100644 --- a/hooks/src/App.js +++ b/hooks/src/App.js @@ -1,15 +1,21 @@ import React from 'react' -import './App.css'; -import ClassCounter from "./components/ClassCounter"; -import HookCounter from "./components/HookCounter"; +import './App.css' +import ClassCounterOne from "./components/ClassCounterOne"; +import HookCounterOne from "./components/HookCounterOne"; +import ClassMouse from "./components/ClassMouse"; +import HookMouse from "./components/HookMouse"; +import MouseContainer from "./components/MouseContainer"; function App() { - return ( -
- {/**/} - -
- ); + return ( +
+ {/**/} + {/**/} + {/**/} + {/**/} + +
+ ) } -export default App; +export default App \ No newline at end of file diff --git a/hooks/src/components/ClassCounterOne.js b/hooks/src/components/ClassCounterOne.js new file mode 100644 index 0000000..8b71a54 --- /dev/null +++ b/hooks/src/components/ClassCounterOne.js @@ -0,0 +1,38 @@ +import React, { Component } from 'react' + +class ClassCounterOne extends Component{ + constructor(props) { + super(props) + this.state = { + count: 0, + name: '' + } + } + + componentDidMount() { + document.title = `Clicked ${this.state.count} times` + } + + componentDidUpdate(prevProps, prevState) { + if(prevState.count !== this.state.count) { + console.log('Updating document title') + document.title = `Clicked ${this.state.count} times` + } + } + + render() { + return ( +
+ { + this.setState({name: e.target.value}) + }}/> + +
+ ) + } +} + +export default ClassCounterOne \ No newline at end of file diff --git a/hooks/src/components/ClassMouse.js b/hooks/src/components/ClassMouse.js new file mode 100644 index 0000000..09d6009 --- /dev/null +++ b/hooks/src/components/ClassMouse.js @@ -0,0 +1,34 @@ +import React, { Component } from 'react' + +class ClassMouse extends Component{ + constructor(props) { + super(props) + + this.state = { + x: 0, + y: 0 + } + } + + logMousePosition = e => { + this.setState({x: e.clientX, y: e.clientY}) + } + + componentDidMount() { + window.addEventListener('mousemove', this.logMousePosition) + } + + componentWillUnmount() { + window.removeEventListener('mousemove',this.logMousePosition) + } + + render() { + return( +
+ X - {this.state.x} Y - {this.state.y} +
+ ) + } +} + +export default ClassMouse \ No newline at end of file diff --git a/hooks/src/components/HookCounterOne.js b/hooks/src/components/HookCounterOne.js new file mode 100644 index 0000000..d8a08b2 --- /dev/null +++ b/hooks/src/components/HookCounterOne.js @@ -0,0 +1,19 @@ +import React, {useState,useEffect} from 'react' + +function HookCounterOne() { + const [count, setCount] = useState(0) + const [name,setName] = useState('') + useEffect(() => { + console.log('useEffect - Updating docment title') + document.title = `Your clicked ${count} times.` + }, [count]) + return( +
+ setName(e.target.value)}/> + +
+ ) + +} + +export default HookCounterOne \ No newline at end of file diff --git a/hooks/src/components/HookMouse.js b/hooks/src/components/HookMouse.js new file mode 100644 index 0000000..290d859 --- /dev/null +++ b/hooks/src/components/HookMouse.js @@ -0,0 +1,30 @@ +import React, {useState,useEffect} from 'react' + +function HookMouse() { + const [x,setX] = useState(0) + const [y,setY] = useState(0) + + const logMousePosition = e => { + console.log('Mouse event') + setX(e.clientX) + setY(e.clientY) + } + + useEffect(() => { + console.log('useEffect called') + window.addEventListener('mousemove',logMousePosition) + + return () => { + console.log('Component unmounting code') + window.removeEventListener('mousesove',logMousePosition) + } + }, []) + + return( +
+ Hooks X - {x} Y - {y} +
+ ) +} + +export default HookMouse \ No newline at end of file diff --git a/hooks/src/components/MouseContainer.js b/hooks/src/components/MouseContainer.js new file mode 100644 index 0000000..18d22dd --- /dev/null +++ b/hooks/src/components/MouseContainer.js @@ -0,0 +1,15 @@ +import React,{useState} from 'react' +import HookMouse from "./HookMouse"; + +function MouseContainer() { + const [display,setDisplay] = useState(true) + return( +
+ + {display && } +
+ + ) +} + +export default MouseContainer \ No newline at end of file From a0d3bef9482a29b901d419e1ddf96d74c4f31c55 Mon Sep 17 00:00:00 2001 From: Masatoshi Date: Sun, 28 Mar 2021 20:08:54 +0900 Subject: [PATCH 2/7] useEffect_learned --- hooks/src/App.js | 6 +++- hooks/src/components/IntervalClassCounter.js | 30 ++++++++++++++++++++ hooks/src/components/IntervalHookCounter.js | 29 +++++++++++++++++++ 3 files changed, 64 insertions(+), 1 deletion(-) create mode 100644 hooks/src/components/IntervalClassCounter.js create mode 100644 hooks/src/components/IntervalHookCounter.js diff --git a/hooks/src/App.js b/hooks/src/App.js index 04d8a97..61cea47 100644 --- a/hooks/src/App.js +++ b/hooks/src/App.js @@ -5,6 +5,8 @@ import HookCounterOne from "./components/HookCounterOne"; import ClassMouse from "./components/ClassMouse"; import HookMouse from "./components/HookMouse"; import MouseContainer from "./components/MouseContainer"; +import IntervalClassCounter from "./components/IntervalClassCounter"; +import IntervalHookCounter from "./components/IntervalHookCounter"; function App() { return ( @@ -13,7 +15,9 @@ function App() { {/**/} {/**/} {/**/} - + {/**/} + + ) } diff --git a/hooks/src/components/IntervalClassCounter.js b/hooks/src/components/IntervalClassCounter.js new file mode 100644 index 0000000..2605518 --- /dev/null +++ b/hooks/src/components/IntervalClassCounter.js @@ -0,0 +1,30 @@ +import React, { Component } from 'react' + +class IntervalClassCounter extends Component { + constructor(props){ + super(props) + this.state = { + count: 0 + } + } + + componentDidMount() { + this.interval = setInterval(this.tick,1000) + } + + componentWillUnmount() { + clearInterval(this.interval) + } + + tick = () => { + this.setState({ + count: this.state.count + 1 + }) + } + + render() { + return

{this.state.count}

+ } +} + +export default IntervalClassCounter \ No newline at end of file diff --git a/hooks/src/components/IntervalHookCounter.js b/hooks/src/components/IntervalHookCounter.js new file mode 100644 index 0000000..f524f57 --- /dev/null +++ b/hooks/src/components/IntervalHookCounter.js @@ -0,0 +1,29 @@ +import React,{useState,useEffect} from 'react' + + function IntervalHookCounter() { + const [count,setCount] =useState(0) + const tick = () => { + setCount(prevCount=>prevCount + 1) + } + + + useEffect(() => { + function doSomething() { + + } + doSomething() + const interval = setInterval(tick,1000) + return() => { + clearInterval(interval) + } + }) + + return( +
+ {count} +
+ ) + + } + + export default IntervalHookCounter \ No newline at end of file From 9c3759f8190922fe489d1b70efdbc6ea44659a14 Mon Sep 17 00:00:00 2001 From: Masatoshi Date: Fri, 17 Sep 2021 16:04:09 +0900 Subject: [PATCH 3/7] useEffect_presentation_add --- hooks/src/App.js | 6 +++--- hooks/src/components/ClassCounterOne.js | 9 +++++++-- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/hooks/src/App.js b/hooks/src/App.js index 61cea47..da56216 100644 --- a/hooks/src/App.js +++ b/hooks/src/App.js @@ -11,13 +11,13 @@ import IntervalHookCounter from "./components/IntervalHookCounter"; function App() { return (
- {/**/} + {/**/} {/**/} {/**/} {/**/} - - + {/**/} + {/**/}
) } diff --git a/hooks/src/components/ClassCounterOne.js b/hooks/src/components/ClassCounterOne.js index 8b71a54..a8026cb 100644 --- a/hooks/src/components/ClassCounterOne.js +++ b/hooks/src/components/ClassCounterOne.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React, {Component, useEffect} from 'react' class ClassCounterOne extends Component{ constructor(props) { @@ -35,4 +35,9 @@ class ClassCounterOne extends Component{ } } -export default ClassCounterOne \ No newline at end of file +export default ClassCounterOne + +// useEffect()を利用することで、関数の呼び出しを行うことができる。(簡単に言うと、レンダー前とレンダー後とで同じコード +// を二度書かずに済む。上記の例で言うなら{document.title = `Clicked ${this.state.count} times`}に該当する). +// **因みにClassCounterOneとHookCounterOneファイルは全く同じ内容のものとなっている。 +// またuseEffectに関しては、毎度レンダー後に呼ばれる為、心配ご無用。(DOMの構成自体にこれと言った影響はないと思われる) \ No newline at end of file From 8e6a7b644254832285e2305f74bfe7e415c6cda6 Mon Sep 17 00:00:00 2001 From: Masatoshi Date: Fri, 17 Sep 2021 19:27:06 +0900 Subject: [PATCH 4/7] useEffect_compiled_again --- hooks/src/App.js | 4 ++-- hooks/src/components/HookMouse.js | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/hooks/src/App.js b/hooks/src/App.js index da56216..06ae923 100644 --- a/hooks/src/App.js +++ b/hooks/src/App.js @@ -11,11 +11,11 @@ import IntervalHookCounter from "./components/IntervalHookCounter"; function App() { return (
- + {/**/} {/**/} {/**/} {/**/} - {/**/} + {/**/} {/**/}
diff --git a/hooks/src/components/HookMouse.js b/hooks/src/components/HookMouse.js index 290d859..8b73229 100644 --- a/hooks/src/components/HookMouse.js +++ b/hooks/src/components/HookMouse.js @@ -27,4 +27,6 @@ function HookMouse() { ) } -export default HookMouse \ No newline at end of file +export default HookMouse + +// useStateを変数にて利用したい場合、必ずベースとなる変数をその変数にsetをつけた二つの変数を必ず用いること。(ex x setX) \ No newline at end of file From b16bb78bc10cb7d69f7b9fdd0c587f75e7be31e5 Mon Sep 17 00:00:00 2001 From: Masatoshi Date: Thu, 23 Sep 2021 23:17:34 +0900 Subject: [PATCH 5/7] useEffect_Event_remove --- hooks/src/components/HookMouse.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/hooks/src/components/HookMouse.js b/hooks/src/components/HookMouse.js index 8b73229..e35399b 100644 --- a/hooks/src/components/HookMouse.js +++ b/hooks/src/components/HookMouse.js @@ -16,7 +16,7 @@ function HookMouse() { return () => { console.log('Component unmounting code') - window.removeEventListener('mousesove',logMousePosition) + window.removeEventListener('mousemove',logMousePosition) } }, []) @@ -29,4 +29,6 @@ function HookMouse() { export default HookMouse -// useStateを変数にて利用したい場合、必ずベースとなる変数をその変数にsetをつけた二つの変数を必ず用いること。(ex x setX) \ No newline at end of file +// useStateを変数にて利用したい場合、必ずベースとなる変数をその変数にsetをつけた二つの変数を必ず用いること。(ex x setX) +// また、useEffect内ではイベントの着火に伴い、そのイベントのケツを持たせないと永遠にイベントがはっせいしてしまう可能性があるから、 +// return内でそのイベントの終了を表している。 \ No newline at end of file From dbebb466171a07c1b6984c6773b16aa3a24412e5 Mon Sep 17 00:00:00 2001 From: Masatoshi Date: Fri, 24 Sep 2021 09:44:56 +0900 Subject: [PATCH 6/7] IntervalHook_content_add --- hooks/src/App.js | 6 +++--- hooks/src/components/IntervalHookCounter.js | 9 ++++++--- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/hooks/src/App.js b/hooks/src/App.js index 06ae923..61cea47 100644 --- a/hooks/src/App.js +++ b/hooks/src/App.js @@ -15,9 +15,9 @@ function App() { {/**/} {/**/} {/**/} - - {/**/} - {/**/} + {/**/} + + ) } diff --git a/hooks/src/components/IntervalHookCounter.js b/hooks/src/components/IntervalHookCounter.js index f524f57..ff9f782 100644 --- a/hooks/src/components/IntervalHookCounter.js +++ b/hooks/src/components/IntervalHookCounter.js @@ -2,8 +2,9 @@ import React,{useState,useEffect} from 'react' function IntervalHookCounter() { const [count,setCount] =useState(0) + const tick = () => { - setCount(prevCount=>prevCount + 1) + setCount(count + 1) } @@ -16,7 +17,7 @@ import React,{useState,useEffect} from 'react' return() => { clearInterval(interval) } - }) + },) return(
@@ -26,4 +27,6 @@ import React,{useState,useEffect} from 'react' } - export default IntervalHookCounter \ No newline at end of file + export default IntervalHookCounter + +//カウンターの道理はまだ理解出来ていない(9/23現在)為、使うことがあったら再度戻っての復習を行う。 \ No newline at end of file From d93cb19068f95959054e2448cc199e9ccb2a6b95 Mon Sep 17 00:00:00 2001 From: Masatoshi Date: Fri, 24 Sep 2021 15:25:51 +0900 Subject: [PATCH 7/7] Unnecessary_file_delete --- hooks/src/App.js | 10 ------ hooks/src/components/ClassCounter.js | 28 ---------------- hooks/src/components/ClassCounterOne.js | 43 ------------------------- hooks/src/components/ClassMouse.js | 34 ------------------- hooks/src/components/HookCounter.js | 16 --------- hooks/src/components/HookCounterOne.js | 19 ----------- hooks/src/components/HookMouse.js | 34 ------------------- hooks/src/components/MouseContainer.js | 15 --------- 8 files changed, 199 deletions(-) delete mode 100644 hooks/src/components/ClassCounter.js delete mode 100644 hooks/src/components/ClassCounterOne.js delete mode 100644 hooks/src/components/ClassMouse.js delete mode 100644 hooks/src/components/HookCounter.js delete mode 100644 hooks/src/components/HookCounterOne.js delete mode 100644 hooks/src/components/HookMouse.js delete mode 100644 hooks/src/components/MouseContainer.js diff --git a/hooks/src/App.js b/hooks/src/App.js index 61cea47..9d58f5c 100644 --- a/hooks/src/App.js +++ b/hooks/src/App.js @@ -1,21 +1,11 @@ import React from 'react' import './App.css' -import ClassCounterOne from "./components/ClassCounterOne"; -import HookCounterOne from "./components/HookCounterOne"; -import ClassMouse from "./components/ClassMouse"; -import HookMouse from "./components/HookMouse"; -import MouseContainer from "./components/MouseContainer"; import IntervalClassCounter from "./components/IntervalClassCounter"; import IntervalHookCounter from "./components/IntervalHookCounter"; function App() { return (
- {/**/} - {/**/} - {/**/} - {/**/} - {/**/}
diff --git a/hooks/src/components/ClassCounter.js b/hooks/src/components/ClassCounter.js deleted file mode 100644 index a353fd9..0000000 --- a/hooks/src/components/ClassCounter.js +++ /dev/null @@ -1,28 +0,0 @@ -import React, { Component } from 'react' - -class ClassCounter extends Component { - constructor(props) { - super(props) - - this.state = { - count: 0 - } - } - - incrementCount = () => { - this.setState({ - count: this.state.count + 1 - }) - } - - - render() { - return ( -
- -
- ) - } -} - -export default ClassCounter; \ No newline at end of file diff --git a/hooks/src/components/ClassCounterOne.js b/hooks/src/components/ClassCounterOne.js deleted file mode 100644 index a8026cb..0000000 --- a/hooks/src/components/ClassCounterOne.js +++ /dev/null @@ -1,43 +0,0 @@ -import React, {Component, useEffect} from 'react' - -class ClassCounterOne extends Component{ - constructor(props) { - super(props) - this.state = { - count: 0, - name: '' - } - } - - componentDidMount() { - document.title = `Clicked ${this.state.count} times` - } - - componentDidUpdate(prevProps, prevState) { - if(prevState.count !== this.state.count) { - console.log('Updating document title') - document.title = `Clicked ${this.state.count} times` - } - } - - render() { - return ( -
- { - this.setState({name: e.target.value}) - }}/> - -
- ) - } -} - -export default ClassCounterOne - -// useEffect()を利用することで、関数の呼び出しを行うことができる。(簡単に言うと、レンダー前とレンダー後とで同じコード -// を二度書かずに済む。上記の例で言うなら{document.title = `Clicked ${this.state.count} times`}に該当する). -// **因みにClassCounterOneとHookCounterOneファイルは全く同じ内容のものとなっている。 -// またuseEffectに関しては、毎度レンダー後に呼ばれる為、心配ご無用。(DOMの構成自体にこれと言った影響はないと思われる) \ No newline at end of file diff --git a/hooks/src/components/ClassMouse.js b/hooks/src/components/ClassMouse.js deleted file mode 100644 index 09d6009..0000000 --- a/hooks/src/components/ClassMouse.js +++ /dev/null @@ -1,34 +0,0 @@ -import React, { Component } from 'react' - -class ClassMouse extends Component{ - constructor(props) { - super(props) - - this.state = { - x: 0, - y: 0 - } - } - - logMousePosition = e => { - this.setState({x: e.clientX, y: e.clientY}) - } - - componentDidMount() { - window.addEventListener('mousemove', this.logMousePosition) - } - - componentWillUnmount() { - window.removeEventListener('mousemove',this.logMousePosition) - } - - render() { - return( -
- X - {this.state.x} Y - {this.state.y} -
- ) - } -} - -export default ClassMouse \ No newline at end of file diff --git a/hooks/src/components/HookCounter.js b/hooks/src/components/HookCounter.js deleted file mode 100644 index 2e36adb..0000000 --- a/hooks/src/components/HookCounter.js +++ /dev/null @@ -1,16 +0,0 @@ -import React, {useState} from 'react' - -function HookCounter() { - - const [count, setCount]= useState(0) - // #カウントで0にセットをし、setCounteにてカウントを開始する - - - return( -
- -
- ) -} - -export default HookCounter \ No newline at end of file diff --git a/hooks/src/components/HookCounterOne.js b/hooks/src/components/HookCounterOne.js deleted file mode 100644 index d8a08b2..0000000 --- a/hooks/src/components/HookCounterOne.js +++ /dev/null @@ -1,19 +0,0 @@ -import React, {useState,useEffect} from 'react' - -function HookCounterOne() { - const [count, setCount] = useState(0) - const [name,setName] = useState('') - useEffect(() => { - console.log('useEffect - Updating docment title') - document.title = `Your clicked ${count} times.` - }, [count]) - return( -
- setName(e.target.value)}/> - -
- ) - -} - -export default HookCounterOne \ No newline at end of file diff --git a/hooks/src/components/HookMouse.js b/hooks/src/components/HookMouse.js deleted file mode 100644 index e35399b..0000000 --- a/hooks/src/components/HookMouse.js +++ /dev/null @@ -1,34 +0,0 @@ -import React, {useState,useEffect} from 'react' - -function HookMouse() { - const [x,setX] = useState(0) - const [y,setY] = useState(0) - - const logMousePosition = e => { - console.log('Mouse event') - setX(e.clientX) - setY(e.clientY) - } - - useEffect(() => { - console.log('useEffect called') - window.addEventListener('mousemove',logMousePosition) - - return () => { - console.log('Component unmounting code') - window.removeEventListener('mousemove',logMousePosition) - } - }, []) - - return( -
- Hooks X - {x} Y - {y} -
- ) -} - -export default HookMouse - -// useStateを変数にて利用したい場合、必ずベースとなる変数をその変数にsetをつけた二つの変数を必ず用いること。(ex x setX) -// また、useEffect内ではイベントの着火に伴い、そのイベントのケツを持たせないと永遠にイベントがはっせいしてしまう可能性があるから、 -// return内でそのイベントの終了を表している。 \ No newline at end of file diff --git a/hooks/src/components/MouseContainer.js b/hooks/src/components/MouseContainer.js deleted file mode 100644 index 18d22dd..0000000 --- a/hooks/src/components/MouseContainer.js +++ /dev/null @@ -1,15 +0,0 @@ -import React,{useState} from 'react' -import HookMouse from "./HookMouse"; - -function MouseContainer() { - const [display,setDisplay] = useState(true) - return( -
- - {display && } -
- - ) -} - -export default MouseContainer \ No newline at end of file