Map.method_learned

.eslintcache

@@ -1 +1 @@
-[{"/Users/ogiwaramasatoshi/untitled1/src/index.js":"1","/Users/ogiwaramasatoshi/untitled1/src/App.js":"2","/Users/ogiwaramasatoshi/untitled1/src/reportWebVitals.js":"3","/Users/ogiwaramasatoshi/untitled1/src/components/Greet.js":"4","/Users/ogiwaramasatoshi/untitled1/src/components/Welcome.js":"5"},{"size":500,"mtime":1611136676035,"results":"6","hashOfConfig":"7"},{"size":320,"mtime":1611236828564,"results":"8","hashOfConfig":"7"},{"size":362,"mtime":1611136676036,"results":"9","hashOfConfig":"7"},{"size":108,"mtime":1611235745555,"results":"10","hashOfConfig":"7"},{"size":178,"mtime":1611236840054,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"15abmaf",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/ogiwaramasatoshi/untitled1/src/index.js",[],"/Users/ogiwaramasatoshi/untitled1/src/App.js",[],"/Users/ogiwaramasatoshi/untitled1/src/reportWebVitals.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/Greet.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/Welcome.js",[]]
+[{"/Users/ogiwaramasatoshi/untitled1/src/index.js":"1","/Users/ogiwaramasatoshi/untitled1/src/App.js":"2","/Users/ogiwaramasatoshi/untitled1/src/reportWebVitals.js":"3","/Users/ogiwaramasatoshi/untitled1/src/components/Greet.js":"4","/Users/ogiwaramasatoshi/untitled1/src/components/Welcome.js":"5","/Users/ogiwaramasatoshi/untitled1/src/components/Message.js":"6","/Users/ogiwaramasatoshi/untitled1/src/components/Function.js":"7","/Users/ogiwaramasatoshi/untitled1/src/components/ClassClick.js":"8","/Users/ogiwaramasatoshi/untitled1/src/components/BindingHandler.js":"9","/Users/ogiwaramasatoshi/untitled1/src/components/Parent.js":"10","/Users/ogiwaramasatoshi/untitled1/src/components/Children.js":"11","/Users/ogiwaramasatoshi/untitled1/src/components/UserGreeting.js":"12","/Users/ogiwaramasatoshi/untitled1/src/components/NameList.js":"13","/Users/ogiwaramasatoshi/untitled1/src/components/Person.js":"14"},{"size":500,"mtime":1611136676035,"results":"15","hashOfConfig":"16"},{"size":1284,"mtime":1611906342593,"results":"17","hashOfConfig":"16"},{"size":362,"mtime":1611136676036,"results":"18","hashOfConfig":"16"},{"size":164,"mtime":1611322453240,"results":"19","hashOfConfig":"16"},{"size":205,"mtime":1611323259102,"results":"20","hashOfConfig":"16"},{"size":510,"mtime":1611590166780,"results":"21","hashOfConfig":"16"},{"size":247,"mtime":1611666895505,"results":"22","hashOfConfig":"16"},{"size":321,"mtime":1611668020758,"results":"23","hashOfConfig":"16"},{"size":859,"mtime":1611754865555,"results":"24","hashOfConfig":"16"},{"size":558,"mtime":1611840504513,"results":"25","hashOfConfig":"16"},{"size":224,"mtime":1611839137506,"results":"26","hashOfConfig":"16"},{"size":333,"mtime":1611842011380,"results":"27","hashOfConfig":"16"},{"size":272,"mtime":1612185321569,"results":"28","hashOfConfig":"16"},{"size":260,"mtime":1612097167923,"results":"29","hashOfConfig":"16"},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},"15abmaf",{"filePath":"33","messages":"34","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":"35","usedDeprecatedRules":"32"},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"50","messages":"51","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"52","messages":"53","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"54"},{"filePath":"55","messages":"56","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"57","messages":"58","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"59","messages":"60","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/ogiwaramasatoshi/untitled1/src/index.js",[],["61","62"],"/Users/ogiwaramasatoshi/untitled1/src/App.js",["63","64","65","66"],"import React, { Component } from 'react'\nimport './App.css'\n// eslint-disable-next-line\nimport Greet from './components/Greet'\n// eslint-disable-next-line\nimport Welcome from \"./components/Welcome\";\n// eslint-disable-next-line\nimport Message from \"./components/Message\";\nimport Function from \"./components/Function\";\nimport ClassClick from \"./components/ClassClick\";\nimport  BindingHandler from \"./components/BindingHandler\"\n// import Parent from \"./components/Parent\";\n// import ChildrenComponent from \"./components/Children\";\nimport UserGreeting from \"./components/UserGreeting\";\nimport NameList from \"./components/NameList\";\n\n\nclass App extends Component{\n    render() {\n      return(\n       <div className=\"App\">\n           <NameList/>\n           {/*<BindingHandler/>*/}\n           {/*<UserGreeting/>*/}\n           {/*<Parent/>*/}\n           {/*<ChildrenComponent/>*/}\n          {/*<ClassClick/>*/}\n          {/*<Function/>*/}\n         {/*<Message/>*/}\n        {/* <Greet name=\"ronaldo\" hero=\"Bad Man\"/>*/}\n        {/*   <Greet name=\"Chan\"/>*/}\n        {/*   <button>Push</button>*/}\n        {/*    <Greet/>*/}\n        {/*   <Greet name=\"Eda\"/>*/}\n\n        {/*<Welcome name=\"Matthew\"/>*/}\n        {/*<Welcome name=\"ronaldo\"/>*/}\n       </div>\n      );\n    }\n}\n\nexport default App;","/Users/ogiwaramasatoshi/untitled1/src/reportWebVitals.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/Greet.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/Welcome.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/Message.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/Function.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/ClassClick.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/BindingHandler.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/Parent.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/Children.js",[],["67","68"],"/Users/ogiwaramasatoshi/untitled1/src/components/UserGreeting.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/NameList.js",["69"],"/Users/ogiwaramasatoshi/untitled1/src/components/Person.js",[],{"ruleId":"70","replacedBy":"71"},{"ruleId":"72","replacedBy":"73"},{"ruleId":"74","severity":1,"message":"75","line":9,"column":8,"nodeType":"76","messageId":"77","endLine":9,"endColumn":16},{"ruleId":"74","severity":1,"message":"78","line":10,"column":8,"nodeType":"76","messageId":"77","endLine":10,"endColumn":18},{"ruleId":"74","severity":1,"message":"79","line":11,"column":9,"nodeType":"76","messageId":"77","endLine":11,"endColumn":23},{"ruleId":"74","severity":1,"message":"80","line":14,"column":8,"nodeType":"76","messageId":"77","endLine":14,"endColumn":20},{"ruleId":"70","replacedBy":"81"},{"ruleId":"72","replacedBy":"82"},{"ruleId":"74","severity":1,"message":"83","line":2,"column":8,"nodeType":"76","messageId":"77","endLine":2,"endColumn":14},"no-native-reassign",["84"],"no-negated-in-lhs",["85"],"no-unused-vars","'Function' is defined but never used.","Identifier","unusedVar","'ClassClick' is defined but never used.","'BindingHandler' is defined but never used.","'UserGreeting' is defined but never used.",["84"],["85"],"'Person' is defined but never used.","no-global-assign","no-unsafe-negation"]

src/App.js

@@ -1,14 +1,40 @@
 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";
+// 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 ChildrenComponent from "./components/Children";
+import UserGreeting from "./components/UserGreeting";
+import NameList from "./components/NameList";
+
 
 class App extends Component{
     render() {
       return(
        <div className="App">
-         <Greet/>
-         <Welcome/>
+           <NameList/>
+           {/*<BindingHandler/>*/}
+           {/*<UserGreeting/>*/}
+           {/*<Parent/>*/}
+           {/*<ChildrenComponent/>*/}
+          {/*<ClassClick/>*/}
+          {/*<Function/>*/}
+         {/*<Message/>*/}
+        {/* <Greet name="ronaldo" hero="Bad Man"/>*/}
+        {/*   <Greet name="Chan"/>*/}
+        {/*   <button>Push</button>*/}
+        {/*    <Greet/>*/}
+        {/*   <Greet name="Eda"/>*/}
+
+        {/*<Welcome name="Matthew"/>*/}
+        {/*<Welcome name="ronaldo"/>*/}
        </div>
       );
     }

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 ;

src/components/Children.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+function ChildrenComponent(props) {
+    return(
+      <div>
+        <button onClick={() => props.greetHandler('child')}>Greet parent</button>
+      </div>
+    )
+}
+
+export default ChildrenComponent;

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;

src/components/Function.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+function Function() {
+    function clickHandler() {
+        console.log('Push')
+    }
+    return(
+        <div>
+         <button onClick= {clickHandler('')}>Click</button>
+        </div>
+    )
+}
+
+export default Function;

src/components/Greet.js

@@ -1,7 +1,8 @@
 import React from  'react'
 
-function Greet() {
-    return <h1>  Hello World ! </h1>
-}
 
+const Greet = (props) => {
+    console.log(props)
+    return <h2> Bonjour {props.name} to {props.hero}</h2>
+    }
 export default Greet;

src/components/Message.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+
+
+class Message extends Component {
+    constructor() {
+        super()
+        this.state= {
+            message: 'Welcome haha!'
+        }
+    }
+
+    changeMessage() {
+        this.setState({
+            message: 'Thank you!'
+        })
+    }
+
+    render() {
+      return(
+          <div>
+              <h1>{ this.state.message}</h1>
+              <button onClick={ ()=> this.changeMessage()}> click </button>
+          </div>
+      )
+    }
+}
+
+export default Message;

src/components/NameList.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import Person from "./Person";
+
+
+function NameList() {
+   const names =['Buffon','Ronaldo','Dybala']
+   const nameList = names.map((name,index) =><h2 key={index}>{index} {name}</h2>)
+    return <div> {nameList} </div>
+}
+
+export default NameList ;

src/components/Parent.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+import ChildrenComponent from "./Children";
+
+
+class Parent extends Component{
+    constructor(props) {
+      super(props)
+        this.state= {
+          parentName: 'Parent'
+        }
+
+        this.greetParent= this.greetParent.bind(this)
+    }
+
+
+    greetParent (childName) {
+        alert(`Bonjour ${this.state.parentName} from ${childName}`)
+    }
+
+    render() {
+      return(
+          <div>
+           <ChildrenComponent greetHandler={this.greetParent}/>
+          </div>
+      )
+    }
+}
+
+export default Parent

src/components/Person.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+
+function Person({person,key}) {
+    return(
+        <div>
+            <h2>
+                {key} I am {person.name}. I am {person.age}. My position is {person.skill}.
+            </h2>
+        </div>
+    )
+}
+
+export default Person ;

src/components/UserGreeting.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+
+
+class UserGreeting extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            isLoggedIn: true
+        }
+    }
+
+   render() {
+      return(
+      this.state.isLoggedIn && <div> Fuck you !!!</div>
+      )
+    }
+   }
+
+    export default UserGreeting;

src/components/Welcome.js

@@ -1,9 +1,10 @@
 import React, { Component } from 'react'
 
-class Welcome extends Component{
-    render() {
+
+class Welcome extends Component {
+    render(){
      return(
-         <h1> Class Component </h1>
+      <h2>Welcome {this.props.name} to {this.props.name}</h2>
      )
     }
 }