diff --git a/.eslintcache b/.eslintcache index 03555f0..46a7c07 100644 --- a/.eslintcache +++ b/.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",[]] \ No newline at end of file +[{"/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
\n \n {/**/}\n {/**/}\n {/**/}\n {/**/}\n {/**/}\n {/**/}\n {/**/}\n {/* */}\n {/* */}\n {/* */}\n {/* */}\n {/* */}\n\n {/**/}\n {/**/}\n
\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"] \ No newline at end of file diff --git a/src/App.js b/src/App.js index a76bdfc..6e1e49a 100644 --- a/src/App.js +++ b/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(
- - + + {/**/} + {/**/} + {/**/} + {/**/} + {/**/} + {/**/} + {/**/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + + {/**/} + {/**/}
); } diff --git a/src/components/BindingHandler.js b/src/components/BindingHandler.js new file mode 100644 index 0000000..cffcc7a --- /dev/null +++ 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( +
+
{this.state.message}
+ {/**/} + +
+ ) + } +} + +export default BindingHandler ; \ No newline at end of file diff --git a/src/components/Children.js b/src/components/Children.js new file mode 100644 index 0000000..91760a1 --- /dev/null +++ b/src/components/Children.js @@ -0,0 +1,11 @@ +import React from 'react' + +function ChildrenComponent(props) { + return( +
+ +
+ ) +} + +export default ChildrenComponent; \ No newline at end of file diff --git a/src/components/ClassClick.js b/src/components/ClassClick.js new file mode 100644 index 0000000..58d26db --- /dev/null +++ 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( +
+ +
+ ) + } +} + +export default ClassClick; \ No newline at end of file diff --git a/src/components/Function.js b/src/components/Function.js new file mode 100644 index 0000000..7653178 --- /dev/null +++ b/src/components/Function.js @@ -0,0 +1,14 @@ +import React from 'react' + +function Function() { + function clickHandler() { + console.log('Push') + } + return( +
+ +
+ ) +} + +export default Function; \ No newline at end of file diff --git a/src/components/Greet.js b/src/components/Greet.js index 131c098..6b60066 100644 --- a/src/components/Greet.js +++ b/src/components/Greet.js @@ -1,7 +1,8 @@ import React from 'react' -function Greet() { - return

Hello World !

-} +const Greet = (props) => { + console.log(props) + return

Bonjour {props.name} to {props.hero}

+ } export default Greet; \ No newline at end of file diff --git a/src/components/Message.js b/src/components/Message.js new file mode 100644 index 0000000..6c76644 --- /dev/null +++ b/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( +
+

{ this.state.message}

+ +
+ ) + } +} + +export default Message; \ No newline at end of file diff --git a/src/components/NameList.js b/src/components/NameList.js new file mode 100644 index 0000000..cdb7714 --- /dev/null +++ b/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) =>

{index} {name}

) + return
{nameList}
+} + +export default NameList ; \ No newline at end of file diff --git a/src/components/Parent.js b/src/components/Parent.js new file mode 100644 index 0000000..9700fd4 --- /dev/null +++ b/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( +
+ +
+ ) + } +} + +export default Parent \ No newline at end of file diff --git a/src/components/Person.js b/src/components/Person.js new file mode 100644 index 0000000..9426de3 --- /dev/null +++ b/src/components/Person.js @@ -0,0 +1,14 @@ +import React from 'react' + + +function Person({person,key}) { + return( +
+

+ {key} I am {person.name}. I am {person.age}. My position is {person.skill}. +

+
+ ) +} + +export default Person ; \ No newline at end of file diff --git a/src/components/UserGreeting.js b/src/components/UserGreeting.js new file mode 100644 index 0000000..113a171 --- /dev/null +++ b/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 &&
Fuck you !!!
+ ) + } + } + + export default UserGreeting; \ No newline at end of file diff --git a/src/components/Welcome.js b/src/components/Welcome.js index af47269..f9f8aa1 100644 --- a/src/components/Welcome.js +++ b/src/components/Welcome.js @@ -1,9 +1,10 @@ import React, { Component } from 'react' -class Welcome extends Component{ - render() { + +class Welcome extends Component { + render(){ return( -

Class Component

+

Welcome {this.props.name} to {this.props.name}

) } }