zigzagdev · zigzagdev · Jan 22, 2021 · Jan 25, 2021 · Jan 26, 2021 · Jan 27, 2021
diff --git a/.eslintcache b/.eslintcache
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/.idea/untitled1.iml b/.idea/untitled1.iml
diff --git a/public/index.html b/public/index.html
@@ -29,6 +29,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="modal-root"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/App.js b/src/App.js
@@ -1,17 +1,102 @@
 import React, { Component } from 'react'
 import './App.css'
+// eslint-disable-next-line
 import Greet from './components/Greet'
+// eslint-disable-next-line
 import Welcome from "./components/Welcome";
+import RefsDemo from "./components/RefsDemo";
+import FocusInput from "./components/FocusInput";
+import FRInput from "./components/FRInput";
+import FRParentInput from "./components/FRParentInput";
+// import Hero from "./components/Hero";
+// import ErrorBoundary from "./components/ErrorBoundary";
+import ClickCounter from "./components/ClickCounter";
+import HoverCounter from "./components/HoverCounter";
+import ClickCounterTwo from "./components/ClickCounterTwo";
+import HoverCounterTwo from "./components/HoverCounterTwo";
+import User from "./components/User";
+import Counter from "./components/Counter";
+// import PortalDemp from "./components/PortalDemo";
+// eslint-disable-next-line
+// import Message from "./components/Message";
+// import Function from "./components/Function";
+// import ClassClick from "./components/ClassClick";
+// import  BindingHandler from "./components/BindingHandler"
+import Parent from "./components/Parent";
+import Children from "./components/Children";
+// import UserGreeting from "./components/UserGreeting";
+// import NameList from "./components/NameList";
+// import Stylesheet from "./components/Stylesheet";
+// import Inline from "./components/Inline";
+// import './appStyles.css';
+// import styles from  './appStyles.module.css'
+// import Form from "./components/Form";
+// import LifecycleA from "./components/LifecycleA";
+// import LifecycleB from "./components/LifecycleB";
+// import FragmentDemo from "./components/FragmentDemo";
+// import Table from "./components/Table";
+// import Columns from "./components/Columns";
+// import PureComp from "./components/PureComp";
 
-class App extends Component{
+
+class App extends Component {
     render() {
-      return(
-       <div className="App">
-         <Greet/>
-         <Welcome/>
-       </div>
-      );
+        return (
+            <div className="App">
+                {/*<Counter>*/}
+                {/*    {(count,incrementCount) => (*/}
+                {/*      <ClickCounterTwo count={count} incrementCount={incrementCount} />*/}
+                {/*    )}*/}
+                {/*</Counter>*/}
+                {/*<User render={ (isLoggedIn) => isLoggedIn ? 'Buffon': 'Guest'}/>*/}
+                {/*<ClickCounterTwo/>*/}
+                {/*<HoverCounterTwo/>*/}
+            {/*   <ErrorBoundary>*/}
+            {/*    <Hero heroName={"Batman"}/>*/}
+            {/*   </ErrorBoundary>*/}
+
+            {/*   <ErrorBoundary>*/}
+            {/*    <Hero heroName={"Matthew"}/>*/}
+            {/*   </ErrorBoundary>*/}
+
+            {/*   <ErrorBoundary>*/}
+            {/*    <Hero heroName={"Joker"}/>*/}
+            {/*   </ErrorBoundary>*/}
+                {/*<PortalDemp/>*/}
+                {/*<FRParentInput/>*/}
+                {/*<FRInput/>*/}
+                {/*<FocusInput/>*/}
+                {/*<RefsDemo/>*/}
+                {/*<PureComp/>*/}
+                {/*<Columns/>*/}
+                {/*<Table/>*/}
+                {/*<FragmentDemo/>*/}
+                {/*<h1 className='error'>Error</h1>*/}
+                {/*<h1 className={styles.success}>Success</h1>*/}
+                {/*<LifecycleA/>*/}
+                {/*<LifecycleB/>*/}
+                {/*<Form/>*/}
+                {/*<Inline/>*/}
+                {/*<Stylesheet primary={ false }/>*/}
+                {/*<NameList/>*/}
+                {/*<BindingHandler/>*/}
+                {/*<UserGreeting/>*/}
+                <Parent/>
+                {/*<ClassClick/>*/}
+                {/*<Function/>*/}
+                {/*<Message/>*/}
+                {/* <Greet name="ronaldo" hero="Bad Man"/>*/}
+                {/*   <Greet name="Chan"/>*/}
+                {/*   <button>Push</button>*/}
+                {/*    <Greet/>*/}
+                {/*   <Greet name="Eda"/>*/}
+                {/*<ClickCounter name="Matthew"/>*/}
+                {/*<HoverCounter/>*/}
+                {/*<Welcome name="Matthew" hero="messi"/>*/}
+                {/*<Welcome name="Ronaldo"/>*/}
+            </div>
+        );
     }
 }
 
-export default App;
+export default App ;
diff --git a/src/appStyles.css b/src/appStyles.css
@@ -0,0 +1,3 @@
+.error {
+    color: red;
+}
diff --git a/src/appStyles.module.css b/src/appStyles.module.css
@@ -0,0 +1,3 @@
+.success {
+    color: blue;
+}
diff --git a/src/components/BindingHandler.js b/src/components/BindingHandler.js
@@ -0,0 +1,42 @@
+import React, { Component } from 'react'
+
+export class BindingHandler extends Component{
+    constructor(props) {
+      super(props)
+
+      this.state={
+          message: 'shut fuck up !'
+      }
+     //
+     //    #1
+     //    this.clickHandler= this.clickHandler.bind(this)
+    }
+     //
+     // #2
+    //
+    // clickHandler() {
+     //    this.setState({
+     //       message: 'Joe Cola'
+     //    })
+     //   console.log(this)
+     // }
+
+       // #3
+         clickHandler = () => {
+          this.setState({
+            message: 'fuck off!'
+        })
+       }
+
+    render() {
+     return(
+        <div>
+            <div>{this.state.message}</div>
+            {/*<button onClick={() => this.clickHandler()}>Push</button>*/}
+            <button onClick={this.clickHandler}>Push</button>
+        </div>
+     )
+    }
+}
+
+export default BindingHandler ;
diff --git a/src/components/Children.js b/src/components/Children.js
@@ -0,0 +1,14 @@
+import React, { memo } from 'react';
+
+
+const Children = memo((props) => {
+  console.log(props);
+  return(
+    <div>
+      Count times are {props.time} times pushed.
+    </div>
+  )
+})
+export default Children;
+
+// Props will inherit everything  from Parent's.
diff --git a/src/components/ClassClick.js b/src/components/ClassClick.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+
+export class ClassClick extends Component {
+    clickHandler() {
+        console.log('fuck you')
+    }
+     render() {
+        return(
+          <div>
+           <button onClick={this.clickHandler}>Click here!</button>
+          </div>
+      )
+    }
+}
+
+export default ClassClick;
diff --git a/src/components/ClickCounter.js b/src/components/ClickCounter.js
@@ -0,0 +1,13 @@
+// import React, { Component } from 'react'
+// import withCounter from "./withCounter";
+//
+//  class ClickCounter extends Component{
+//
+//     render() {
+//      const { count,incrementCount } =  this.props
+//      return<button onClick={this.incrementCount}>
+//           Clicked { count } times </button>
+//     }
+// }
+//
+// export default  withCounter(ClickCounter) ;
diff --git a/src/components/ClickCounterTwo.js b/src/components/ClickCounterTwo.js
@@ -0,0 +1,12 @@
+import React, { Component } from    'react'
+
+class  ClickCounterTwo extends Component {
+
+
+   render() {
+     const  {count,incrementCount} = this.props
+     return<button onClick={incrementCount}>Clicked {count} times</button>
+   }
+}
+
+export default ClickCounterTwo ;
diff --git a/src/components/Columns.js b/src/components/Columns.js
@@ -0,0 +1,14 @@
+import React from 'react'
+
+function Columns() {
+  const items = []
+  return(
+     <>
+      <td>Name</td>
+       <td> Shit</td>
+    </>
+
+  )
+}
+
+export default Columns ;
diff --git a/src/components/Counter.js b/src/components/Counter.js
@@ -0,0 +1,25 @@
+import React, {useState} from "react";
+
+const Counter = () => {
+  const [count, setCount] = useState(0);
+  const add = () => {
+    setCount( count + 1);
+  }
+  const addfive = () => {
+    setCount( count + 5);
+  }
+  const reset = () => {
+    setCount(0);
+  }
+  // useState()の引数には、最初に設定したい内容のものをもってくる。
+  return(
+    <div>
+      <button onClick={add}>fuck</button>
+      <button onClick={addfive}>fuck</button>
+      <button onClick={reset}>fuck</button>
+      <div>Count {count}</div>
+    </div>
+  )
+}
+
+export default Counter;
diff --git a/src/components/ErrorBoundary.js b/src/components/ErrorBoundary.js
@@ -0,0 +1,32 @@
+import React, { Component } from 'react'
+
+class ErrorBoundary extends Component{
+    constructor(props) {
+      super(props)
+       this.state = {
+          hasError: false
+       }
+    }
+
+
+    static  getDerivedStateFromError(error) {
+      return{
+        hasError: true
+      }
+    }
+
+    componentDidCatch(error, errorInfo) {
+        console.log(error)
+        console.log(errorInfo)
+    }
+
+
+    render() {
+      if (this.state.hasError) {
+          return <h1>Something went wrong</h1>
+      }
+          return this.props.children
+    }
+}
+
+export default  ErrorBoundary ;
diff --git a/src/components/FRInput.js b/src/components/FRInput.js
@@ -0,0 +1,20 @@
+import React from 'react'
+
+// function FRInput() {
+//     return(
+//      <div>
+//        <input type='text'/>
+//      </div>
+//     )
+// }
+
+const FRInput = React.forwardRef ((props, ref) => {
+    return(
+      <div>
+        <input type='text' ref={ref}/>
+      </div>
+    )
+})
+
+
+export default FRInput ;